Reset date range constraints

Question

I am using jQueryUI and datepicker in a rather complicated form. I have a group of 4 datepickers that are all dependent on each other. For example selecting a Date in Datepicker A results in a change of the valid date range of Datepicker B a.s.o.

This is easily achieved by using the onSelect option of the datepicker:

onSelect: function(selectedDate){
       //find datepicker B;
       //edit the valid date range of datapicker B.
}

Now comes the problematic use case: Since these fields are not required a user is allowed to take the following steps:

1) Selects a date in date picker A. This would trigger the onSelect and restrict the date range of date picker B. 2) Changes his mind and wants to clear the date in date picker A.

Step 2) is problematic: First of all, for some obscure reason, jQueryUI > 1.7 does not have a clear button. So the input field of the datepicker has to be editable to even allow the user to delete (by using the backspace button) his previously selected date. Maybe I can accept that.

But here comes the real problem: After the user has manually deleted his date from the input field, I have no hook for my "reset" logik,a.k.a. removing the restrictions previously applied to date picker B. The onSelect is not triggered, but as far as I can see, nothing else is either.

Is the only way to reset my logic, to put an blur listener on the datepicker input field that everytime checks to see if the value is empty? Is it is so, then I really view the omition of a clear mechanism in the datepicker widget as a major bug. If the widget allows me to restrict the dates of other datepicker widgets, then it should also allow me to lift those restrictions.

DISCLAIMER: This post is partially a duplicate to this question, but the only awnser points to a js "hack" that doesn't correctly work (clear button disappears when changing the month). I also viewed Ticket #3999 from the jQuery issue management. It is closed as "wontfix" :/

Thank you for any help.

Answer 1

I was not aware that the datepicker had lost the "Clear" button! I started looking at this and tried to make a solution that did not rely on adding another element or assuming that users will know that pressing Esc closes the widget. Although you could just give the users an explanation of that functionality, which might solve your problem ;-)

So I made a demo in which I have replaced the "Close" button text with "Clear". I have added one extra jQuery mouseup delegated event on my new "Clear" button which will clear the input before the standard datepicker events fire.

So either clicking "Clear" or using backspace to delete a date and then Esc to close the datepicker will revert the second input back to the default datepicker state.

Note that for this demo every time a date is selected in the first input the range on the second is set. This may not be your desired functionality.

Hope this is what you are looking for :-)

Edit: Updated demo Ahhh yes, that does complicate things somewhat! I've re-worked the solution to be a lot more generic and I think I have it working. The new demo creates all the datepicker objects in one go. There were a couple of tricky parts, namely the generic clearing of the "next" <input> elements and correctly determining which <input> to clear when the "clear" button is pressed. I was not aware that there is only one datepicker. So it's a bit of a hack as it just sets a jQuery .data() property on the input that has the datepicker visible and then use that to clear the correct one later. Note that in this demo it still resets all subsequent inputs if one is cleared, i.e. "clearing" the first clears 2 and 3 but clearing the second only clears the 3rd.

Answer 2

Have you thought about observing the onClose event on the datepicker A?

onClose: function(dateText, inst) {
  if(dateText == '') {
    //find datepicker B;
    //reverse the valid date range of datepicker B.
  }
},

Answer 3

This is kind of a hack, but maybe it can do what you want:

You could have a hidden input that says "Date chosen", which is a boolean. When the user selects a date, you set the hidden input to true.

You disable to date input. You add a "clear" button that will set the input to false and reset the date constraints on B.

On your server part, you check the boolean to see if you have to handle the dates or not.

Answer 4

The following has been tested and works

<html>
<head>
    <link rel="stylesheet" href="ui/css/ui-lightness/jquery-ui-1.8.11.custom.css">
    <script src="ui/js/jquery-1.5.1.min.js"></script>
    <script src="ui/js/jquery-ui-1.8.11.custom.min.js"></script>
    <script>
        $(document).ready(function() {
           var myClone = $("#foo").clone();

           $("#foo").datepicker();

            $("#resetMe").click(function(e) {
                e.preventDefault();

                $("#foo").remove();

                var localClone = $(myClone).clone();
                $("#fooContainer").append(localClone);
                $(localClone).attr("id", "foo").datepicker();      


            });

        }); 
    </script>

</head>
<body>
    <span id="fooContainer">
        <input id="foo"/>
    </span>
    <a id="resetMe" href="">Changed your mind? - Clear Date</a>
</body>
</html>