jQuery UI DatePicker - return 错误的日期格式

Question

我有一个看起来像这样的日期选择器https://jsfiddle.net/crmu20ag/4/

默认情况下，它以 dd.mm.yy

格式显示当前日期

但是，在 select 日期之后，格式变为 mm.dd.yy

例如，今天是 6.6.2020，我将 select 日期为 6.10.2020，月份将从 6 月更改为 10 月。

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

$("#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">

Answer 1

问题在于 var from = new Date(date_text); 它使用 date_text 创建了一个新日期，该日期采用 "dd.mm.yy" 的 unexpected/unsupported 格式。 read more here

解决方案 #1

像这样手动创建正确的日期字符串：

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"，这是 Date 构造函数可接受的字符串

这将适用于您的日期格式="dd.mm.yy"

解决方案 #2（推荐）：

var from = $('#datepicker').datepicker('getDate');

无论日期格式如何，这将始终有效

$("#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>

回答你关于最短日期的第二个问题，这是你的代码设计的..它将最短日期设置为在下一行中选择的日期

$("#datepicker").datepicker("option", "minDate", from);

您可以删除 tat 线或将最短日期重置为您喜欢的任何日期...例如：

$("#datepicker").datepicker("option", "minDate", 0);

jQuery UI DatePicker - return 错误的日期格式

jQuery UI DatePicker - return wrong Date Format

javascript

jquery

jquery-ui-datepicker

解决方案 #1

示例：

解决方案 #2（推荐）：