Question

i am using jquery ui date picker for users to pick the date when they pick the date i have a hidden field which adds the value of the date picker in a alternate date format.

what i need to do is dynamically output the value of the hidden input.

i have tried this but it only seems to work if the user types in the date manually and doesn’t use the date picker image icons and scroll through the calendar.

$('#datepicker').keyup(function () {
$('#date-output').text($(this).val());
});

Any help would be greatly appreciated.

Jquery date picker code

//date pickers
$(function() {
    $( "#datepicker" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        dateFormat:"dd/mm/yy",
        minDate: +0,
        altField: "#alternate",
        altFormat: "D MM d",
        onSelect: function(dateText, inst) {
        var suffix = "";
        switch(inst.selectedDay) {
            case '1': case '21': case '31': suffix = 'st'; break;
            case '2': case '22': suffix = 'nd'; break;
            case '3': case '23': suffix = 'rd'; break;
            default: suffix = 'th';
        }

    $("#alternate").val($("#alternate").val() + suffix);
}
        });
    });

HTML

<input name="datepicker" class="calendarInput" type="text" id="datepicker">
<input name="alternate" id="alternate" type="hidden" >
<span id="date-output"></span>

Answer 1

DEMO

 onSelect: function(dateText, inst) {
    var suffix = "";
    switch(inst.selectedDay) {
        case '1': case '21': case '31': suffix = 'st'; break;
        case '2': case '22': suffix = 'nd'; break;
        case '3': case '23': suffix = 'rd'; break;
        default: suffix = 'th';
    }

    var val = $("#alternate").val() + suffix;
    $("#alternate").val(val);
    $('#date-output').text(val);
}