jQuery UI Datepicker Inline Select

It is well documented on the jQuery UI site on how to take a value from Datepicker when calling it from an input field. However when embedding Datepicker on a page (associating it with a div instead of an input field), you have to add a small amount of code to easily capture values from it.

Inline Datepicker Demo

The key component to making it work is using the onSelect event. Here is the jQuery code, with “#datepicker” as a div:

$("#datepicker").datepicker({
   onSelect: function(dateText, inst) {
      $("#datepicker_value").val(dateText);
   }
});

“#datepicker_value” is an input field that is updated every time the user selects a different date. This input field can be easily added to any form for submit. Visit the Datepicker demo page for a working example.