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的时候才会触发,不知道能不能在清空日期的时候就立马将日期限制去掉,知道的大神可以给个解决方案不


相关文章推荐

关于UI布局中的常见布局类型、控件、控件属性以及引入布局的说明

布局: LinearLayout:线性布局(常用),让控件在线性方向上依次排列。 RelativeLayout:相对布局(常用),通过相对定位的方式让控件出现在布局的任何位置。 FrameLay...
  • cat_pp
  • cat_pp
  • 2015年12月16日 12:00
  • 827

My97DatePicker设置,包括隐藏 清空,设置最大日期, 时间格式等

My97DatePicker是一款非常灵活好用的日期控件。使用非常简单。    在WdatePicker()中设置参数,可以实现不同的效果.  1、下载My97DatePicker组件包  ...

jQuery UI Datepicker 选择时分秒

jQuery UI Datepicker日期选择插件很好用了,只不过只能精确到日,不能选择时间(小时分钟秒)很遗憾,而jquery-ui-timepicker-addon.js正是基于jQuery ...

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

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

jquery ui datepicker时间格式

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

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

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

jQuery UI插件之datepicker的自定义设置

1. 修改datepicker的外观颜色,在jquery.ui.theme.css里面修改.ui-widget-header的background的值为你想要的颜色,并且去掉后面到color属性之前的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery UI datepicker在选择startDate与endDate时手动清空数据后,时间选择依然有限制问题!
举报原因:
原因补充:

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