[javascript] How to get the date from jQuery UI datepicker

I want to get the date from datepicker whenever user choose the date in jQuery UI datepicker and click the button on the form.

well I need to get the day, month and year of the date they choose. How can I get the date form jQuery UI?

Sometimes a lot of troubles with it. In attribute value of datapicker data is 28-06-2014, but datepicker is show or today or nothing. I decided it in a such way:

<input type="text" class="form-control datepicker" data-value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" />

I added to the input of datapicker attribute data-value, because if call jQuery(this).val() OR jQuery(this).attr('value') - nothing works. I decided init in cycle each datapicker and take its value from attribute data-value:

 $("form .datepicker").each(function() {
        var time = jQuery(this).data('value');
        time = time.split('-');
        $(this).datepicker('setDate', new Date(time[2], time[1], time[0], 0, 0, 0));
    });

and it is works fine =)

Try this, works like charm, gives the date you have selected. onsubmit form try to get this value:-

var date = $("#scheduleDate").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();

Reference here

You can retrieve the date by using the getDate function:

$("#datepicker").datepicker( 'getDate' );

The value is returned as a JavaScript Date object.

If you want to use this value when the user selects a date, you can use the onSelect event:

$("#datepicker").datepicker({
   onSelect: function(dateText, inst) { 
      var dateAsString = dateText; //the first parameter of this function
      var dateAsObject = $(this).datepicker( 'getDate' ); //the getDate method
   }
});

The first parameter is in this case the selected Date as String. Use parseDate to convert it to a JS Date Object.

See http://docs.jquery.com/UI/Datepicker for the full jQuery UI DatePicker reference.

NamingException's answer worked for me. Except I used

var date = $("#date").dtpicker({ dateFormat: 'dd,MM,yyyy' }).val()

datepicker didn't work but dtpicker did.

I just made some web scraping to discover the behaviour of JequeryUI datepicker, it was necessary for me because I'm not familiar with JS object so:

var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day = $(".ui-state-active").text();

it just pick the value in relation of the changing of class, so you can implement the onchange event:

$(document).on('change', '#datepicker', function() { 
    var month = $(".ui-datepicker-current-day").attr("data-month");
    var year = $(".ui-datepicker-current-day").attr("data-year");
    var day= $(".ui-state-active").text();
   $("#chosenday").text( day + " " + month  + " " + year )  ;
                        
});

or check if the current day is selected:

   if( $("a").hasClass("ui-state-active") ){ 
     var month = $(".ui-datepicker-current-day").attr("data-month");
     var year = $(".ui-datepicker-current-day").attr("data-year");
     var day= $(".ui-state-active").text();
     $("#chosenday").text( day + " " + month  + " " + year );
    }

the link to getdate: https://api.jqueryui.com/datepicker/#method-getDate

$("#datepicker").datepicker( 'getDate' );