Jquery 日期选择器 - 防止 select 在不可用日期范围内
Jquery Datepicker - prevent select in range unavailable dates
我有 2 个日期选择器(从日期,到日期)或者某人到达我的酒店和他离开的时间。我想要实现的是不让用户 select 包含不可用日期的范围。
例如:
今天是13.02.2015,一个人想预定15.02.2015 到23.02.2015 但是19-02-2015, 20-02-2015 已经预定了。所以我想禁用从 19.02.2015 开始的所有字段,这意味着他只能从 15.02.2015 到 18.02.2015 select。这取决于他选择的日期,他只能预订到第一个不可用的日期,而不是之后的日期。
我怎样才能做到这一点?
这是我的html代码:
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
这是javascript代码
var unavailableDates = ["19-2-2015", "20-2-2015", "23-2-2015", "24-2-2015"]
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
给你...
我创建了一个将字符串转换为日期的函数
function compareDate(str1, sep){
var dt1 = parseInt(str1.split(sep)[0], 10);
var mon1 = parseInt(str1.split(sep)[1], 10);
var yr1 = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}
接下来我创建了一个函数,它可以智能地为 #to
提供 maxDate。
function setMaxDate()
{
var date = $("#from").val();
for(var i=0; i<unavailableDates.length; i++)
{
if(compareDate(date, "/")<compareDate(unavailableDates[i], "-"))
return compareDate(unavailableDates[i], "-");
}
return null;
}
并在 datepicker init 中做一些修改
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
$( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
maxDate: setMaxDate(), // Added This
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
它起作用了..这是起作用的jsFiddle
我有 2 个日期选择器(从日期,到日期)或者某人到达我的酒店和他离开的时间。我想要实现的是不让用户 select 包含不可用日期的范围。
例如:
今天是13.02.2015,一个人想预定15.02.2015 到23.02.2015 但是19-02-2015, 20-02-2015 已经预定了。所以我想禁用从 19.02.2015 开始的所有字段,这意味着他只能从 15.02.2015 到 18.02.2015 select。这取决于他选择的日期,他只能预订到第一个不可用的日期,而不是之后的日期。
我怎样才能做到这一点?
这是我的html代码:
<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">
这是javascript代码
var unavailableDates = ["19-2-2015", "20-2-2015", "23-2-2015", "24-2-2015"]
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
给你...
我创建了一个将字符串转换为日期的函数
function compareDate(str1, sep){
var dt1 = parseInt(str1.split(sep)[0], 10);
var mon1 = parseInt(str1.split(sep)[1], 10);
var yr1 = parseInt(str1.split(sep)[2], 10);
var date1 = new Date(yr1, mon1-1, dt1);
return date1;
}
接下来我创建了一个函数,它可以智能地为 #to
提供 maxDate。
function setMaxDate()
{
var date = $("#from").val();
for(var i=0; i<unavailableDates.length; i++)
{
if(compareDate(date, "/")<compareDate(unavailableDates[i], "-"))
return compareDate(unavailableDates[i], "-");
}
return null;
}
并在 datepicker init 中做一些修改
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
$( "#to" ).datepicker( "option", "maxDate", setMaxDate() ); // Added This
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
beforeShowDay: unavailable,
numberOfMonths: 1,
dateFormat: 'dd/mm/yy',
maxDate: setMaxDate(), // Added This
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
它起作用了..这是起作用的jsFiddle