jQuery UI datepicker：您可以格式化日期并允许多个分隔符吗？

Question

我更喜欢使用此选项格式化我的日期选择器

{dateFormat: 'mm-dd-yy'}

例如：06-16-2010

但是，如果他们愿意，我希望允许人们输入斜杠作为分隔符而不是破折号。

有没有办法设置日期选择器，使其默认为 mm-dd-yy 但不会阻止某人输入 mm/dd/yy？

我知道我可以设置 {constrainInput:false} 虽然人们可以输入字母:(

感谢您的帮助。

Answer 1

当然。如果关闭约束输入，您可以在字段中输入任何内容。

$( "#myDateInput" ).datepicker({ 
  dateFormat: 'mm-dd-yy',
  constrainInput: false
});

完整文档：http://api.jqueryui.com/datepicker/#option-constrainInput

Answer 2

日期选择器具有 altField 和 altFormat 选项，因此您可以显示一种格式但发送另一种格式，但这不是您想要的。

我建议您使用 datejs (http://www.datejs.com/) 来解析用户输入并更新链接到您的日期选择器的隐藏文本框。

Answer 3

约束输入可以解决问题。我正在尝试做类似的事情，并且我将更改绑定到做一些额外的事情。您可以使用任何分隔符。 / - 。 ，空格等。它将任何非数字转换为/。如果您输入 m/d 或 m/d/，它将使用任何分隔符添加当前年份。如果您执行 T 或 t，它将返回当前日期。你可以做 T10 或 T+10，它会在今天加上 10 天返回。您可以执行 t-10，它将在 10 天前返回。您可以更改具有“mm-dd-y”的 2 个位置以使用所需的格式。除了自动添加日期外，此解决方案应该适用于国际格式，但我没有对此进行测试。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
   $( "#STARTDATE" ).datepicker({
      numberOfMonths: 4,
      showButtonPanel: true,
      constrainInput: false,
	  dateFormat: "mm-dd-y"
    });
	$( "#STARTDATE" ).change(function() {
	  if ($("#STARTDATE").val().toUpperCase().indexOf("T") >= 0) {
       Days = parseInt("0" + $("#STARTDATE").val().replace(/\D/g,''));
       if ($("#STARTDATE").val().indexOf('-') >= 0){Days*=-1}
       var tdate = new Date();
       tdate.setDate(tdate.getDate() + Days);
	  } else {
       var tdate = $("#STARTDATE").val().replace(/[^0-9]+/g, '/');
	   var tvar = tdate.split("/");
	   if (tvar.length == 3){
	    if (tvar[2] == "") {tdate += new Date().getFullYear().toString().substr(-2)}
	   }
	   if (tvar.length == 2){tdate += "/" + new Date().getFullYear().toString().substr(-2)}
       try {
 	    tdate = $.datepicker.parseDate('mm/dd/y', tdate);
	   } catch (Error) {
        try {
 	     tdate = $.datepicker.parseDate('mm/dd/yy', tdate);
  	    } catch (Error) {
        }
       }
	  }
	  tdate = $.datepicker.formatDate( "mm-dd-y", new Date( tdate ) );
	  $( "#STARTDATE" ).val(tdate);
    });
 });
</script>