昨天我已经问了一个关于datepicker的问题,但现在我遇到了一个我自己无法解决的新问题。我正在使用JQuery Datepicker创建一个日历,我可以选择日期范围。当我尝试将dateformat从默认值(mm/dd/yy
)更改为dd.mm.yy
时,它会失败并出现错误,并在我尝试选择任何日期时停止工作。另外,使用默认的dateformat不能使我的代码在加载时具有默认的选定日期。
这是我的代码,带有当前的datepicker设置(可以选择日期范围并使用其他类设置样式,还可以将从和到的日期放入隐藏的输入中和可见的div's),完整的样式在截图上看起来像:
datepicker范围工作:
希望你能帮我解决这个问题!
// This code doesn't work with default dateformat
// start date on default
//$('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
//$('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
// end date on default
//$('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));
//\$('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));
// jquery datepicker settings
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: false,
minDate: 0,
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
if (date1 && date && (date1.getTime() == date.getTime())) {
return [true, 'ui-red-start', ''];
}
if (date2 && date && (date2.getTime() == date.getTime())) {
return [true, 'ui-red-end', ''];
}
if (date >= date1 && date <= date2) {
return [true, 'ui-state-selected-range', ''];
}
return [true, '', ''];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#start-date').val());
var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $('#end-date').val());
if (!date1 || date2) {
$('#start-date').val(dateText);
$('.start-date-visible').text(dateText);
$('#end-date').val('');
$('.end-date-visible').text('');
$(this).datepicker('option', dateText);
} else {
if (new Date(dateText) < date1) {
var sDate = $('#start-date').val();
$('.start-date-visible').text(dateText);
$('#start-date').val(dateText);
$(this).datepicker('option', null);
$('.end-date-visible').text(sDate);
$('#end-date').val(sDate);
} else {
$('.end-date-visible').text(dateText);
$('#end-date').val(dateText);
$(this).datepicker('option', null);
}
}
}
});
});
td.ui-state-selected-range:first-child a {
border-radius: 20px 0 0 20px;
}
td.ui-state-selected-range:last-child a {
border-radius: 0 20px 20px 0;
}
.ui-red-start a {
position: relative;
background-color: #F29676;
border-radius: 20px;
border: 1px solid #f29676 !important;
}
.ui-red-start a:before {
content: '';
right: -1px;
left: 50%;
top: -1px;
bottom: -1px;
position: absolute;
border: 1px solid #f29676;
border-right: none;
background-color: #f8c3b1;
z-index: -1;
}
.ui-red-end a {
position: relative;
background-color: #F29676;
border-radius: 20px;
border: 1px solid #f29676 !important;
}
.ui-red-end a:before {
content: '';
left: -1px;
right: 50%;
top: -1px;
bottom: -1px;
position: absolute;
border: 1px solid #f29676;
border-left: none;
background-color: #f8c3b1;
z-index: -1;
}
.ui-state-selected-range .ui-state-default {
border: 1px solid #f29676 !important;
border-left: none !important;
border-right: none !important;
background: #f8c3b1 !important;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type="text" id="start-date" style="visibility:hidden">
<input type="text" id="end-date" style="visibility:hidden">
<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>
答案 0 :(得分:1)
// This code doesn't work with default dateformat
// start date on default
//$('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
//$('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
// end date on default
//$('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));
//\$('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() + 6 * 24 * 60 * 60 * 1000)));
// jquery datepicker settings
$(function() {
$("#datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: false,
minDate: 0,
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var date1 = $.datepicker.parseDate("dd/mm/yy", $('#start-date').val());
var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());
// var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());
if (date1 && date && (date1.getTime() == date.getTime())) {
return [true, 'ui-red-start', ''];
}
if (date2 && date && (date2.getTime() == date.getTime())) {
return [true, 'ui-red-end', ''];
}
//change here for selection
if(date1 && date2 && date1-date2){
if (date2<=date && date<=date1) {
return [true, 'ui-state-selected-range', ''];
}
}
else if(date1 && date2 && date2-date1){
if (date2<=date && date<=date1) {
return [true, 'ui-state-selected-range', ''];
}
}
if (date1<=date && date<=date2) {
return [true, 'ui-state-selected-range', ''];
}
return [true, '', ''];
},
onSelect: function(dateText, inst) {
var date1 = $.datepicker.parseDate("dd/mm/yy", $('#start-date').val());
var date2 = $.datepicker.parseDate("dd/mm/yy", $('#end-date').val());
if (!date1 || date2) {
$('#start-date').val(dateText);
$('.start-date-visible').text(dateText);
$('#end-date').val('');
$('.end-date-visible').text('');
$(this).datepicker('option', dateText);
} else {
if (new Date(dateText) < date1) {
var sDate = $('#start-date').val();
$('.start-date-visible').text(dateText);
$('#start-date').val(dateText);
$(this).datepicker('option', null);
$('.end-date-visible').text(sDate);
$('#end-date').val(sDate);
} else {
$('.end-date-visible').text(dateText);
$('#end-date').val(dateText);
$(this).datepicker('option', null);
}
}
}
});
});
&#13;
td.ui-state-selected-range:first-child a {
border-radius: 20px 0 0 20px;
}
td.ui-state-selected-range:last-child a {
border-radius: 0 20px 20px 0;
}
.ui-red-start a {
position: relative;
background-color: #F29676;
border-radius: 20px;
border: 1px solid #f29676 !important;
}
.ui-red-start a:before {
content: '';
right: -1px;
left: 50%;
top: -1px;
bottom: -1px;
position: absolute;
border: 1px solid #f29676;
border-right: none;
background-color: #f8c3b1;
z-index: -1;
}
.ui-red-end a {
position: relative;
background-color: #F29676;
border-radius: 20px;
border: 1px solid #f29676 !important;
}
.ui-red-end a:before {
content: '';
left: -1px;
right: 50%;
top: -1px;
bottom: -1px;
position: absolute;
border: 1px solid #f29676;
border-left: none;
background-color: #f8c3b1;
z-index: -1;
}
.ui-state-selected-range .ui-state-default {
border: 1px solid #f29676 !important;
border-left: none !important;
border-right: none !important;
background: #f8c3b1 !important;
box-sizing: border-box;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<input type="text" id="start-date" style="visibility:hidden">
<input type="text" id="end-date" style="visibility:hidden">
<div class="start-date-visible"></div>
<div class="end-date-visible"></div>
<div id="datepicker"></div>
&#13;
使用dateFormat: 'dd/mm/yy',
并在解析日期时使用相同的格式来解析它。