my97时间控件 选择多个日期

本文介绍如何在my97日期插件基础上扩展功能,实现一次选择多个日期的需求。通过JavaScript代码实现,适用于需要统一使用my97插件而不引入其他插件的情况。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天需要实现一个需求,页面上预约时间需要选择三个日期, 由于系统用的是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, 只需要上步,就可以实现功能。               

 

 


 

 

功能相当强大 更人性化,更全面的功能 大部分日期控件都具备功能如:带时间显示,支持周显示,自定义格式,自动纠错,智能纠错,起始日期,操作按钮自定义,快速选择日期,支持多种调用模式等,My97DatePicker在这些方面做得更全面,更人性化,并且速度一流. 2.强大的日期范围限制功能 支持静态限制,动态限制,脚本自定义限制,以及无效天和无效日期功能,利用这样功能你可以任意定制不能选择日期,这些日期即使毫无规律,毫无连续性,你也可以通过这些功能的组合使用轻松搞定. 3.自定义事件和丰富的API库 如果你需要做一些附加的操作,你也不必担心,日期控件自带的自定义事件可以满足你的需求.此外,你还可以在自定义事件中调用提供的API库来做更多的运算和扩展,绝对可以通过很少的代 码满足你及其个性化的需求. 4.多语言支持和自定义皮肤支持 通过lang属性,可以为每个日期控件单独配置语言,当然也可以通过WdatePicker.js配置全局的语言,皮肤也是一样,只要配置skin属性即可.这样一个页面中可以显示多种语言,多种皮肤的日期控件,更棒的是,他们之间的切换是无刷新的. 5.跨无限级框架显示和自动选择显示位置 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,My97日期控件是可以跨无限级框架显示的,并且当控件处在页面边界是,它会自动选择显示的位置.此外你还可以使用position参数对弹出位置做调整.
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值