Question

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

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

Answer 1

无法更改格式

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

有线格式 HTML5 date input specification引用RFC3339 specification，它指定的全日期格式等于：yyyy-mm-dd。有关详细信息，请参阅RFC3339规范的section 5.6。

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

输入字段文本的格式化仅在Chrome中正确完成。 Edge，Firefox和Opera以正确的顺序显示日期，日期，月份和年份，但不一致地使用斜杠（30/01/2018），例如，区域设置需要破折号（30-01-2018）日历格式。

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

Answer 2

由于这个问题被问到网络领域发生了很多事情，其中最令人兴奋的是web components的登陆。现在，您可以使用custom HTML5 element优雅地解决此问题，以满足您的需求。如果您希望覆盖/更改任何html标记的工作方式，只需构建您使用 shadow dom 的方法。

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

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

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

或者您可以获得创意和弹出式完整日期选择器styled as you wish，其中包含您需要的格式和区域设置，回调以及您的长选项列表（您可以使用完整的自定义API）！）

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

仔细检查available polyfills，他们支持的browsers/versions，以及它是否涵盖了足够的用户群％...... 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

It's important to distinguish two different formats：

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

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

Answer 5

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

Answer 6

经过多次跨栏后，我想出了一个允许更改格式的解决方案。有一些注意事项，但是如果您希望有一个＆＃39; Jan＆＃39;或者＆＃39; 01＆＃39;持续显示。它仅适用于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]);
        });
    });
}

SASS：

$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 7

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

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

Answer 8

尝试如果您需要快速解决方案要使yyyy-mm-dd去“dd- Sep -2016”

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

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

适用于webkit浏览器移动设备和IE11 +的指针事件需要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>

Answer 9

在阅读了大量讨论之后，我准备了一个简单的解决方案，但我不想使用大量的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 10

2年前，我搜索了这个问题，而我的Google搜索再次将我引向了这个问题。不要浪费时间尝试使用纯JavaScript来处理它。我浪费时间尝试使其argc。没有适合所有浏览器的完整解决方案。因此，我建议使用argv datepicker或告诉您的客户改用默认日期格式

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

但由于LC_TIME和d_fmt似乎被Chrome拒绝（我认为这是webkit或chrome中的错误），遗憾的是 它不起作用 即可。：'（

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

Answer 12

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

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

Answer 13

我调整了 Miguel 中的代码以使其更易于理解我想与像我一样有问题的人分享。

试试这个简单快捷的方法

$("#datePicker").on("change", function(e) {

  displayDateFormat($(this), '#datePickerLbl', $(this).val());

});

function displayDateFormat(thisElement, datePickerLblId, dateValue) {

  $(thisElement).css("color", "rgba(0,0,0,0)")
    .siblings(`${datePickerLblId}`)
    .css({
      position: "absolute",
      left: "10px",
      top: "3px",
      width: $(this).width()
    })
    .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`));

}

function getDateFormat(dateValue) {

  let d = new Date(dateValue);

  // this pattern dd/mm/yyyy
  // you can set pattern you need
  let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`;

  return dstring;
}

.date-selector {
  position: relative;
}

.date-selector>input[type=date] {
  text-indent: -500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="date-selector">
  <input id="datePicker" class="form-control" type="date" onkeydown="return false" />
  <span id="datePickerLbl" style="pointer-events: none;"></span>
</div>

Answer 14

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

（在支持的浏览器，Chrome，Edge中测试过。）

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

但是，从系统设置获取日期格式的这种行为更好，我强烈建议，我们不应该尝试覆盖它。原因是，用户将看到日期输入的格式与他们在系统/设备中配置的格式相同，并且它们适合或与其区域设置匹配。

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

Refer google developers page on same.

Answer 15

我知道这是一个过时的帖子，但它是google搜索中的第一个建议，简短的答案，不，推荐的答案用户是自定义日期输入者，我使用的正确答案是使用文本框来模拟日期输入并执行任何操作所需的格式，这是代码

<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，您可以使用所需的任何格式，而不是day +“ /” + month +“ /” + year例如year +“ /” + month +“ /” + day“，并且在文本输入中使用占位符或页面加载时用户的值为yyyy / mm / dd。

Answer 16

由于该帖子活跃于2个月前。所以我也想提供我的意见。

就我而言，我从dd / mm / yyyy格式的读卡器接收日期。

我该怎么办。例如

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }

<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

代码的作用：

它基于“ /”将我得到的日期分割为dd / mm / yyyy（使用split（））并创建一个数组，
然后它反转数组（使用reverse（）），因为日期输入支持反转我得到的。
然后将其连接（使用join（））数组，使其根据输入字段要求的格式

所有这些操作都在一行中完成。

我认为这会有所帮助，所以我写了这个。

Answer 17

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

@receiver(post_save, sender=SchPrograms, dispatch_uid="my_unique_identifier")
def my_callback(sender, instance, created, *args, **kwargs):
    state_id = state_id_filter #its a global variable 
    if created and not kwargs.get('raw', False):
        pfst_id = SchProgramForStates.objects.create(program_id=instance.program_id, state_id=state_id)
        pfst_id.save(force_insert=True)

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;
  
}

Answer 18

您可以使用占位符属性。例如：

<input type="date" placeholder="dd.MM.yyyy">

Answer 19

感谢 @safi eddine 和 @Hezbullah Shah

带有 VanillaJS 和 CSS 的日期选择器。

CSS - 样式：

/*================== || Date Picker ||=======================================================================================*/

/*-------Removes the // Before dd - day------------------------*/
input[type="date"]::-webkit-datetime-edit-text
{
    color: transparent;    
}




/*------- DatePicker ------------------------*/
input[type="date"] {
    background-color: aqua;
    border-radius: 4px;
    border: 1px solid #8c8c8c;
    font-weight: 900;
}





/*------- DatePicker - Focus ------------------------*/
input[type="date"]:focus 
{
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}






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



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


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



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

JAVASCRIPT：

 // ================================ || Format Date Picker || ===========================================================
    function GetFormatedDate(datePickerID)
    {
        let rawDate = document.getElementById(datePickerID).value; // Get the Raw Date
        return rawDate.split('-').reverse().join("-"); // Reverse the date
    }

使用：

 document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID

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

19 个答案: