关于html5：有没有办法改变输入类型=“日期”格式？


Is there any way to change input type=“date” format?

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

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

相关讨论

改变格式是不可能的

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

电线格式

HTML5日期输入规范引用RFC3339规范，该规范指定等于：yyyy-mm-dd的完整日期格式。有关更多详细信息，请参见RFC3339规范的5.6节。

演示格式

浏览器在呈现日期输入方面不受限制。在撰写本文时，Chrome，Edge，Firefox和Opera都有日期支持(请参阅此处)。它们都显示日期选择器并在输入字段中格式化文本。

桌面设备

对于Chrome，Firefox和Opera，输入字段文本的格式基于浏览器的语言设置。对于Edge，它基于Windows语言设置。遗憾的是，所有Web浏览器都忽略操作系统中配置的日期格式。对我来说，这是一种非常奇怪的行为，在使用此输入类型时需要考虑一些事项。例如，将操作系统或浏览器语言设置为en-us的荷兰语用户将显示为01/30/2019，而不是他们习惯的格式：30-01-2019。

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

移动设备

专门针对Android上的Chrome，格式化基于Android显示语言。我怀疑其他浏览器也是如此，但我无法验证这一点。

相关讨论

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

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

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

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

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

符合标准，没有黑客攻击。

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

希望能帮助到你！

相关讨论

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

1
<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上失败。

相关讨论

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

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

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

相关讨论

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

相关讨论

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

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

JS：

1
2
3
4
5
6
7
8
9
10
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]);
        });
    });
}

上海社会科学院：

1
2
3
4
5
6
7
8
$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}";
    }
}
相关讨论

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

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

相关讨论

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

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

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

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

1
2
3
$("#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()))));
        });
1
#date_input{text-indent: -500px;height:25px; width:200px;}
1
2
3
4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js">
<input id ="date_input" dateformat="d M y" type="date"/>
<span class="datepicker_label" style="pointer-events: none;"></span>

相关讨论

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

HTML代码：

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

CSS代码：

1
2
3
4
5
#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Javascript代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}

输出：

enter image description here

如上所述，并未在大多数浏览器中完全实现，所以让我们谈谈webkit之类的浏览器(chrome)。

使用linux，您可以通过更改环境变量LANG来更改它，LC_TIME似乎不起作用(至少对我来说)。

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

例如：
使用：

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

日期显示为mm/dd/yyyy

使用：

1
LANG=pt_BR /opt/google/chrome/chrome

日期显示为dd/mm/yyyy

您可以使用http://lh.2xlibre.net/locale/pt_BR/(通过您的语言环境更改pt_BR)来创建您自己的自定义区域设置并根据需要设置日期格式。

关于更改默认系统日期的更好的更高级参考：
How to change date formats on Ubuntu
和
https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

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

1
2
$ date +%x
01-06-2015

但由于LC_TIME和d_fmt似乎被chrome拒绝(我认为它是webkit或chrome中的一个bug)，遗憾的是它不起作用。 ：'(

所以，不幸的是响应，是IF LANG环境变量没有解决你的问题，还没有办法。

相关讨论

无法更改Web工具包浏览器使用用户的计算机或手机默认日期格式。
但是如果你可以使用jquery和jquery UI，那么有一个可设计的日期选择器，可以像开发人员想要的那样以任何格式显示。
jquery UI日期选择器的链接是
在此页面http://jqueryui.com/datepicker/您可以找到演示以及代码和文档或文档链接

编辑： - 我发现chrome使用的语言设置默认等于系统设置，但用户可以更改它们但开发人员不能强制用户这样做，所以你必须使用其他js解决方案，比如我告诉你可以搜索网页使用javascript日期选择器或jquery日期选择器等查询

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

(在支持的浏览器中测试过，Chrome，Edge。)

由于目前没有规范定义的标准来改变日期控制的风格，因此无法在浏览器中实现相同的标准。

However, This behavior of obtaining the date format from system settings is better and I strongly suggest, we should not try to override it. The reason is, the users will see the date-input's format same as they have configured in the system/device and which they are comfortable with or matches with their locale.

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

请参阅谷歌开发者页面。

我知道这是一个旧帖子，但它是谷歌搜索中的第一个建议，简答案否，建议回答用户自定义日期Piker，我使用的正确答案是使用文本框来模拟日期输入，并做任何你想要的格式，这是代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<html>
<body>
date :
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text');
        if(input.value ==="some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity ="1";
            }
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" /"+month+" /"+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   
  </body>
</html>

1-请注意，此方法仅适用于支持日期类型的浏览器。

2- JS代码中的第一个函数用于不支持日期类型的浏览器，并将外观设置为普通文本输入。

3-如果您将此代码用于页面中的多个日期输入，请将函数调用中输入的文本的ID"xTime"和输入本身更改为其他内容，当然还要使用您想要的输入名称。表格提交。

4 - 在第二个功能上你可以使用你想要的任何格式而不是day +"/"+ month +"/"+ year例如year +"/"+ month +"/"+ day并在文本输入中使用占位符或值作为页面加载时用户的yyyy / mm / dd。