jquery - 使用jquery datepicker时，处理人们以不同格式输入日期的正确方法是什么？

Question

我有以下代码:

$('#MilestoneStartDate').datepicker({
    dateFormat: 'dd M yy'
});

如果您使用鼠标单击弹出窗口中的日期来输入日期，则一切正常，但如果有人以与上述不同的格式输入日期或将日期粘贴到文本框中(例如“1/1/2016”)，当我有这个代码时:

 var startDate = $('#MilestoneStartDate').datepicker("getDate");

startDate 变量显示为当前日期(即使显然 1/1/2016 不是当前日期)

处理这些情况的最佳方法是什么？我应该阻止人们输入和粘贴日期还是有办法进行格式转换？

Answer 1

getDate datepicker 方法返回日期类型，而不是字符串。

您需要使用日期格式将返回值格式化为字符串。使用日期选择器的formatDate函数:

var startDate = $('#MilestoneStartDate').datepicker('getDate');
$.datepicker.formatDate('dd M yy', startDate);

格式说明符的完整列表为 available here .

编辑

$('#MilestoneStartDate').datepicker("getDate");

如果通过鼠标选择日期并单击日期弹出窗口，则始终为您提供正确的日期，但如果有人以不同格式手动书写或粘贴日期，则这将为您提供当前日期。

因此，要处理这种情况，请使用以下代码。

$(function(){    
    $('#MilestoneStartDate').datepicker({
         dateFormat: 'dd M yy'
    });    
});

var strSelectedDate = new Date($('#MilestoneStartDate').val());
var formatedDate = $.datepicker.formatDate('dd M yy', strSelectedDate);
alert(formatedDate);

Working Demo

根据 @Boris Serebrov 评论

关键是 new Date($('#MilestoneStartDate').val()) - 它实际上试图“猜测”格式，所以像“2 Mar 2016”、“March 2 2016”或“2016, 2 March”将被正确解析。

一步一步:

情况1:

这里strSelectedDate为您提供标准格式的日期，假设我从它给出的日期弹出窗口中选择02 Mar 2016

Wed Mar 02 2016 00:00:00 GMT+0530

现在

$.datepicker.formatDate('dd M yy', strSelectedDate);

给你格式的日期，如下所示

02 Mar 2016

案例:2

正如您在问题中提到的，如果用户手动输入日期(例如 1/1/2016 strSelectedDate)，则会为您提供如下所示的标准日期

Fri Jan 01 2016 00:00:00 GMT+0530

然后

$.datepicker.formatDate('dd M yy', strSelectedDate);

给你格式化的日期

01 Jan 2016

这是预期的正确日期。

情况3:

现在，如果用户手动写入一些无效日期，例如112016，则strSelectedDate返回无效日期，因此您可以在这里实现一些客户端验证用户输入正确的日期。

希望这对您有帮助。