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

Question

我有以下代码：

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

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

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

startDate 变量显示为当前日期（尽管 2016 年 1 月 1 日显然不是当前日期）

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

Answer 1

datepicker 的 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

2016 年 3 月 2 日星期三 00:00:00 GMT+0530

现在

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

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

2016 年 3 月 2 日

案例：2

正如您在问题中提到的，如果用户手动输入像 1/1/2016 strSelectedDate 这样的日期，则会为您提供如下标准日期

2016 年 1 月 1 日星期五 00:00:00 GMT+0530

然后

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

给你格式化的日期

2016 年 1 月 1 日

哪个是预期的正确日期。

案例 3：

现在，如果用户手动编写了一些无效日期，例如 112016，那么 strSelectedDate 将返回 Invalid Date，因此您可以在此处实施一些客户端验证，让用户输入正确的日期。 p>

希望对你有所帮助。

Answer 2

简短回答：让用户修复她的错误（您可以允许粘贴，这不是问题）。只需坚持简单的验证机制即可。

长答案：

我认为您应该允许用户粘贴文本， 但是在所有控件都有效之前验证表单是没有意义的。

因此，如果用户在您的日期控件中粘贴了错误的日期，那么当她单击提交按钮时，您的用户界面应该会显示一条错误消息，内容如下：“日期格式不正确。正确的格式是dd M yy”。

请注意，用户实际上可以粘贴任何内容，甚至是像“izeoif zoi”这样的字符串；所以无论如何你都需要验证。

当用户是罪魁祸首时，她应该修复她的错误（我相信）。

告诉用户控件错误是很常见的：例如，我假设您知道错误消息：“名称是必需的”。 这里的想法是一样的。

正如@Eric Guan 指出的那样，您可以使用提示来帮助用户首先了解您的日期格式（在她键入/粘贴任何内容之前）。

Answer 3

正确的做法是告诉用户预期的日期格式以及输入的有效日期。

这被认为是良好的用户体验，并且如此普遍，以至于大多数用户都会期望它。

另外，你不可能解析所有输入的日期，例如一些国家使用MM/DD/YYYY，而其他国家使用DD/MM/YYYY，谁说01/07/2015是一月七号还是七月一号, 不知道格式就无法判断。

当您使用 jQuery UI 时，这里有一个使用内置工具提示小部件验证日期选择器的快速方法

$('#MilestoneStartDate').datepicker({
    dateFormat: 'dd M yy'
}).on({
	change : function() {
        if ( !this.checkValidity() ) {
        	$(this).tooltip({
				close: function( event, ui ) {  ui.tooltip.stop() }
			});
            setTimeout(function(x) { $(x).tooltip('open') }, 0, this);
        } else {
        	$(this).tooltip('destroy');
        }
    }
}).datepicker('setDate', new Date());

.ui-datepicker{ z-index: 999999999!important;}
.ui-tooltip-content {font-size: 14px;}

<link href="https://code.jquery.com/ui/1.11.4/themes/trontastic/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<p>Type an invalid date</p>
<input id="MilestoneStartDate" pattern="[0-9]{2}\s[a-zA-Z]{3}\s[0-9]{4}" title='valid format is : "10 Mar 2015"' >

请注意，要验证的模式直接添加到输入中，工具提示内容也是如此。
还有许多其他方法可以做到这一点，如果您使用的是常规表单提交，HTML5 验证将是一种选择等，但最终，要求用户根据给定模式输入有效日期会更好而不是试图处理各种日期格式。

Answer 4

您可以禁止人们编辑文本框并在其旁边放置一个图标。人们需要点击图标并输入日期。所以复制粘贴在这里不起作用。

Answer 5

验证是个好主意。 您也可以编写自己的插件来更改日期格式或查看以下内容： https://plugins.jquery.com/formatDateTime/

Answer 6

最好防止用户键入或粘贴日期。使用readonly='readonly' 将您的日期文本框设为只读

Answer 7

您可以在用户输入完日期后将用户的日期更改为有效日期，
该函数将支持所有格式：

• d-m-yy 或 d-m-yyyy

• d/m/yy 或 d/m/yyyy

• d.m.yy 或 d.m.yyyy

将显示为 d-m-yyyy

      //initializing the datePicker
       $('#datePickerId').datepicker ({
        format: 'dd-mm-yy',
        shortYearCutoff: 0,
        autoclose: true,
        todayHighlight: true,
      })

        //change to the correct format
         $('#datePickerId').datepicker()
                 .on("hide", function(e) {
                   var temp=e.delegateTarget.firstElementChild.value.split('-');
                   if(temp.length==3 && temp[2].length<=3)
                   {
                    var year;
                    if(temp[2].length==2)
                      year="20";
                      else if(temp[2].length==3)
                        year="2";
                        else year="200";

                    $(e.delegateTarget).datepicker("setDate", new Date(temp[1]+'-'+temp[0]+'-'+year+temp[2]));
                    e.delegateTarget.firstElementChild.value=temp[0]+'-'+temp[1]+'-'+year+temp[2];
                   }
          });