Hey I would love to know what you think while reading my posts. Please comment!.

Manipulating the selected date of the jQuery UI datepicker

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.

    $(function () {
        /* setting the dayNames and monthNames is optional. This example just shows you how you can modify them or use the defaults */
            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);

            onClose: function (dateText) {
                /* do something */

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!

About Me

Tim James I'm Tim, a web applications developer from Glasgow, Scotland. Currently working for Kingfisher Systems Ltd, building bespoke systems within the Car Auction industry.

  • C#
  • VB.NET
  • .NET MVC
  • Web API
  • Razor
  • HTML5
  • CSS3
  • jQuery
  • WCF
  • SQL
  • knockout.js
  • Angularjs
  • AJAX
  • APIs
  • SignalR
Why not follow me on twitter? Follow me on Twitter