当使用jQuery日期选择器,什么是处理人们在不同的日期格式键入正确的方法是什么?

问题描述 投票:11回答:7

我有以下代码:

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

如果您使用鼠标,在弹出的点击日期输入一个日期这一切工作正常,但如果一个人类型的日期或粘贴在日期到文本框格式不同比上面(如“1 /二千〇一十六分之一“ ),当我有这样的代码:

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

STARTDATE可变显示为当前的日期(即使明显2016年1月1日不是当前日期)

什么是处理这些情况的最好方法是什么?我应该阻止人们打字和日期粘贴或者是有没有办法做一个格式转换?

jquery datepicker jquery-ui-datepicker date-format date-formatting
7个回答
5
投票

日期选择器的getDate方法返回一个日期类型,而不是一个字符串。

你需要返回值格式化为使用日期格式的字符串。使用日期选择器的功能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

铝车道@鲍里斯Serebrov评论

关键是新的日期($(“#MilestoneStartDate”)VAL()) - 它实际上是尝试“猜测”的格式,所以像“2016年3月2日”,“2016年3月2日”或“2016年3月2日”将被正确解析。

一步步:

情况1:

这里strSelectedDate给你标准的日期格式可以说,如果我从日期选择02 Mar 2016弹出它给

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

现在

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

给你喜欢的格式波纹管的日期

2016年3月2日

案例:2

当你在你的问题提的,如果用户手动输入日期像2016年1月1日strSelectedDate给你标准的日期像波纹管

去自由00:00:00 GMT 0530 16 01拖车

然后

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

给你格式化的日期

2016年1月1日

这是预期的正确日期。

案例3:

现在,如果用户手动写一些无效的日期一样112016然后strSelectedDate返回Invalid Date所以在这里,你可以执行一些客户端验证用户输入正确的日期。

希望这可以帮助你。


1
投票

答案很简单:让用户修理她的错误(可以允许粘贴,这不是一个问题)。只要坚持一个简单的验证机制。

长一点的回答:

我相信你应该允许用户粘贴文本,但它是没有意义的验证表单,直到所有的控制是有效的。

因此,如果用户在你的日期控制粘贴错误的日期,那么当她点击提交按钮,您的用户界面应该显示一个错误消息说是这样的:“日期没有正确格式的正确格式为dd中号YY ”。

要知道,用户可以真正贴任何东西,甚至像“izeoif ZOI”的字符串;所以,你需要验证反正。

当用户是罪魁祸首,她应该可以解决她的错误(我相信)。

这是很常见告诉控制是错误的用户:比如我想你知道,错误信息:“这个名字是必需的”。这就是在这里同样的想法。

作为@Eric关中指出,你可以使用提示,以帮助用户获得您的日期格式的想法摆在首位(之前她种/粘贴任何东西)。


1
投票

做正确的事,会告诉预计什么日期格式的用户将是有效的输入。

这被认为是良好的UX,并因此通常使用的大多数用户期望的那样。

此外,你不可能解析输入的各种日期,例如一些国家使用MM/DD/YYYY而其他人使用DD/MM/YYYY,谁是说,如果01/07/2015是一月或7月1日的第七,但只是没有办法告诉不知道格式。

当你正在使用jQuery用户界面,这里有一个快速的方法来验证使用内置的工具提示插件的日期选择器

$('#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验证是一个选项等,但在这一天结束时,要求用户根据给定的模式输入一个有效的日期,是更好不是试图应付各种日期格式。


0
投票

您可以从人禁用文本框编辑,并把它旁边的图标。人们需要点击图标,输入日期。所以这里复制粘贴不会工作。


0
投票

验证是一个好主意。你也可以写自己的插件来更改日期格式或者看看这个:https://plugins.jquery.com/formatDateTime/


0
投票

这是更好地防止用户输入或粘贴日期。与readonly='readonly'让你日期文本框只读


0
投票

您可以更改用户的日期为有效日期,当用户键入结束之日起, 该功能将支持所有格式:

  • d-M-YY或d-M-YYYY
  • d / M /日或d /米/ yyyy的
  • d.m.yy或D.M.YYYY

将displayey作为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];
                   }
          });
© www.soinside.com 2019 - 2024. All rights reserved.