Question

I’m looking for a way to make JQuery UI DatePicker to allow setting the date to any arbitrary string, including an invalid date. I need this to give user a chance to change the date he may manually enter, in case this date was in an incorrect format

Steps:

• the user manually enters the incorrect date 28/13/2012 (date format is dd/mm/yy, month 13 is invalid)
• the user validates the form
• struts2 displays the same form again with a message

Expected: On page redisplay, field is filled with 28/13/2012 and a message “incorrect date format”

Actual: The field gets becomes empty

Would’nt it be better for user to get his old incorrect value 28/13/2012? How can we achieve this?

Thanks

---

Addition:

JSP code:

<s:textfield name="fromDate" cssClass="datePicker" theme="simple"/>
<s:textfield name="toDate" cssClass="datePicker" theme="simple"/>

JS code:

$(document).ready(function(){
    $('input.datePicker').datepicker({
        autoSize: true,
        dateFormat: '<s:text name="date.datePicker.dateFormat"/>',
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 3,
        dayNamesMin: '<s:text name="date.datePicker.dayNamesMin"/>',
        monthNamesShort: '<s:text name="date.datePicker.monthNamesShort"/>'
    });

    // Gestion du la dépendance entre date de début et de fin
    $('input[name="fromDate"]').datepicker( "option", "onClose", function( selectedDate ) {
        $( 'input[name="toDate"]' ).datepicker( "option", "minDate", selectedDate );
    });
    $('input[name="toDate"]').datepicker( "option", "onClose", function( selectedDate ) {
        $( 'input[name="fromDate"]' ).datepicker( "option", "maxDate", selectedDate );
    });

});

Java code (Action class):

private String toDate;
private String fromDate;
// + getters and setters

Answer 1

I finally found a quick quirk to display the old incorrect date

$(document).ready(function(){

    // initialize datepicker
    $('input.datePicker').datepicker({
        autoSize: true,
        dateFormat: '<s:text name="date.datePicker.dateFormat"/>',
        showOtherMonths: true,
        selectOtherMonths: true,
        changeMonth: true,
        changeYear: true,
        numberOfMonths: 3,
        dayNamesMin: <s:text name="date.datePicker.dayNamesMin"/>,
        monthNamesShort: <s:text name="date.datePicker.monthNamesShort"/>
    });

    // Do all your JQuery UI datepicker-related stuff here
    // (...)

    // force old date. Useful when user types a date with month=13 for exemple
    $('input[name="fromDate"]').val('<s:property value="fromDate" />');
    $('input[name="toDate"]').val('<s:property value="toDate" />');