最近的后台项目前端使用了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天的更多相关文章

  1. 页面日期选择控件--jquery ui datepicker 插件

    日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等.官方地址:http://docs.jquery.com ...

  2. jQuery UI Datepicker使用介绍

    本博客使用Markdown编辑器编写 在企业级web开发过程中,日历控件和图表控件是使用最多的2中第三方组件.jQuery UI带的Datepicker,日历控件能满足大多数场景开发需要.本文就主要讨 ...

  3. JQuery UI datepicker 使用方法(转)

    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...

  4. jQuery UI datepicker z-index默认为1 怎么处理

    最近在维护一个后台系统的时候遇到这样的一个坑:后台系统中日期控件使用的是jQuery UI datepicker. 这个控件生成的日期选择框的z-index = 1.问题来了.页面上有不少z-inde ...

  5. 坑爹的jquery ui datepicker

    1.坑爹的jquery ui datepicker 竟然不支持选取时分秒,害的我Format半天 期间尝试了bootstrap的ditepicker,但是不起作用,发现被jquery ui 覆盖了, ...

  6. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  7. [转]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 ...

  8. 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker)

          最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除 ...

  9. 解决 jQuery UI datepicker z-index默认为1 的问题

    最近碰到页面日期选择控件被页头挡住的问题,我们这个客户的电脑是宽屏的,上下窄,屏幕又小,导致他点击日期选择控件时,无法选择到月份.如图: 分析造成这个问题的原因: 我们页头部分的z-index设置为1 ...

随机推荐

  1. python学习之路-3 初始python数据类型以及文件操作

    本篇涉及内容 set集合 函数 三元运算 文件操作 set集合 set是一个无序的且不重复的元素集合 1.创建set集合的方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  2. java并发编程--Executor框架(一)

    摘要:        Eexecutor作为灵活且强大的异步执行框架,其支持多种不同类型的任务执行策略,提供了一种标准的方法将任务的提交过程和执行过程解耦开发,基于生产者-消费者模式,其提交任务的线程 ...

  3. 国内ip信息库的组建

    1.从 APNIC 分析得到国内的段 数据源位置:http://ftp.apnic.net/apnic/stats/apnic/delegated-apnic-latest 2.从QQ纯真库分析得到国 ...

  4. Why Hadoop2

    自从Hadoop2出现之后,其迅速代替了Hadoop1的地位,并丰富了Hadoop的应用场景.假设如今有公司使用Hadoop的话,往往直接採用Hadoop2了. Hadoop2能被如此广泛的使用,肯定 ...

  5. progressbar使用方法:进度画面大小,进度画面背景,进度百分比

    前一段时间,因为项目须要研究了下progressbar,发现这个小东西还真是不简单.在这个小控件的显示效果上,花费的时间远大于预估的工作量.话说程序猿一直是这样,预估的工作量远少于实际...      ...

  6. 网页http请求的整个过程

    这几天看一个讲解一个网页从我们输入地址到显示在我们面前的一个讲解,是我对http又有了一个完整的了解,现在做一下整个流程的记录,虽然不是很详细,但是整个过程是完整的.如果不对,请指正! 打开浏览器,地 ...

  7. 一道movfuscator混淆过的简单逆向

        月赛中出了道经过movfuscator混淆的逆向题目,记录一下过程.跑起来发现需要用户输入长度为20的字符串,我尝试着输入了几次都是直接退出了,没有任何提示.用IDA打开,题目里面几乎全是mo ...

  8. Android中Binder的基础知识点

    Android Binder基础知识点 一 传统IPC和Binder机制的比较 传统IPC: 1)收方无法获得对方进程可靠的UID/PID,从而无法鉴别对方身份. 2)接入点开放,无法建立私有通道. ...

  9. 内存泄露分析 打开run static analyzer

  10. 简单的拖动手势控制侧拉view显示

    通过 UIPanGestureRecognizer  手势来控制侧拉view的显示 在QHLViewController.m文件中,先添加一些宏定义和参数等等. #define QHLAnimatin ...