如何在Datepicker中更改显示的日期格式？

Question

我使用JQuery UI输入日期并使用DatePicker。

我需要将日期显示为yyyy-mm-dd。

我在控制台的这个答案中尝试了这个解决方案：how to change dateformat of jquery Datepicker

$( ".date-input" ).datepicker({ dateFormat: 'yy-dd-mm' });

在控制台中返回：

[<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_TO" title=​"Enter date you plan to go to your destination" placeholder=​"Go to date" type=​"date" value=​"2014-05-08 00:​00:​00" id=​"dp1399632827005">​, 
<input class=​"date-input hasDatepicker" name=​"TRAVELDAY_FROM" title=​"Enter the date when you plan to come back" placeholder=​"Come back date" type=​"date" value=​"2014-05-13 00:​00:​00" id=​"dp1399632827006">]

但没有任何改变生效。

那么，如何在Datepicker中更改显示的日期格式？

稍后编辑：

如果我将type="date"更改为type="text"（请参阅：http://jsfiddle.net/Zksv5/），代码可以正常运行，但我想让其适用于类型日期格式。

那么，当输入具有type="date"属性时，如何在Datepicker中更改显示的日期格式？

Answer 1

参考此工作jsfiddle

<input type="text" value="" class="date-input" id="TxtStrtDate" > 

$(".date-input").datepicker({ 
    dateFormat: 'yy-dd-mm' 
});

Answer 2

您正在做的是在jQuery UI中格式化datepicker的正确方法。

请参阅此处： http://jsfiddle.net/abhitalks/w5YQk/

HTML ：

<input id="dated" />

jQuery代码：

$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });

更新（根据您对HTML5的评论date类型）：

1. 不重复已在此处描述的内容： Is there any way to change input type="date" format?： 简短的回答是规格中的电线格式是 ＆＃34; yyyy-mm-dd＆＃34;，但浏览器可以自由决定 介绍。某些浏览器（如Chrome）会将日期显示为 客户端机器的区域设置，而其他（如Opera） 呈现电线格式。所以，你在这里做不了多少。

2. 当输入为HTML5时，jQuery UI datepicker将失败date 类型。实际上它只有在设置格式时才会起作用 将自己转换为date类型输入的有线格式！所以， 再次，你不能在这里做很多事情。

3. 理想情况下，您应该呈现jQuery（或任何其他）datepicker 如果没有浏览器支持HTML5 date类型，则仅 。如果支持，则应首选默认浏览器实现。

因此，您有两种选择： （a） 使用常规text类型并附加datepicker以提供常见的外观。 （b） 仅当浏览器不支持HTML5 date类型时，依赖datepicker类型并回退到date。

您可以使用您选择的任何库来根据浏览器功能检测做出决策。 （例如Modernizr等）

如果你想自己做，那么这个例子将对你有帮助（解释嵌入为代码注释）：

演示： http://jsfiddle.net/abhitalks/w5YQk/3/

HTML ：

<input id="dated" type="text" /> <!-- Regular "text" type input -->
<input id="dated2" type="date" /> <!-- HTML5 "date" type input -->

jQuery代码：

var dtType;

// We know this is text type so attaching datepicker
$("#dated").datepicker({ dateFormat: 'yy-dd-mm' });

// We check the type of the second element
dtType = document.getElementById("dated2").type;

/*
If the browser supports html5 date type, then it will return "date".
If browser doesn't support, it will default to "text" type.
*/

if (dtType == "text") {
    // Attach datepicker only if type is "text"
    $("#dated2").datepicker();
}

这利用了以下事实：不支持HTML5 date类型的浏览器将默认为text，因此该元素在DOM中将为text类型。< / p>

希望有所帮助。