WdatePicker-限制日期选择
场景:
1. 开始时间,和结束时间最大选择今天。
2. 开始时间和结束时间的最大时间间隔为30天。
jsp代码:
<!-- 时间段 -->
<form>
<!-- 开始时间格式规则直接绑定在input上 -->
开始时间:
<input type="text" style="line-height: 12px;" id="start_time_id" readonly="readonly" class="Wdate"
name="start_time_name" onClick="WdatePicker({readOnly:true,dateFmt:'yyyy-MM-dd ',maxDate:'#F{$dp.$D(\'end_time_id\')||\'%y-%M-%d\'}',minDate:'#F{$dp.$D(\'end_time_id\',{d:-29})}'})"
onchange="setEndTimeDurationWhileStartTimeChange();"/> <!-- 结束时间格式规则在js中进行及时调整 -->
结束时间:
<input type="text" style="line-height: 12px;" id="end_time_id" class="Wdate" name="end_time_name" readonly="readonly"/>
</form>
js代码:
// 结束时间:初始默认最大日期为今天
$(function(){
// 设置结束时间的最大可取值为today
$('#end_time_id').unbind("click");
$('#end_time_id').bind("click",function(){
WdatePicker({
readOnly:true,
dateFmt:'yyyy-MM-dd ',
minDate:'#F{$dp.$D(\'start_time_id\')}',
maxDate:'#F{\'%y-%M-%d\'}'
});
});
}); // 开始时间值改变时,改变结束时间值得范围
function setEndTimeDurationWhileStartTimeChange(){
var start = $('#start_time_id').val(); // 格式:2017-05-01 // 如果选中了开始时间
if(start != "" && start != null){
// endMaxDate = 开始时间+29天
start = start.replace(/-/g,"/");
var endMaxDate = new Date(start);
endMaxDate.setDate(endMaxDate.getDate()+29); // today = 今天
var today = new Date();
today.setHours(0);
today.setMinutes(0);
today.setSeconds(0);
today.setMilliseconds(0); // 如果endMaxDate>today
if(endMaxDate.getTime()>today.getTime()){
// 设置结束时间的最大可取值为today
$('#end_time_id').unbind("click");
$('#end_time_id').bind("click",function(){
WdatePicker({
readOnly:true,
dateFmt:'yyyy-MM-dd ',
minDate:'#F{$dp.$D(\'start_time_id\')}',
maxDate:'#F{\'%y-%M-%d\'}'
});
});
}else{
// 设置结束时间的最大可取值为endMaxDate
$('#end_time_id').unbind("click");
$('#end_time_id').bind("click",function(){
WdatePicker({
readOnly:true,
dateFmt:'yyyy-MM-dd ',
minDate:'#F{$dp.$D(\'start_time_id\')}',
maxDate:'#F{$dp.$D(\'start_time_id\',{d:29})}'
});
});
}
}
// 如果清空了开始时间,重设结束时间的范围,到今天为止
else{
// 设置结束时间的最大可取值为today
$('#end_time_id').unbind("click");
$('#end_time_id').bind("click",function(){
WdatePicker({
readOnly:true,
dateFmt:'yyyy-MM-dd ',
minDate:'#F{$dp.$D(\'start_time_id\')}',
maxDate:'#F{\'%y-%M-%d\'}'
});
});
}
}
WdatePicker-限制日期选择的更多相关文章
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
- 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...
- react-native DatePicker日期选择组件的实现
本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...
- 利用select实现年月日三级联动的日期选择效果
× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...
- 多日期选择jQuery插件 MultiDatesPicker for jQuery UI
Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件. GIT源码: https://github.com/dubrox/Multiple-Da ...
- js日期选择控件
// 日期选择 // By Ziyue(http://www.web-v.com/) // 使用方法: // <script type="text/javascript" s ...
- 038. asp.netWeb用户控件之六实现日期选择的用户控件
web用户控件的ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile=&qu ...
- WdatePicker 设置日期第一个比第二个的日期小
WdatePicker 设置日期第一个比第二个的日期小 可以设置,日期只显示某一天的,比如只显示周一,和周日 <input id="Text1" class="Wd ...
- 贴近用户体验的jQuery日期选择插件
分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览 源码下载 var dateRange = new ...
- Swing应用开发实战系列之二:设计日期选择面板窗口
Swing本身没有提供什么华丽丽的日期时间选择控件,所以笔者就在网上搜了个第三方的jar包jdatepicker-1.3.2.jar,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...
随机推荐
- 设置Sql server用户对表、视图、存储过程、架构的增删改查权限
根据数据库Schema限制用户对数据库的操作行为 授予Shema dbo下对象的定义权限给某个用户(也就是说该用户可以修改架构dbo下所有表/视图/存储过程/函数的结构) use [Your DB N ...
- java使用Websocket获取HttpSession出现的问题与解决
websocket的写法就不多说了,主要记一记其中出现的问题 1.获取不到httpSession 解决办法:先重写握手方法,将httpsession放入ServerEndpointConfig.get ...
- css3中的关键帧技术分析应用
最近在研究网页加载进度效果的时候发现可以使用css3实现这个效果. 使用css3实现完全不需要图片,相比使用loading.gif的实现来说可能更快. 使用css3实现动态加载的效果,主要会涉及到几个 ...
- SQL Server中字段类型对应的C#中的数据类型
数据库 C#程序 int int32 text string bigint int64 binary System.Byte[] bit Boolean cha ...
- ios VS android
本来是学习IOS的,但是最近接到的是有关于安卓的项目,害怕弄混,所以在这个技术博客里写一下对比. IOS ...
- Jquery实现两级联动
最后结果如下: 关键代码如下: <select name="customerCondition['credibilityBegin']" id="credibili ...
- Java中泛型数组创建总结
在java中,可以声明一个泛型数组,不能通过直接通过T[] tarr=new T[10]的方式来创建数组,最简单的方式便是通过Array.newInstance(Classtype,int size) ...
- 无法打开物理文件 操作系统错误 5:拒绝访问 SQL Sever
今天分离附加数据库,分离出去然后再附加,没有问题.但是一把.mdf文件拷到其它文件夹下就出错,错误如下: 无法打开物理文件 "E:\db\homework.mdf".操作系统 ...
- 自己搭建CA颁发证书做https加密网站
192.168.10.187 CA服务器 192.168.10.190 web服务器 (1)搭建CA cd /etc/pki/CA 在这个目录下创建serial和index.txt两个文件 echo ...
- HTTP常用状代码
2XX 成功 204 Not Content 请求处理成功,但没有资源可以返回. 1 put请求:该资源已存在于服务器上 2 delete请求:该资源已从服务器上删除 200 OK 请求正常处理 20 ...