今天需要实现一个需求,页面上预约时间需要选择三个日期, 由于系统用的是my97时间插件, 经过my97官网查看后,
发现my97不支持一次选择多个日期。经过网上一番查找没有类似的实现。 最后还是决定在my97的基础上,自己来实现这个功能(考虑保持系统统一,暂不引入其他的时间插件,其他的插件可能实现这个功能,没有来得及调研)。平时很少写博客,今天也分享一下自己的,希望能帮助到你, 废话少说,见代码如下:
1 : 实现后的效果图如下:
2: 具体代码:
a :页面元素代码:
<label class="Label w124l34 fs_14">预约时间:</label>
<input id="yyTime" style="vertical-align:middle;width:256px" readonly="readonly" type="text" class="Input w218l38" />
<input id="yyTime2" type="hidden" />
<img id="my97DateIcon" src="${ctx}/static/js/My97DatePicker/skin/datePicker.gif" style="vertical-align:middle; cursor:pointer" align="AbsMiddle" />
b: js中 添加代码
var selectDays = new Array() ;
$("#my97DateIcon").click(function(){
if(selectDays.length >= 3){
alert("最多选择3个日期");
return;
}
WdatePicker({
el:'yyTime2',
onpicked:function(){
if(!!!$("#yyTime").val()){
$("#yyTime").val(this.value) ;
}else{
$("#yyTime").val( $("#yyTime").val()+","+this.value ) ;
}
selectDays.push(this.value);
},
dateFmt:'yyyy-MM-dd',
minDate:'%y-%M-{%d+1}',
disabledDates: selectDays
});
});
ok, 只需要上步,就可以实现功能。