场景:

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-限制日期选择的更多相关文章

  1. js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件

    例如域名是  a.xx.com  和 b.xx.com    如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候  a包含b  为 ...

  2. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

  3. react-native DatePicker日期选择组件的实现

    本教程的实现效果如下: 为了实现其淡入/淡出的覆盖效果, 还有取消按钮, 在此用了一个三方的组件, 大家可以先安装一下: 三方组件的地址:https://github.com/eyaleizenber ...

  4. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

  5. 多日期选择jQuery插件 MultiDatesPicker for jQuery UI

    Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件.   GIT源码: https://github.com/dubrox/Multiple-Da ...

  6. js日期选择控件

    // 日期选择 // By Ziyue(http://www.web-v.com/) // 使用方法: // <script type="text/javascript" s ...

  7. 038. asp.netWeb用户控件之六实现日期选择的用户控件

    web用户控件的ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile=&qu ...

  8. WdatePicker 设置日期第一个比第二个的日期小

    WdatePicker 设置日期第一个比第二个的日期小 可以设置,日期只显示某一天的,比如只显示周一,和周日 <input id="Text1" class="Wd ...

  9. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  10. Swing应用开发实战系列之二:设计日期选择面板窗口

    Swing本身没有提供什么华丽丽的日期时间选择控件,所以笔者就在网上搜了个第三方的jar包jdatepicker-1.3.2.jar,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...

随机推荐

  1. 关于React Native的那些坑

    好久没写博客了,特地把之前接触React Native时遇到的坑总结一下. 初始化一个React Native项目时,可能会遇到以下这些坑: 1.项目版本号与安卓模拟器中安装的 compileSdkV ...

  2. Vue.js 1.x 和 2.x 实例的生命周期

    在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x  实例的生命周期图示: Vue.js 1 ...

  3. JAVA WEB之Spring4.x JdbcTemplate

    jdbcTemplate 说白了,他就是Spring提供用于简化数据库访问的类 基本jdbc驱动访问数据库 /* 一个简易好用的数据库连接和访问类 */ package cslg.cn.control ...

  4. HTML <td> 标签的 rowspan 属性

    rowspan 属性规定单元格可横跨的行数. colspan  属性规定单元格可横跨的列数.

  5. java基础学习总结——java读取properties文件总结

    摘录自:http://www.cnblogs.com/xdp-gacl/p/3640211.html 一.java读取properties文件总结 在java项目中,操作properties文件是经常 ...

  6. c# gdi设置画刷透明

    使用solidBrush新建画刷,定义画刷的颜色为透明色 Brush b = new SolidBrush(Color.FromArgb(50, Color.Green)); 这里的50是透明度的设置 ...

  7. 关于多台机器之前session共享,sessionState mode="StateServer" 问题的困扰

    .net 多台机器共享session是很老的技术,一直很少用到session. 最近就出现了一个问题:三台前端,其中一台保存的session值死活不对,一样的环境,一样的配置文件,就是和另外两台获得的 ...

  8. git 文件状态与工作区域

    在上一篇简单讲述了文件状态与工作区域,在这里结合相关git命令详细了解文件的状态变更. 目录 1. 介绍 2. 常用命令 3. 实际操作 1. 介绍 git的文件状态是其git核心内容,了解后对后续的 ...

  9. linux_硬件信息

    运维关注哪些方面? CPU:对计算机工作速度和效率起决定性作用(intel amd) 内存: 临时存放数据:容量和处理速度,决定数据传输快慢 硬盘(disk):数据持久化,决定电脑反应速度:优化硬盘是 ...

  10. JAVA中生成、解析二维码图片的方法

    JAVA中生成.解析二维码的方法并不复杂,使用google的zxing包就可以实现.下面的方法包含了生成二维码.在中间附加logo.添加文字功能,并有解析二维码的方法. 一.下载zxing的架包,并导 ...