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,基于此设计了个很轻量的日期选择面板,很简单的.效果图如下所示: 代 ...
随机推荐
- React Native学习(六)—— 轮播图
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
- Spider_Man_3 の selenium
一:介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...
- event.target与event.srcElement
target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素.文档或窗口. 在标准浏览器下我们一般使用event.target就能解决,然而低版本IE浏览器总是会出些幺蛾子,这时候 ...
- Thinkphp 3.2中文章详情页的上一篇 下一篇文章功能
额 简单2句话解释下 获取上一篇文章的原理,其实就是以当前文章的id为起点进行进行查询,例如id=5的文章 select * from article where (article_id<5 ...
- jQuery学习笔记一
一.jQuery版本兼容 jQuery版本2以上不支持IE6,7,8浏览器. 如果需要支持IE6/7/8,那么请选择1.9 同样还可以通过条件注释在使用IE6/7/8时只包含进1.9 <!--[ ...
- 修改Weblogic jdk版本
找到 F:\Oracle\Middleware\Oracle_Home\user_projects\domains\base_domain\bin setDomainEnv.cmd
- Mysql索引分析:适合建索引?不适合建索引?【转】
数据库建立索引常用的规则如下: 1.表的主键.外键必须有索引: 2.数据量超过300的表应该有索引: 3.经常与其他表进行连接的表,在连接字段上应该建立索引: 4.经常出现在Where子句中的字段,特 ...
- SpringMVC之GET请求参数中文乱码
server.xml 文件中的编码过滤器设置是针对POST请求的,tomacat对GET和POST请求处理方式是不同的,要处理针对GET请求的编码问题,则需要改tomcat,conf目录下的serve ...
- Duilib学习(一)
#pragma once #include <UIlib.h> using namespace DuiLib; #ifdef _DEBUG # ifdef _UNICODE # pragm ...
- 阿里java开发手册中命名规约解读之DO/BO/DTO/VO/AO
前言 在阅读<阿里巴巴Java开发手册>时,看到命名规则中有这样一条 虽然知道这些是根据Java对象的角色所分配名称的后缀,但是没有弄清楚分别是什么意思,日常开发中也没有使用到. 网上查找 ...