It seems to be a common question of how do you get the day, month and year values from the jQuery UI datepicker ( and from the jQuery UI datetimepicker ) on selection. You may want to separate them down into 3 stored values, or output each value into a separate textbox or span.
It is really easy to do this by taking advantage of the onSelect OR onClose event.
<script>
$(function () {
/* setting the dayNames and monthNames is optional. This example just shows you how you can modify them or use the defaults */
$('#datePicker').datepicker({
dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
onSelect: function (dateText) {
/* get the selected date */
var selectedDate = $('#datePicker').datepicker('getDate');
/* get the array of day names and month names from the date picker */
var dayNames = $('#datePicker').datepicker('option', 'dayNames');
/* default dayNames can be accessed using $.datepicker._defaults.dayNames; */
var monthNames = $('#datePicker').datepicker('option', 'monthNames');
/* default monthNames can be accessed using $.datepicker._defaults.monthNames; */
/* assign are vars */
var date = selectedDate.getDate();
var day = dayNames[selectedDate.getDay()]; // taking the day name from the array of day names
var month = monthNames[selectedDate.getMonth()]; // taking the month name from the array of month names
var year = selectedDate.getFullYear();
/* update the ui */
$('#day').html(day + ' ' + date);
$('#month').html(month);
$('#year').html(year);
},
onClose: function (dateText) {
/* do something */
}
});
});
</script>
Where #day, #month, and #year can be any element. In my example I am just updating the html of a span element. You can grab the code for a full working demo from my github here
When using jQuery and jQuery UI from a CDN make sure you have the necessary fallbacks!
PLEASE LEAVE COMMENTS! I am always interested in hearing back from those who read my blog. Please leave a comment if you found this useful, want to suggest any changes to my code, or anything else! Thanks!
