jQuery UI DatePicker-返回错误的日期格式

Question

我有一个类似于https://jsfiddle.net/crmu20ag/4/的datepicker

默认情况下，它以DD.MM.YY格式显示当前日期

但是，选择日期后，格式更改为mm.dd.yy

例如，今天是6.6.2020年，我将选择日期6.10.2020年，月份将从6月变为10月。

我不知道我在哪里犯了错。

null

$("#datepicker").datepicker({
					dateFormat: "dd.mm.yy",
					minDate: 0,
					maxDate: "1years",
					changeMonth: true,
					changeYear: true,


					onSelect: function(date_text,inst)
					{
						var from = new Date(date_text);
						$( "#datepicker" ).datepicker( "option", "minDate",from);

/*
						$.ajax({
							type: "POST", 
							dataType: "json",
							url: {link do!},
							data: { color: $('#datepicker').val(), time: $('#time').val() },
							success:function(data) {

							},
						});
*/
					}


				}).datepicker("setDate", {$datum});

				// validate date
				$("#datepicker").datepicker();
				var previousDate;

				$("#datepicker").focus(function(){
					previousDate= $(this).val(); ;
				});
				$("#datepicker").blur(function(){
					var newDate = $(this).val();
					if (!moment(newDate, 'DD.MM.YYYY', true).isValid()){
						$(this).val(previousDate);
						console.log("Error");
					}
				});

				// disable manual beforeDay
				var dateToday = new Date();

				$("#datepicker").change(function () {

					var updatedDate = $(this).val();
					var instance = $(this).data("datepicker");
					var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

					if (date < dateToday) {
						$(this).datepicker("setDate", dateToday);
					}
				});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
        <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<input type="text" id="datepicker" class="form-control" autocomplete="off">

null

Answer 1

问题出在var from=new Date(date_text)；上，它使用date_text创建了一个新日期，该日期的格式为“dd.mm.yy”，这是意外的/不受支持的。 此处阅读更多信息

手动创建正确的日期字符串，如下所示:

var from = date_text.split(".");
var from_reformatted = from[1] + "-" + from[0] + "-" + from[2]
from = new Date(from_reformatted);

date_text=“dd.mm.yy”

from将是数组[“dd”，“mm”，“yy”]

from_reformatted将是“mm-dd-yy”，这是日期构造函数可以接受的字符串

这将适用于dateformat=“dd.mm.yy”的情况

var from=$('#datepicker').datepicker('get date')；

无论日期格式如何，这将始终工作

null

$("#datepicker").datepicker({
  dateFormat: "dd.mm.yy",
  minDate: 0,
  maxDate: "1years",
  changeMonth: true,
  changeYear: true,


  onSelect: function(date_text, inst) {
    //ISSUE HERE: from is parsed as MM-DD-YY while date_text is meant to be DD.MM.YY, so it mixes months and days
    //var from = new Date(date_text);
    var from = $('#datepicker').datepicker('getDate');
    $("#datepicker").datepicker("option", "minDate", from);

    /*
    $.ajax({
      type: "POST", 
      dataType: "json",
      url: {link do!},
      data: { color: $('#datepicker').val(), time: $('#time').val() },
      success:function(data) {

      },
    });
    */
  }


}).datepicker("setDate", {
  $datum
});

// validate date
$("#datepicker").datepicker();
var previousDate;

$("#datepicker").focus(function() {
  previousDate = $(this).val();;
});
$("#datepicker").blur(function() {
  var newDate = $(this).val();
  if (!moment(newDate, 'DD.MM.YYYY', true).isValid()) {
    $(this).val(previousDate);
    console.log("Error");
  }
});

// disable manual beforeDay
var dateToday = new Date();

$("#datepicker").change(function() {

  var updatedDate = $(this).val();
  var instance = $(this).data("datepicker");
  var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, updatedDate, instance.settings);

  if (date < dateToday) {
    $(this).datepicker("setDate", dateToday);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<input type="text" id="datepicker" class="form-control" autocomplete="off">

<button type="button" onclick='$( "#datepicker" ).datepicker( "option", "minDate",0);'>Reset Min Date</button>