easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码

一、Html代码

注意的是需要加上data-options="editable:false",不能直接修改日期

<tr>
 <td width="15%" class="label">合同起始日期:</td>
 <td width="35%">
 <input value="${loan.contractBegtime}" class="f1 easyui-datebox" id="contractBegtime" name="contractBegtime" data-options="required:true,editable:false"/>
 <font class="star-red">*</font>
 </td>
<td width="15%" class="label">合同截止日期:</td>
<td width="35%">
 <input value="${loan.contractEndtime}" class="f1 easyui-datebox" id="contractEndtime" name="contractEndtime" data-options="required:true,editable:false"/>
 <font class="star-red">*</font>
 </td>
</tr> 

二、js代码限制

$("#contractBegtime").datebox({
 onSelect : function(beginDate){
  $('#contractEndtime').datebox().datebox('calendar').calendar({
   validator: function(date){
    return beginDate<date;//<=
   }
  });
 }
}); 

增加限制后,选择起始日期后,截止日期就必须比起始日期大,如果想截止日期也可以等于起始日期,

就使用<=。

再提醒:data-options="editable:false",不然截止日期可以修改成小于起始日期的时间

有其它要求的,可以查看官方文档:

http://www.jeasyui.net/demo/345.html

以上所述是小编给大家介绍的easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-01-09

jQuery插件EasyUI校验规则 validatebox验证框

Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validatebox 默认提供的校验规则比较

jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法

先给大家分享数据校验显示效果 Web前端数据校验组件 Web项目中客户端与服务端的交互离不开Form表单,Form表单中最常用的元素莫过于input标签,input标签首先要用的肯定是text文本框啦! input文本框允许用户任意输入,难免会会有用户输入一些不符合规定的数据,此时,在提交之前对数据校验是很有必要的,如果等到提交到服务端再校验就会大大降低用户体验啦. 前端校验有很多现成的组件,比较好用的有 EasyUI 的 validatebox 插件,提示界面做的相当友好,只是validate

浅谈jQuery.easyui的datebox格式化时间

方法很简单,这里就不多废话了,直接奉上代码: $.fn.datebox.defaults.formatter = function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); return y + '/' + (m < 10 ? ('0' + m) : m) + '/' + (d < 10 ? ('0' + d) : d); } 以上所述就是本文的全部内容了,

jQuery EasyUI API 中文文档 - ValidateBox验证框

用 $.fn.validatebox.defaults 重写了 defaults. 用法 复制代码 代码如下: <input id="vv" required="true" validType="email"> 复制代码 代码如下: $('#vv').validatebox({ required:true }); 验证规则 验证规则是通过使用 required 和 validType 特性来定义的, 这里是已经实施的规则: email

jQuery EasyUI API 中文文档 - DateBox日期框

扩展自 $.fn.combo.defaults.用 $.fn.datebox.defaults 重写了 defaults. 依赖 combo calendar 用法 复制代码 代码如下: <input id="dd" type="text"></input> 复制代码 代码如下: $('#dd').datebox({ required:true }); 特性 其特性扩展自 combo,下列是为 datebox 增加的特性. 名称 类型 说明

jQuery EasyUI API 中文文档 DateTimeBox日期时间框

扩展自 $.fn.datebox.defaults.用 $.fn.datetimebox.defaults 重写了 defaults. 依赖 datebox timespinner 用法 复制代码 代码如下: <input id="dt" type="text"></input> 复制代码 代码如下: $('#dt').datetimebox({ showSeconds:false }); 特性 其特性扩展自 datebox,下列是为 dat

jQuery EasyUI API 中文文档 - ComboBox组合框

扩展自 $.fn.combo.defaults. 用 $.fn.combobox.defaults 重写了 defaults. 依赖 combo 用法 <select id="cc" name="dept" style="width:200px;"> <option value="aa">aitem1</option> <option>bitem2</option>

jQuery EasyUI API 中文文档 - NumberBox数字框

扩展自 $.fn.validatebox.defaults,用 $.fn.numberbox.defaults 重写了 defaults . 依赖 validatebox 用法 复制代码 代码如下: <input type="text" id="nn"></input> 复制代码 代码如下: $('#nn').numberbox({ min:0, precision:2 }); 特性 其特性扩展自 validatebox,下列是为 numbe

jQuery EasyUI API 中文文档 - DataGrid数据表格

扩展自 $.fn.panel.defaults ,用 $.fn.datagrid.defaults 重写了 defaults . 依赖 panel resizable linkbutton pagination 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'

jQuery EasyUI API 中文文档 - Documentation 文档

每个easyui组件都有特性(property).方法(method)和事件(event),用户可以很容易地扩展它们. 特性 特性在jQuery.fn.{plugin}.defaults里定义.例如, dialog的特性在jQuery.fn.dialog.defaults里定义. 事件 事件(回调函数)也在jQuery.fn.{plugin}.defaults里定义. 方法 方法在jQuery.fn.{plugin}.methods里定义.每个方法有两个参数:jq和param.第一个参数'jq'

jQuery EasyUI API 中文文档 - Tree树使用介绍

用 $.fn.tree.defaults 重写了 defaults. 依赖 draggable droppable 用法 Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点.下面是一个示例: 复制代码 代码如下: <ul id="tt"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> &

jQuery EasyUI API 中文文档 - TreeGrid 树表格使用介绍

扩展自 $.fn.datagrid.defaults,用 $.fn.treegrid.defaults 重写了 defaults. 依赖 datagrid 用法 复制代码 代码如下: <table id="tt"></table> 复制代码 代码如下: $('#tt').treegrid({ url:'treegrid_data.json', treeField:'name', columns:[[ {title:'Task Name',field:'name'

jQuery EasyUI API 中文文档 - Calendar日历使用

用 $.fn.calendar.defaults 重写了 defaults. 用法 复制代码 代码如下: <div id="cc" style="width:180px;height:180px;"></div> 复制代码 代码如下: $('#cc').calendar({ width:600, height:600, current:new Date() }); 特性 名称 类型 说明 默认值 width number 日历组件的宽度. 1