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

Posted 2023-05-07

【中文标题】使用 jquery datepicker 时，处理人们以不同格式输入日期的正确方法是啥？

【英文标题】：When using jquery datepicker, what is the correct way to handle people typing in dates in different formats?使用 jquery datepicker 时，处理人们以不同格式输入日期的正确方法是什么？

【发布时间】：2016-06-03 19:01:51

【问题描述】：

我有以下代码：

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

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

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

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

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

【问题讨论】：

***.com/questions/4347483/…。第二个答案是允许多种格式的实现，希望对您有所帮助

在实施/UX 方面，我认为将您想要的格式放在输入周围是最简单的。 (MM/DD/YYYY)。然后在输入与格式不匹配时显示验证错误。这比尝试解析多种格式要容易得多，并且仍然允许用户输入而不是选择菜单。

@Eric Guan - 你能举例说明你的意思吗

ux.stackexchange.com/questions/1232/…

【参考方案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>

希望对你有所帮助。

【讨论】：

答案中的文字太多，隐藏了解决方案。但它实际上是一个很好的解决方案，关键是new Date($('#MilestoneStartDate').val()) - 它实际上试图“猜测”格式，因此“2016 年 3 月 2 日”、“2016 年 3 月 2 日”或“2016 年 3 月 2 日”之类的内容将被正确解析。

【参考方案2】：

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

长答案：

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

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

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

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

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

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

【参考方案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 验证将是一种选择等，但最终，要求用户根据给定模式输入有效日期会更好而不是试图处理各种日期格式。

【参考方案4】：

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

【参考方案5】：

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

【参考方案6】：

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

【参考方案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];
                   
          );