有没有办法改变input type="date"格式?

默认情况下，输入type="date"显示日期为YYYY-MM-DD。

问题是，是否可能将其格式强制为:DD-MM-YYYY?

当前回答

Angular开发者(也许还有其他人)可以考虑这个部分解决方案。

我的策略是检测输入字段的焦点状态，并相应地在日期和文本类型之间切换。明显的缺点是日期格式会随着输入焦点而改变。

这不是完美的，但确保了一个不错的一致性水平，特别是当你有一些日期显示为文本，也有一些日期输入在你的web应用程序。如果你只有一个日期输入，这不会是很有帮助的。

<input class="form-control"
       [type]="myInputFocus ? 'date' : 'text'"
       id="myInput"
       name="myInput"
       #myInput="ngModel"
       [(ngModel)]="myDate"
       (focus)="myInputFocus = true"
       (blur)="myInputFocus = false">

并且简单地在组件类的开头声明myInputFocus = false。显然，将myDate指向所需的控件。

2022-02-09 23:20:37

其他回答

Angular开发者(也许还有其他人)可以考虑这个部分解决方案。

我的策略是检测输入字段的焦点状态，并相应地在日期和文本类型之间切换。明显的缺点是日期格式会随着输入焦点而改变。

<input class="form-control"
       [type]="myInputFocus ? 'date' : 'text'"
       id="myInput"
       name="myInput"
       #myInput="ngModel"
       [(ngModel)]="myDate"
       (focus)="myInputFocus = true"
       (blur)="myInputFocus = false">

并且简单地在组件类的开头声明myInputFocus = false。显然，将myDate指向所需的控件。

2022-02-09 23:20:37

如上所述，<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

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

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

2015-06-01 13:28:37

const birthday = document.getElementById("birthday"); const button = document.getElementById("wishBtn"); 按钮。addEventListener("click"， () => { let dateValue = birthday.value; //改变格式:) dateValue = dateValue.split(“-”).reverse () . join(“-”); alert('生日快乐的国王/皇后${dateValue} '); })； <input type="date" id="birthday" name="birthday" value="2022-10-10"/> <button id="wishBtn">点击我</button>

2022-07-07 12:33:50

自从这个问题被提出后，web领域发生了很多事情，其中最令人兴奋的是web组件的登陆。现在，您可以使用定制的HTML5元素优雅地解决这个问题，以满足您的需求。如果你想覆盖/改变任何html标签的工作方式，只需使用shadow dom构建你的。

好消息是，已经有很多可用的样板文件，所以很可能你不需要从头开始想出一个解决方案。看看人们在做什么，然后从中获得灵感。

你可以从一个简单(有效)的解决方案开始，比如聚合物的datetime-input，它允许你使用这样的标签:

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

或者您可以获得创意和弹出完整的日期选择器样式，如您所希望的，与格式和区域设置，回调，和您的长选项列表(您有一个完整的自定义API在您的处置!)

符合标准，没有黑客。

仔细检查可用的插件，它们支持哪些浏览器/版本，以及它是否覆盖了足够百分比的用户基础……现在是2018年，所以它肯定会覆盖你的大部分用户。

希望能有所帮助!

2015-08-21 22:01:08

我知道这是一个老帖子，但它是谷歌搜索的第一个建议，简短的答案不，推荐答案用户自定义日期选择器，我使用的正确答案是使用文本框来模拟日期输入，并做任何你想要的格式，这里是代码

<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;}
    }
}
   </script>
  </body>
</html>

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

2- JS代码中的第一个函数是针对不支持日期类型的浏览器，并将外观设置为正常的文本输入。

3-如果你将在你的页面中使用此代码进行多个日期输入，请在函数调用和输入本身中更改文本输入的ID“xTime”，当然，使用你想要的表单提交的输入名称。

4-在第二个函数中，你可以使用任何你想要的格式，而不是日+" / "+月+" / "+年，例如年+" / "+月+" / "+日，在文本输入中使用占位符或值作为页面加载时用户的yyyy / mm / dd。

2018-09-21 17:32:46

有没有办法改变input type="date"格式?

推荐文章

最新文章

标签