Jquery ui datepicker 设置日期范围,如只能隔3天
最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的 datepicker
后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件,其中时间要设置为必选,
产品要叫日历控件做成只能做3天之内的查询,且日历控件要做成这样的要求,如果前一个日历控制选择了2013年9月1号
后面的日历控件只能选择2013年9月1号,2013年9月2号,2013年9月3号,其他的全部要不能选,本来想叫他给提示的,领导非要这么干
真是领导一句话,码工辛苦好几年啊。。。好吧还好jquery ui 的日历控件提供了这个功能,很强大
首先去官网上(http://jqueryui.com/download/#!version=1.9.2)下载jquery ui 包 我用的是1.92版本
下载好了之后
引入<link href="jquery-ui/1.9.2/css/smoothness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-ui/1.9.2/js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="jquery-ui/1.9.2/datepicker-init.js"></script>
<script type="text/javascript">
$(function(){
var dates = $("#startDate,#endDate");
var option;
var targetDate;
var optionEnd;
var targetDateEnd;
dates.datepicker({
showButtonPanel:false,
onSelect: function(selectedDate){
if(this.id == "startDate"){
// 如果是选择了开始时间(startDate)设置结束时间(endDate)的最小时间和最大时间
option = "minDate"; //最小时间
var selectedTime = getTimeByDateStr(selectedDate);
var minTime = selectedTime;
//最小时间 为开第一个日历控制选择的时间
targetDate = new Date(minTime);
//设置结束时间的最大时间
optionEnd = "maxDate";
//因为只能做三天内的查询 所以是间隔2天 当前时间加上2*24*60*60*1000
targetDateEnd = new Date(minTime+2*24*60*60*1000);
}else{
// 如果是选择了结束时间(endDate)设置开始时间(startDate)的最小时间和最大时间
option = "maxDate"; //最大时间
var selectedTime = getTimeByDateStr(selectedDate);
var maxTime = selectedTime;
targetDate = new Date(maxTime);
//设置最小时间
optionEnd = "minDate";
targetDateEnd = new Date(maxTime-2*24*60*60*1000);
}
dates.not(this).datepicker("option", option, targetDate);
dates.not(this).datepicker("option", optionEnd, targetDateEnd);
}
});
</script>
<input type="text" value="" name="startDate" readonly="true" id="startDate" title="日期范围不能大于3天"/>
<input type="text" value="" name="endDate" readonly="true" id="endDate" title="日期范围不能大于3天"/>
Jquery ui datepicker 设置日期范围,如只能隔3天的更多相关文章
- 页面日期选择控件--jquery ui datepicker 插件
日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...
- jQuery UI Datepicker使用介绍
本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- jQuery UI datepicker z-index默认为1 怎么处理
最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...
- 坑爹的jquery ui datepicker
1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...
- jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断
jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...
- [转]Using the HTML5 and jQuery UI Datepicker Popup Calendar with ASP.NET MVC - Part 4
本文转自:http://www.asp.net/mvc/overview/older-versions/using-the-html5-and-jquery-ui-datepicker-popup-c ...
- 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)
最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除 ...
- 解决 jQuery UI datepicker z-index默认为1 的问题
最近碰到页面日期选择控件被页头挡住的问题,我们这个客户的电脑是宽屏的,上下窄,屏幕又小,导致他点击日期选择控件时,无法选择到月份.如图: 分析造成这个问题的原因: 我们页头部分的z-index设置为1 ...
随机推荐
- iOS更新之DFU模式和恢复模式
DFU模式和恢复模式的区别:DFU模式是在iPhone固件引导启动之前进行恢复的模式.所以用DFU模式刷机一般比较干净,不会有任何垃圾文件.想当于电脑重新格式化之后再安装系统. DFU模式进入方法:1 ...
- 45 个非常有用的 Oracle 查询语句(转)
这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询.这些是所有 Oracle 开发者都必备的技能,所以快快收 ...
- [Hapi.js] Request Validation with Joi
hapi supports request validation out of the box using the joi module. Request path parameters, paylo ...
- 【.Net Remoting-1】
[.NetRemoting]2015.09.16 [分布式应用程序] 应用程序分布在不同计算机上,通过网络来共同完成一项任务 C/S架构[模式] [互操作性,Interoperability]又称[互 ...
- uva 10391 Compound Words <set>
Compound Words You are to find all the two-word compound words in a dictionary. A two-word compound ...
- [Netty 1] 初识Netty
1. 简介 最早接触netty是在阅读Zookeeper源码的时候,后来看到Storm的消息传输层也由ZMQ转为Netty,所以决心好好来研究和学习一下netty这个框架. Netty项目地址:htt ...
- [转]设置MS Office Word for mac的默认显示比例
由于mac os的分辨率比较大,在PC上显示正常的word文档(显示比例100%),在mac下打开会很小,需要经常调整显示比例,如调到125%.130%或150%,可以通过下面方法来设置默认显示比例, ...
- MAC OS中使用ll,la命令
在linux下习惯了使用ll.la等ls别名 用mac os发现没有这样的命令,很不方便. 其实只要在用户目录下建立一个脚本“.bash_profile”,并输入以下内容即可:alias ll='ls ...
- PHP判断访客是否移动端浏览器访问
今天要给大家分享一段PHP代码,该代码的功能是用来判断访客是否移动端浏览器访问,该功能的实现思路是通过HTTP_X_WAP_PROFILE. HTTP_VIA.HTTP_USER_AGENT等信息来判 ...
- requirejs学习之-- 初始化(一)
为了规范在项目中使用的javascript代码,我们使用了requirejs框架. 初始阶段,我们在按钮的点击事件中调用创建的模块,代码如下: function button_click() { _t ...