JQuery UI datepicker在选择startDate与endDate时手动清空数据后,时间选择依然有限制问题!

原创 2015年07月21日 11:07:30

现在要用Jquery UI  的datepicker做一个时间段的选择,要求选择了startDate后,endDate要在startDate之前;选择endDate后,startDate要在endDate之前。

使用代码:

$("#startDate").datepicker({
    onSelect:function(dateText,inst){
        $("#endDate").datepicker("option","minDate",dateText);
    },
    timeFormat : 'hh:mm:ss',
    dateFormat : 'yy-mm-dd',
});
$("#endDate").datepicker({
    onSelect:function(dateText,inst){
        $("#startDate").datepicker("option","maxDate",dateText);
    },
    timeFormat : 'hh:mm:ss',
    dateFormat : 'yy-mm-dd',
});
可以实现,但是当手动清除日期后,所选择的时间范围会出现问题:

比如: 刚开始我们选择startDate为20150714,endDate为20150729,然后手动清空startDate与endDate的日期,再次点击选择日期时,它们仍然有日期范围限制:

startDate:


endDate:



我现在找到一个办法处理的是: 给它们添加onClose事件,在它close时调用方法:$.datepicker._clearDate(this);

_.clearDate()是在DatePicker的对象。你不会找到它的jQuery UI网站上的公共API,但是它的工作原理就像一个charisma。(参考了这篇文章:http://codego.net/422121/)

    $("#startDate").datepicker({
        onSelect:function(dateText,inst){
            $("#endDate").datepicker("option","minDate",dateText);
        },
        onClose: function() {
            if ($("#startDate").val() == "") {
                $.datepicker._clearDate(this);
            }
        },
        timeFormat : 'hh:mm:ss',
        dateFormat : 'yy-mm-dd',
    });
    $("#endDate").datepicker({
        onSelect:function(dateText,inst){
            $("#startDate").datepicker("option","maxDate",dateText);
        },
        onClose: function() {
            if ($("#endDate").val() == "") {
                $.datepicker._clearDate(this);
            }
        },
        timeFormat : 'hh:mm:ss',
        dateFormat : 'yy-mm-dd',
    });
暂时就只找到这个处理方法,必须要控件close的时候才会触发,不知道能不能在清空日期的时候就立马将日期限制去掉,知道的大神可以给个解决方案不


My97DatePicker设置,包括隐藏 清空,设置最大日期等

http://www.cnblogs.com/huangw/archive/2013/01/25/2876009.html  My97DatePicker是一款非常灵活好用的日期...
  • zunguitiancheng
  • zunguitiancheng
  • 2016年06月29日 11:41
  • 8722

Bootstrap的DatePicker日期范围选择

Bootstrap DatePicker实现日期选择 开始日期不大于结束时间,结束时间不小于开始时间,开始日期和结束日期都不大于当前日期。...
  • liusaint1992
  • liusaint1992
  • 2016年09月20日 00:10
  • 11794

修改Jquery UI DatePicker 可以选择时间

  • 2010年03月12日 18:27
  • 590KB
  • 下载

jQuery UI Datepicker精美的日期选择组件

日期选择组件在日常开发中使用还是非常广泛的,jQuery UI Datepicker作为jQuery UI的日期选择组件,不仅使用灵活、主题丰富多样,更因为日常普遍使用jQuery,所以是一个不错的选...
  • u012767263
  • u012767263
  • 2014年03月01日 17:15
  • 1606

jQuery UI Datepicker 选择时分秒

jQuery UI Datepicker日期选择插件很好用了,只不过只能精确到日,不能选择时间(小时分钟秒)很遗憾,而jquery-ui-timepicker-addon.js正是基于jQuery ...
  • PanRuiFang
  • PanRuiFang
  • 2015年03月20日 15:12
  • 20596

Jquery UI的日历控件datepicker限制日期

JQuery.ui.Datepicker是一个很强大的日期选择控件,定制性很强。朱最近在做一个旅馆预订的小功能,要求用户在填写订单选择入住日期时,要将已经被预订出的日期置为不可用,查些资料,看看JS,...
  • z69183787
  • z69183787
  • 2013年12月30日 22:55
  • 13494

jquery ui datepicker时间格式

下载jquery ui 的版本不同该功能的时间格式也不同; 修改英文格式找到如下类似代码进行修改:修改它的构造函数; function Datepicker() { this._curInst = ...
  • wow4464
  • wow4464
  • 2015年01月26日 16:47
  • 1040

JQuery UI Datepicker在克隆操作的冲突问题

页面上使用jquery的克隆操作克隆出来N个input,input的形式为: 这时候查看源码,会给它一个默认的ID,当克隆操作后,datepicker控件会给新的input另外的ID,形...
  • Donthan
  • Donthan
  • 2012年09月05日 11:40
  • 3361

修改Jquery-UI-DatePicker-可以选择时间

  • 2011年10月27日 12:30
  • 182KB
  • 下载

修改Jquery-UI-DatePicker-可以选择时间

  • 2011年10月27日 12:23
  • 123KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery UI datepicker在选择startDate与endDate时手动清空数据后,时间选择依然有限制问题!
举报原因:
原因补充:

(最多只允许输入30个字)