Get date from datepicker and display it in a div

Question

I'm trying to get the date from the datepicker in jQuery UI and then display the date selected by the user somewhere on the page. The selected date already displays inside the input field of the datepicker, which is great, but i also want to display that exact same value elsewhere on the page inside a div tag.

Solution 1

Add onchange="showDate(this)" to your input with the date picker.

function showDate(input){
$('#div').html(input.value);
}

Your div will have the date selected by the datepicker.

Solution 2

Jquery UI actually exposes this functionality for you and will even return a bonafide date type.

Just call .datepicker("getDate")

Also, Unobtrusive JavaScript would usually prefer that you not add javascript inline to your HTML. Instead, you can attach a listener to your datepicker with the change event handler

JavaScript:

$("#datepicker").change(function() {
    var date = $(this).datepicker("getDate");
    $("#placeholder").text(date);
});

Working Demo in Fiddle

Solution 3

onSelect called when the date picker is selected. This code also permit to change the format date to show up in a different div.

$("#datepicker").datepicker({
    dateFormat: "MM dd, yy",
    showOtherMonths: true,
    selectOtherMonths: true,
    onSelect: function () {
        var selectedDate = $.datepicker.formatDate("M yy", $(this).datepicker('getDate'));
        //alert(date);
        $("#month").text(selectedDate);
    }
});