EasyUI篇の日期控件(easyui-datebox)

目的:日期后者不得小于前者,对日期控件进行控制

例子:

1 <input id="benTime"  name="benTime"  class="easyui-datebox" data-options="prompt:‘请选择开工日期‘,editable:false,required:‘true‘,onSelect:onSelect">
2 <input id="endTime"  name="endTime"  class="easyui-datebox" data-options="prompt:‘请选择完工日期‘,editable:false,required:‘true‘,disabled:true,validType:‘equaldDate[\‘#benTime\‘]‘">
 1 <script type="text/javascript">
 2     function onSelect(date) {  //开始日期选择时触发
 3         $(‘#endTime‘).datebox(‘enable‘);    //启用结束日期控件
 4         $(‘#endTime‘).datebox(‘reset‘)      //重置结束日期的值
 5     };
 6     $.extend($.fn.validatebox.defaults.rules, {
 7         equaldDate: {
 8             validator: function (value, param) {
 9                 var d1 = $(param[0]).datetimebox(‘getValue‘);  //获取开始时间
10                 return value >= d1;  //有效范围为大于开始时间的日期
11             },
12             message: ‘完工日期不能早于开工日期!‘
13         }
14     })
15 </script>

效果:

时间: 2024-10-12 08:48:10

EasyUI篇の日期控件(easyui-datebox)的相关文章

Easyui 的日期控件单击文本框显示日历

注意:可 用 ctrl+f 搜索 "_outerWidth():0" 1. jQuery.easyui.min.js1.3.2 版本   function _745(_746,_747){var opts=$.data(_746,"combo").options;var _748=$.data(_746,"combo").combo;var _749=$.data(_746,"combo").panel;if(_747){op

easyui 日期控件清空值

最近用了Easyui的日期控件datebox,项目中要将选中值清空,于是就研究了一下. 1,调用方法清空 [javascript] view plain copy print? $('#yourId').combo('setText',''); 2,更改js文件 从官网下载的源文件中,datebox控件界面只有‘Today’,‘Close’事件,我们可以把清空选项值的事件添加到js中去,这样,只要引用了datebox这个控件,界面上就会有清空选项.具体修改步骤如下: 首先在官网上下载jquery

easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正常的“2012-11-10 12:18:00”这样的格式,json序列化后返回到前台页面就被转换成一个像 /Date(1419264000000)/的格式,导致easyUI无法解析这个字段.经过一番研究,下面给出两种解决方式 希望能帮到大家! 第一种:比较简单 定义函数:function forma

为jEasyUi的日期控件添加一个“清空”按钮----通过修改1.4的easyui.min.js

为 jQuery EasyUI 1.4 的datebox或datetimebox添加一个清空按钮 使用场景:为用户指定了日期的格式,且日期可以为空 修改语言包easyui-lang-zh_CN.js 在if ($.fn.datebox){ 的下一行添加 (41或42行) $.fn.datebox.defaults.cleanText = '清空'; 在if ($.fn.datetimebox && $.fn.datebox){  $.extend($.fn.datetimebox.defa

easyUI的列表控件(datagrid)日期列不能正确显示的解决方法

        一.遇见的问题 EasyUI是一套比较轻巧易用的Jquery控件,在EasyUI中,我认为,他的表格 , 做的堪称完美.但是,美中不足的是,在使用过程中遇到一个问题,它的列表控件--datagrid,在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的一个日期字段,在后台还是正常的"2012-11-10 12:18:00"这样的格式,到了前台页面就被转换成一个像 /Date(1242357713797+0800)/ 这样的格式.         二.解决

基于MVC+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

mvc日期控件datepick的几篇文章,日后再总结吧

instinctcoder里有两篇,入门级的 http://instinctcoder.com/asp-net-mvc-4-jquery-datepicker/ http://instinctcoder.com/asp-net-mvc-4-jquery-datepicker-date-format-validation/ @Html.TextBoxFor(m=>m.UserName) 生成html时,input控件type="text", id和name属性都被赋值为"

Jquery easyui的validatebox控件和正则表达式

Validatebox是EasyUI的验证控件,它支持很多验证,比如说是否是email.是否是url等,保证我们输入的数据在进行处理前能够确保其完整性和正确性.验证可以实现在数据层和业务规则层,但应当在表现层进行前端的"保护",因此,我们通常在UI层为用户提供友好的.可以交互的验证体验,避免在应用程序中进行不必要的网络间的往返验证.在前期ASP.NET中,我们接触了六种验证控件,根据这六种验证控件,几乎能够实现所有的验证.那现在说的Validatebox是怎么实现验证的呢? 仔细观察j