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,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...
随机推荐
- java中强,软,弱,虚引用 以及WeakHahMap
java中强,软,弱,虚引用 以及WeakHahMap 一:强软引用: 参考:http://zhangjunhd.blog.51cto.com/113473/53092/进行分析 packa ...
- Spark_总结一
Spark_总结一 1.Spark介绍 1.1什么是Spark? Apache Spark是一个开源的集群计算框架,使数据计算更快(高效运行,快速开发) 1.2Spa ...
- Solr学习笔记2(V7.2)---导入自己的数据
学而不思则罔,思而不学则殆,总是看文档不动手效果是不好的.没有实地的从自己的数据库获取数据测试一下始终是空,总结一下自己的操作步骤吧. 第一步准备配置文件 E:\Solr\server\solr\co ...
- curl说明
https://baike.baidu.com/item/curl/10098606?fr=aladdin curl是利用URL语法在命令行方式下工作的开源文件传输工具.它被广泛应用在Unix.多种L ...
- js立体旋转展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [SinGuLaRiTy] NOIP2017 提高组
[SinGuLaRiTy-1048] Copyright (c) SinGuLaRiTy 2018. All Rights Reserved. NOIP2017过了这么久,现在2018了才找到寒假这么 ...
- Bundle使用&NSBundle
之 前在初始化一个类的时候:TestViewController *viewcontroller=[[TestViewController alloc]initWithNibName:@"T ...
- 【编程技巧】Ext.QuickTips.init();
启动悬浮提示(在你验证非法时.和现实提示语句等) 默认情况下悬浮提示没有启动:所以必须加上这句代码
- Java数据库基础(JDBC)
JDBC(Java Data Base Connectivity):SUN公司为了简化统一对数据库的操作,定义了一套Java操作数据库的规范,称之为JDBC: 这样应用程序就不需要关注数据库底层的详细 ...
- linkin大话面向对象--java关键字
java中的关键字有以下几个,他们不能作任何其它的用途. 发现没,java中的关键字全是小写,java是严格区分大小写的. abstract default null synchronized ...