Easyui datebox 限制时间选择范围
Require Date:
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectStartDate" style="width: 110px" id="StartTime">
To :
<input class="easyui-datebox" data-options="formatter:myformatter,parser:myparser,onSelect:selectEndDate" style="width: 110px" id="EndTime">
$(function () {
bindDateBlur($("#StartTime"));
bindDateBlur($("#EndTime"));
//控件的初始限制
$('#EndTime').datebox().datebox('calendar').calendar({
validator: function (endDate) {
return endDate <= new Date();
}
});
$('#StartTime').datebox().datebox('calendar').calendar({
validator: function (startDate) {
return startDate <= new Date();
}
});
})
//easyui官方重写时间格式的方法
function myformatter(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);
}
function myparser(s) {
if (!s) return new Date();
var ss = (s.split('-'));
var y = parseInt(ss[0], 10);
var m = parseInt(ss[1], 10);
var d = parseInt(ss[2], 10);
if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
return new Date(y, m - 1, d);
} else {
return new Date();
}
} //当选择开始日期时限定结束日期的范围
function selectStartDate(startDate) {
//返回calendar会清空EndTime内容,需要保存下
var tempEndDate = $('#EndTime').datebox('getValue')
$('#EndTime').datebox().datebox('calendar').calendar({
validator: function (endDate) {
//限定日期选择范围
return endDate >= startDate && endDate <= new Date();
}
});
//将EndTime写回去
$('#EndTime').datebox('setValue', tempEndDate);
}
//当选择结束日期时限定开始日期的范围
function selectEndDate(endDate) {
var tempStartDate = $('#StartTime').datebox('getValue');
$('#StartTime').datebox().datebox('calendar').calendar({
validator: function (startDate) {
return startDate <= endDate && startDate <= new Date();
}
});
$('#StartTime').datebox('setValue', tempStartDate);
}
//datebox的绑定事件
function bindDateBlur(st) { st.datebox('textbox').bind('blur', function () {
var s = st.textbox('getText');
if (!s) return new Date();
var nt = s.replace(/\//g, '-');
s = (nt.split('-'));
var a = parseInt(s[0], 10);
var b = parseInt(s[1], 10);
var c = parseInt(s[2], 10);
var date = new Date();
if (!isNaN(a) && !isNaN(b) && !isNaN(c)) {
st.datebox('setValue', nt);
} else if (!isNaN(a) && !isNaN(b)) {
var y = date.getFullYear();
st.datebox('setValue', y + '-' + a + '-' + b);
} else {
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
st.datebox('setValue', y + '-' + (m < 10 ? ('0' + m) : m) + '-' + (d < 10 ? ('0' + d) : d));
}
});
}
Easyui datebox 限制时间选择范围的更多相关文章
- easyui datebox 扩展清空按钮及日期判断
<input id="EndHavDate" class="easyui-datebox" data-options="prompt:'请选择结 ...
- easyui datebox 设置不可编辑
easyui datebox不允许编辑可以输入 editable="false"<input class="easyui-datebox" editabl ...
- jquery easyui datebox 时间控件默认显示当前日期的实现方法
jquery easyui datebox 时间控件默认显示当前日期的实现方法 直接class easyui-datebox后添加一个value="true"就可以
- datebox清除按钮,datebox加上清除按钮,easyui datebox加上清除按钮
datebox加上清除按钮,easyui datebox加上清除按钮 >>>>>>>>>>>>>>>>& ...
- 修改easyui datebox默认日期格式
问题描述: 根据jquery easyui datebox demo中给的示例,导入和使用datebox, 发现日期格式为: 6/22/2011, 其他的今天和关闭也是 Today, Close, 对 ...
- easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大 >>>>>>>>>>> ...
- easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用
easyui datebox定位到某一个日期, easyui datebox直接定位到具体的日期, easyui datebox MoveTo方法使用 >>>>>> ...
- Js:消息弹出框、获取时间区间、时间格式、easyui datebox 自定义校验、表单数据转化json、控制两个日期不能只填一个
(function ($) { $.messageBox = function (message) { $.messager.show({ title:'消息框提示', msg:message, sh ...
- easyui datebox时间控件如何只显示年月
easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...
随机推荐
- tensorflow资料补充(很棒)
http://tensorfly.cn/tfdoc/get_started/introduction.html https://github.com/CreatCodeBuild/TensorFlow ...
- js或者ext js获取返回值
由于前台业务需要在判断中发起ajax到后台,根据返回值校验是否通过 代码如下 关键点在于要将async关闭 设置成同步,这样才能接收到要返回的flag ...
- python 字符串技巧 from python cookbook
所有数据进入程序中都只是一串字节 英文字符占一个字节 汉语是两个字节 一字节byte=8bit Unicode字符串为每种语言的每种字符设定了统一并且唯一的二进制编码 big = r'This is ...
- Android Studio Eclipse Code Formatter
在从Eclipse转到Android Studio上开发后,如果还想继续使用在Eclipse上制定的自定义的Code Formatter的话,需要按如下步骤操作:1.进入Settings界面,如果能看 ...
- CoreData数据库
一 CoreData 了解 1 CoreData 数据持久化框架是 Cocoa API 的一部分,首先在iOSS5 版本的系统中出现: 它允许按照 实体-属性-值 模式组织数据: ...
- 第五篇T语言实例开发,数组空间使用
数组空间使用 排序算法 在实际中,当有多个无序数据时.我们就需要多数据进行排序 典型的排序:冒泡排序 排序原理 冒泡排序算法的运作如下:(从后往前) 比较相邻的元素.如果第一个比第二个大,就交换他们两 ...
- odoo server命令行以及配置文件
odoo server 启动时 def main(args): check_root_user() odoo.tools.config.parse_config(args) check_postgre ...
- 补交作业——Beta发布评论
1.飞天小女警: 礼物挑选这一项目是很好的点子,比较能够吸引客户,更加方便快捷的挑选也满足现代人在送礼物方面的需求.这一次的发布界面效果好了很多,并且成功的发布到了云服务器上. 2.nice! : 这 ...
- 简述 C、C++程序编译的内存分配情况【转】
面试题 9:简述 C.C++程序编译的内存分配情况 C.C++中内存分配方式可以分为三种: (1)从静态存储区域分配: 内存在程序编译时就已经分配好,这块内存在程序的整个运行期间都存在.速度快. ...
- python获取字典的key列表
获取字典的所有key: # !/usr/bin/python3.4 # -*- coding: utf-8 -*- b = { 'video':0, 'music':23 } print(list(b ...