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


机器学习之模型评估与选择

-
  • 1970年01月01日 08:00

Wdatepicker日期控件的使用指南

示例2-3-1 起始日期简单应用 示例2-3-2 alwaysUseStartDate属性应用示例2-3-3 使用内置参数示例 2-4-1: 年月日时分秒示例 2-4-2 时分秒示例 2-4-3 年...
  • wanglei19880622
  • wanglei19880622
  • 2012-10-09 10:43:50
  • 164337

WdatePicker日历控件使用方法

1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 ...
  • white_smile
  • white_smile
  • 2015-01-04 10:53:04
  • 2736

JQueryUI DatePicker 设置清空按钮

$.datepicker.setDefaults({ showButtonPanel: true, beforeShow : function( input ) { setTimeout(fu...
  • zh921112
  • zh921112
  • 2017-03-01 17:49:46
  • 1742

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

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

BootStrap中datepicker的使用和修改

笔者的应用场景是angular封装下的bootstrap中datepicker的使用。并一定程度上展示这个插件的diy修改.这两天用到了bootstrap中的datepicker插件。然后查阅了一下各...
  • ouyangyanlan
  • ouyangyanlan
  • 2015-10-31 17:33:24
  • 26194

bootstrap-datepicker实现年、月、日动态切换

效果图: bootstrap-datepicker使用时,无法动态重置年、月、日控件,网上搜索了半天没有找到相应的方法,后来自己根据jquery的特性通过动态增删日期控件,实现年、月、日的无缝动态切...
  • xiaozhuanddapang
  • xiaozhuanddapang
  • 2017-08-23 01:26:25
  • 2122

bootstrap-datepicker实现年、月、日控件重置

  • 2017年08月23日 01:24
  • 556KB
  • 下载

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

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

Bootstrap中的datetimepicker用法总结

datetimepicker用法总结2016年4月21日更新目录datetimepicker用法总结 目录 简述 官方文档 选项属性 1 format 格式 2 weekStart 一周从哪一天开...
  • hizzyzzh
  • hizzyzzh
  • 2016-04-21 20:50:52
  • 64066
收藏助手
不良信息举报
您举报文章:JQuery UI datepicker在选择startDate与endDate时手动清空数据后,时间选择依然有限制问题!
举报原因:
原因补充:

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