我有一个类似于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
问题出在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>