Change Date Format on jQuery UI Date Picker

Question

I have been trying to format the datepicker so that the date comes out like this:

Jul 23 15

I have been reading this question jQuery UI DatePicker - Change Date Format

But for some reason it is not working for me. I am still learning jQuery so any help on this would be greatly appreciated.

My code is below:

  $('input').datepicker({ onSelect: function(dateText, inst) { var date = $(this).datepicker('getDate'), day = date.getDate(), month = date.getMonth() + 1, year = date.getFullYear(); var parent_div = $(this).closest(".clickable-text"); console.log(parent_div); $(".Jquery_day", parent_div).html(day); $(".Jquery_month", parent_div).html(month); $(".Jquery_year", parent_div).html(year); $(parent_div).addClass("is_selected"); } }); $(window).load(function() { $('input').datepicker(); $('input').datepicker("setDate", new Date()); var dateFormat = $('input').datepicker({dateFormat: "Mdy"}).val(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Updated snippet of code below:

  $('input.start').datepicker({ onSelect: function(dateText) { // alert(dateText); var date = $(this).datepicker('getDate'), day = date.getDate(), month = date.getMonth() + 1, year = date.getFullYear(); var parent_div = $(this).closest(".clickable-text"); console.log(parent_div); $(".Jquery_day", parent_div).html(day); $(".Jquery_month", parent_div).html(month); $(".Jquery_year", parent_div).html(year); $(parent_div).addClass("is_selected"); }, dateFormat: "M dy" }); $('input.start').datepicker(); $('input.start').datepicker("setDate", new Date()); 

Please see jsfiddle below. It appears to work kind of okay here for some reason it is adding an extra calendar, it may be something else within my code that is causing the issue. If I am coding something wrong then please do let me know. I am struggling to get back the selected value on the 'Number of Adults' section as well but it seems to be working here.

Demo

Answer 1

Were you after this?

$('input').datepicker({  

    onSelect: function(date) {
        alert(date);
    },
    dateFormat: "M d y"
});

Following are the allowed formats:

• Default: "mm/dd/yy"
• ISO 8601: "yy-mm-dd"
• Short: "d M, y"
• Medium: "d MM, y"
• Full: "DD, d MM, yy"
• With text: "'day' d 'of' MM 'in the year' yy"

A Demo