easyUI——datebox验证和自定义取消按钮

本文详细介绍了如何在日期选择器中实现验证结束时间大于开始时间的功能,并提供了自定义清除按钮的代码实现,以提升用户体验。通过扩展jQuery易用UI库的功能,开发者可以轻松实现日期选择器的高级定制。

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

来源:http://blog.youkuaiyun.com/liusong0605/article/details/42270463

1. datebox验证

       验证结束时间<起始时间:
       
[html]  view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. 起始时间:<input id="startDate" name="startDate" class="easyui-datebox"  >  
  2. 结束时间:<input id="endDate" name="endDate" class="easyui-datebox "  validType="dateValid['#startDate']">  
[javascript]  view plaincopy在CODE上查看代码片派生到我的代码片
 
  1. $.extend($.fn.validatebox.defaults.rules,{  
  2.     dateValid : {  
  3.         validator : function(value,param) { //参数value为当前文本框的值,也就是endDate  
  4.             startTime = $(param[0]).datetimebox('getValue');//获取起始时间的值  
  5.             var start = $.fn.datebox.defaults.parser(startTime);  
  6.             var end = $.fn.datebox.defaults.parser(value);  
  7.             varify = end > start;  
  8.             return varify;  
  9.         },  
  10.         message : '结束时间要大于开始时间!'  
  11.     }  
  12. });  

2. 自定义清除按钮

      datebox默认设置了currentText、closeText、okText。操作页面时,如果要清空输入的时间,可以使时间文本框获得焦点直接删除里面的内容。更好的用户体验是在下拉的panel中增加一个清空按钮。
     
      扩展这个功能,我们就在jquery.eaysui.min.js源码中找到currentText、closeText、okText的定义及事件,然后,加上清空按钮的定义及事件即可。添加的代码如下:
      
最后,easyui-lang-zh_CN.js中也加入清除按钮,否则,清除按钮是英文显示。

转载于:https://www.cnblogs.com/imsoft/p/5041789.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值