jQuery UI DatePicker - 返回錯誤的日期格式

Question

我有一個日期選擇器，看起來像這樣https://jsfiddle.net/crmu20ag/4/

默認情況下，它以 dd.mm.yy 格式顯示當前日期

但是，選擇日期后，格式更改為 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); 它使用“dd.mm.yy”的意外/不受支持格式的 date_text 創建一個新日期。 在這里閱讀更多

解決方案#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 構造函數可接受的字符串

這將適用於 dateformat="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);