有没有办法改变输入类型="日期"格式？

Question

我在我的网页上使用HTML5元素.默认输入type="date"显示日期为YYYY-MM-DD.

问题是,是否可以将其格式更改为:DD-MM-YYYY？

Answer 1

改变格式是不可能的

我们必须区分有线格式和浏览器的演示格式.

线格式的HTML5日期输入规范指的是RFC3339规范,它指定一个全日期格式等于:YYYY-MM-DD.有关更多详细信息,请参见RFC3339规范的5.6节.

演示文稿格式浏览器在呈现日期输入方面不受限制.在撰写Chrome时,Edge,Firefox和Opera都有日期支持(见这里).它们都显示日期选择器并在输入字段中格式化文本.

输入字段文本的格式只能在Chrome中正确完成.Edge,Firefox和Opera以正确的顺序显示语言环境的日期,月份和年份,但不一致地使用斜杠(yyyy-mm-dd),例如en-us,区域设置的日历格式需要破折号().

Internet Explorer 9,10和11显示带有线格式的文本输入字段.

Answer 2

由于这个问题被问到网络领域发生了很多事情,其中​​最令人兴奋的是Web组件的登陆.现在,您可以使用专为满足您的需求而设计的自定义HTML5元素来优雅地解决此问题.如果您希望覆盖/更改任何html标记的工作方式,只需构建您使用阴影dom.

好消息是已经有很多可用的样板,所以很可能你不需要从头开始提出解决方案.只需检查人们正在构建什么并从那里获取想法.

您可以从一个简单(和工作)的解决方案开始,例如聚合物的datetime-input,它允许您使用这样的标签:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

或者您可以根据需要设置创意和弹出式完整日期选择器,您可以使用所需的格式和区域设置,回调以及长长的选项列表(您可以使用完整的自定义API!)

符合标准,没有黑客攻击.

仔细检查可用的polyfills,它们支持哪些浏览器/版本,以及它是否覆盖了足够的用户群%...它是2018年,所以它肯定会覆盖大多数用户.

希望能帮助到你!

Answer 3

如前所述,正式无法更改格式.但是,可以对字段进行样式设置,因此(通过一些JS帮助)它会以我们想要的格式显示日期.操作日期输入的一些可能性以这种方式丢失,但如果强制格式的愿望更大,则此解决方案可能是一种方式.日期字段只保留:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

其余的是一些CSS和JS:http://jsfiddle.net/g7mvaosL/

它非常适用于桌面版Chrome和iOS上的Safari(特别理想,因为触摸屏上的原生日期操纵器是无与伦比的恕我直言).没有检查其他人,但不要指望在任何Webkit上失败.

Answer 4

区分两种不同的格式很重要:

• RFC 3339/ISO 8601"有线格式":YYYY-MM-DD.根据HTML5规范,这是在表单提交时或通过DOM API请求时必须用于输入值的格式.它是区域和区域独立的.
• 用户界面控件显示的格式,并作为用户输入接受.建议浏览器供应商遵循用户的首选项选择.例如,在语言和文本首选项窗格中选择了"美国"区域的Mac OS上,Chrome 20使用"m/d/yy"格式.

HTML5规范不包括任何覆盖或手动指定任何格式的方法.

Answer 5

我找到了一种更改格式的方法，这是一种棘手的方法，我只是使用 CSS 代码更改了日期输入字段的外观。

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
  color: #fff;
  position: relative;
}

input[type="date"]::-webkit-datetime-edit-year-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 56px;
}

input[type="date"]::-webkit-datetime-edit-month-field{
  position: absolute !important;
  border-left:1px solid #8c8c8c;
  padding: 2px;
  color:#000;
  left: 26px;
}


input[type="date"]::-webkit-datetime-edit-day-field{
  position: absolute !important;
  color:#000;
  padding: 2px;
  left: 4px;
  
}

<input type="date" value="2019-12-07">

Answer 6

我相信浏览器将使用本地日期格式.不要认为改变是可能的.您当然可以使用自定义日期选择器.

Answer 7

我两年前搜索过这个问题，我的谷歌搜索再次让我想到这个问题。不要浪费时间尝试用纯 JavaScript 来处理这个问题。我浪费了时间试图做到这一点dd/mm/yyyy。没有适合所有浏览器的完整解决方案。因此，我建议使用momentJS / jQuery datepicker或告诉您的客户使用默认日期格式

Answer 8

经过多次跨栏后,我想出了一个允许改变格式的解决方案.有一些注意事项但如果您希望始终显示"Jan"或"01",则可以使用它.它仅适用于Windows和Mac上的Chrome,因为Firefox根本不支持原生日期选择器.

https://github.com/northamerican/custom-input-date-format

JS:

function updateDateInputs() { 
    $('input').each(function() {
        var $date = $(this),
            date = $date.val().split('-'),
            format = ['year', 'month', 'day'];
        $.each(format, function(i, v) {
            $date.attr('data-' + v, +date[i]);
        });
    });
}

上海社会科学院:

$months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12';
@each $month in $months {
    $i: index($months, $month);

    input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { 
        content: "#{$month}";
    }
}

Answer 9

谷歌Chrome在其上一个测试版中最终使用了输入type=date,格式为DD-MM-YYYY.

因此必须有一种强制特定格式的方法.我正在开发一个HTML5网页,日期搜索现在以不同的格式失败.

Answer 10

浏览器从用户的系统日期格式获取日期输入格式。

\n

（在支持的浏览器、Chrome、Edge 和 Firefox 中测试。）

\n

由于目前还没有规范定义的标准来改变日期控件的样式，因此不可能在浏览器中实现相同的功能。

\n

\n

用户可以在输入[type=date] 的文本字段中键入日期值，日期格式在框中显示为灰色文本。该格式是从操作系统的设置中获取的。Web 作者无法更改日期格式，因为目前没有指定格式的标准。

\n

\n

因此，无需更改它，如果我们不更改任何内容，用户将看到日期输入的格式与他们在系统/设备设置中配置的格式相同，并且他们对此感到满意或与他们的区域设置相匹配。

\n

请记住，这只是用户在屏幕上看到的 UI 格式，在 JavaScript/后端中，您始终可以保留所需的格式来使用。

\n

更改 Windows 上的系统日期格式： \n要更改 Windows 10 或更高版本上的系统日期格式，请转至开始 --> 日期和时间设置 --> 日期、时间和区域格式 --> 更改区域格式（附图）。

\n

更改格式后，您可能需要刷新页面或有时重新启动浏览器。\n

\n

如果以上方法不起作用，您可以在 chrome 中尝试以下方法：

\n

\n

要更改 Chrome 中的格式（例如，从美国“MM/DD/YYYY”更改为\n“DD/MM/YYYY”），请转至 > 设置 > 高级 > 添加语言（选择\n英国英语）。然后：浏览器重新启动，您将发现如下所示的日期输入字段：\n\xc2\xb425/01/2022

\n

\n

请参阅相同的谷歌开发人员页面。

\n

WHATWG git hub 查询相同

\n

使用以下日期输入进行测试：

\n

\r\n

\r\n

<input type="date" id="dob" value=""/>

\r\n

\r\n

\r\n

\n

Answer 11

如前所述，<input type=date ... >大多数浏览器都没有完全实现，所以我们来谈谈 webkit 之类的浏览器（chrome）。

使用linux，你可以通过改变环境变量来改变它LANG， LC_TIME但似乎不起作用（至少对我来说）。

您可以locale在终端中键入以查看当前值。我认为同样的概念也可以应用于IOS。

例如： 使用：

LANG=en_US.UTF-8 /opt/google/chrome/chrome

日期显示为mm/dd/yyyy

使用：

LANG=pt_BR /opt/google/chrome/chrome

日期显示为dd/mm/yyyy

您可以使用http://lh.2xlibre.net/locale/pt_BR/（pt_BR根据您的区域设置进行更改）创建您自己的自定义区域设置并根据需要设置日期格式。

关于如何更改默认系统日期的更高级参考是： https: //ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ 和 https://askubuntu。 com/questions/21316/how-can-i-customize-a-system-locale

您可以使用以下命令查看实际的当前日期格式date：

$ date +%x
01-06-2015

但 asLC_TIME和d_fmt似乎被 chrome 拒绝了（我认为这是 webkit 或 chrome 中的一个错误），遗憾的是它不起作用。:'(

所以，不幸的是，如果LANG环境变量不能解决你的问题，目前还没有办法。

Answer 12

在阅读了大量讨论后，我准备了一个简单的解决方案，但我不想使用大量的 Jquery 和 CSS，只是一些 javascript。

HTML代码：

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

CSS 代码：

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Javascript代码：

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

输出：

Answer 13

如果你需要一个快速的解决方案,尝试这个让yyyy-mm-dd去"dd- Sep -2016"

1)在输入附近创建一个span类(充当标签)

2)每次用户更改日期或需要从数据加载时更新标签.

适用于 IE11 +的webkit浏览器移动设备和指针事件需要jQuery和Jquery Date

$("#date_input").on("change", function () {
     $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val()))));
        });

#date_input{text-indent: -500px;height:25px; width:200px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>