场景:

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. 部署Asp.net Core 项目发生502.5 或者500 没有其他提示信息

    最近将公司原来.NetCore 1.6的项目升级到.net Core 2.0首先发生 502.5的错误,包括IIS日志,Windows应用程序日志都没有记录问题始终解决不了,首先看看官网给出的解决方案 ...

  2. vhost:一种 virtio 高性能的后端驱动实现

    什么是 vhost vhost 是 virtio 的一种后端实现方案,在 virtio 简介中,我们已经提到 virtio 是一种半虚拟化的实现方案,需要虚拟机端和主机端都提供驱动才能完成通信,通常, ...

  3. 最小生成数之Kruskal算法

    描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用了--但是幸运的是,经过计算机的分析,小Hi已经筛选出了一些比较适合建造道路的路线,这个数量并没有特别的大. 所以问题变成 ...

  4. 使用python爬取百度贴吧内的图片

    1. 首先通过urllib获取网页的源码 # 定义一个getHtml()函数 def getHtml(url): try: page = urllib.urlopen(url) # urllib.ur ...

  5. 使用nginx作为websocket的proxy server

    blog.csdn.net/zhx6044/article/details/50278765 WebSocket WebSocket协议为创建客户端和服务器端需要实时双向通讯的webapp提供了一个选 ...

  6. Intellij idea 中修改java web代码 ,网页不同步

    问题可能出在  Intellij  idea 没有将源码保存在本地,浏览器访问了缓存而没有访问最新文件 用命令行查看了源码,同步了 接着禁止浏览器缓存,网页同步了 打开火狐浏览器 输入 about:c ...

  7. 无格式转换php

    // 无格式转换function ClearHtml($content,$allowtags='') { mb_regex_encoding('UTF-8'); //replace MS specia ...

  8. SpringAOP简单入门

    注解形式 步骤一.定义一个interface public interface ArithmeticCalculator { double plus(int i, int j); double sub ...

  9. Spring简单的REST例子

    控制器处理 HTTP 的4个主要方法 GET,POST,PUT,DELETE 使用@PathVariable注解获取URL中的参数 import javax.inject.Inject; import ...

  10. 转-Linux硬件装置和磁盘分区MBR

    1 各硬件装置在Linux中的文件名 『在Linux系统中,每个装置都被当成一个文件来对待』 举例来说,SATA接口的硬盘的文件名即为/dev/sd[a-d],其中, 括号内的字母为a-d当中的任意一 ...