Display jquery ui date value in separate elements - jquery-ui

Question

I need to show the selected date value in different 'divs', 'spans', or 'p' elements like my example in the link below:
<button id="buttonHere">datepicker</button>
<div id="datepicker"></div>
<div id="resultdate">00/00/00</div>
<div id="resultdate_expectation">
<span>Aug</span>
<span>31</span>
<span>2018</span>
</div>
https://jsfiddle.net/alonsoct/qphza/464/
How can I show the date value separately?
Thanks

Answer 1

You can get the parts of the date from the datepicker's date attribute in the onSelect function:
$("#datepicker").hide();
$("#buttonHere").click(function() {
$("#datepicker").toggle();
});
$("#datepicker").datepicker({
onSelect: function(value, date) {
const months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
$('#resultdate_expectation span:eq(0)').html(months[date.selectedMonth]);
$('#resultdate_expectation span:eq(1)').html(date.selectedDay);
$('#resultdate_expectation span:eq(2)').html(date.selectedYear);
$("#datepicker").hide();
}
});
jsFiddle example

Answer 2

All you need is to set the dateFormat option properly:
dateFormat: "M d yy",
M - month name short
d - day of month (no leading zero)
yy - year (four digit)
See more: http://api.jqueryui.com/datepicker/#utility-formatDate
Based on your example, you did not specify if you wanted leading zero or not. I assumed not.
https://jsfiddle.net/Twisty/qphza/481/
$(function() {
// Set up datepicker toggle functionality
$("#datepicker").hide();
$("#buttonHere").click(function() {
$("#datepicker").toggle();
});
$("#datepicker").datepicker({
dateFormat: "M d yy",
onSelect: function(value, date) {
$('#resultdate').html(value);
$("#datepicker").hide();
}
});
});
Working as requested. Hope that helps.