Search code examples
javascriptjquerydatepickeranytime

AnyTime datepicker add a clear button

I am a new to js and am trying to figure out if there is a way to either modify an existing button within AnyTime Datepicker or add a new one that will clear the date from the field.

I see this as a possible solution, but can't figure out where to insert it into the anytime.js to prevent the AnyTime datepicker from breaking:

}).keyup(function(e) {
    if(e.keyCode == 8 || e.keyCode == 46) {
        $.datepicker._clearDate(this);
    }
});

Okay, so I have below that works in Chrome / firefox, but not in IE 9. In IE 9 I click on Clear button and it brings up the date picker. If I click on it twice in IE it will clear the field. How can I get it to be compatible with IE9:

<tr>
                        <td>
                            <label class="width100 right displayInlineBlock padBottom5">Received:
                                <input class="width70 calendarBackground" type="text" maxlength="4000" name="received" id="received" value="<%=report.getFormattedReceived()%>" />
                                <script>
                                    AnyTime.picker( "received", { format: "%d %b %y", firstDOW: 1 } );
                                </script>
                                <input type="button" id="receivedClear" value="Clear" />
                                <script>
                                    $("#receivedClear").click( function(e) {
                                    $("#received").val("").change(); } );
                                </script>
                            </label>
                        </td>
                    </tr>

Thanks!

Solution

  • The problem is, the picker appears when the date field has focus, and it constantly updates the field to show the currently-selected date (which defaults to the current date when empty). Therefore, calling change() to bring up the picker should, by design, also populate the field with the current date/time.

    If you want to clear the field, you should just call val('') and not bring up the picker. If you want to display the picker, then you should either not clear the field, or be willing to accept that the picker will reset the field to the current time.

    I am working on a new picker that will not automatically update the field until the picker is dismissed, but it is still many months from release.