Question

jquery-ui datepicker 设置开始结束时间选择范围

选了开始时间，结束时间可选范围为开始时间到今天
选了结束时间，开始时间可选范围为结束时间之前的范围

Answer 1

jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)

使用jQuery ui首先需要引入jQuery类库，jQuery ui js脚本和jQuery ui css样式表

1、同时获得两个文本框对象，并将其转换为datepicker（利用jQuery的选择器）

HTML代码：

开始日期：<input type="text" id="start">

结束日期：<input type="text" id="end">

Js代码：

2、同样在选择日期后，触发onSelect事件，调用函数传递selectedDate参数，

函数体中首先判断触发事件的是开始日期还是结束日期，通过该判断来指定设置minDate或者是maxDate，然后利用not()函数，来反向选择另一个datepicker对象，并设置其对应的属性。

Js代码：

这样在设置一方后，另一方就会被限制

• 效果如图：

  
  

  
  

Answer 2

$("#permitDateAd").datepicker({
showOn: "both",
buttonImage: "../../images/jquery/jquery-ui-datepicker-buttonimage.png",
buttonImageOnly: true,
changeYear: true,
changeMonth: true,
beforeShow: function(selectedDate) {
var option = this.id=='permitDateAd'?'maxDate':'minDate';
var inst = this.id=='permitDateAd'?$('#permitValidDateAd'):$('#permitDateAd');
var date = inst.datepicker( "getDate" );
$(this).datepicker('option', option, date );
},
onClose: function(selectedDate){
try{
var datestr = $(this).val();
$('#japaneseCalHidden').attr("value",datestr);
if(datestr.match(/^\d{4}\/\d{1,2}\/\d{2}$/)){
var japDatestr = getJapaneseCal(datestr);
$('#japaneseCal').html("<span>(和暦： </span>"+japDatestr+"<span>)</span>");
//时间
var date = new Date($("#permitDateAd").val());
var year = date.getFullYear() + 5;
var month = date.getMonth() + 1;
var day = date.getDate() - 1;
if(month == 1 && day == 0) {
year = year - 1;
month = 12;
day = 31;
} else if (month != 1 && day == 0) {
var str1 = year + "/" + month + "/" + 1;
var time1 = new Date(str1);
month = month - 1;
var str2 = year + "/" + month + "/" + 1;
var time2 = new Date(str2);
var seconds = time2.getTime() - time1.getTime();
day = Math.floor(seconds / (1000 * 60 * 60 * 24));
day = -day;
}
if(month < 10) {
month = "0" + month;
}
if(day < 10) {
day = "0" + day;
}
var times = year + "/" + month + "/" + day;
$("#permitValidDateAd").val(times);
var japDatestrs = getJapaneseCal(times);
var frontst1 = japDatestrs.indexOf(" ") + 2;
var backst1 = japDatestrs.indexOf(")");
var calst1 = japDatestrs.substring(frontst1,backst1);
$('#japaneseValidCalHidden').attr("value",japDatestrs);
$('#japaneseValidCal').html("<span>(和暦： </span>"+japDatestrs+"<span>)</span>");
//时间
var frontst = japDatestr.indexOf(" ") + 2;
var backst = japDatestr.indexOf(")");
var calst = japDatestr.substring(frontst,backst);
$('#japaneseCalHidden').attr("value",japDatestr);

}else{
$('#japaneseCal').html("");
}
}catch(e){
$(this).val("");
}
}
});

$("#permitValidDateAd").datepicker({
showOn: "both",
buttonImage: "../../images/jquery/jquery-ui-datepicker-buttonimage.png",
buttonImageOnly: true,
changeYear: true,
changeMonth: true,
beforeShow: function(selectedDate) {
var option = this.id=='permitDateAd'?'maxDate':'minDate';
var inst = this.id=='permitDateAd'?$('#permitValidDateAd'):$('#permitDateAd');
var date = inst.datepicker( "getDate" );
$(this).datepicker('option', option, date );
},
onClose: function(selectedDate){
try{
var datestr = $(this).val();
$('#japaneseValidCalHidden').val(datestr);
if(datestr.match(/^\d{4}\/\d{1,2}\/\d{2}$/)){
var japDatestr = getJapaneseCal(datestr);
$('#japaneseValidCal').html("<span>(和暦： </span>"+japDatestr+"<span>)</span>");

var frontend = japDatestr.indexOf(" ") + 2;
var backend = japDatestr.indexOf(")");
var calend = japDatestr.substring(frontend,backend);
$('#japaneseValidCalHidden').val(japDatestr);
}else{
$('#japaneseValidCal').html("");
}
}catch(e){
$(this).val("");
}
}
});

我这个跟你说的差不多，不过选了开始时间结束时间自动加五年添加上去了。你可以看看参考一下

Answer 3

这个只需设置minDate 和maxDate 就行了吧