03
Sep
2009
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.
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.
You can also use this example:
http://jqueryui.com/demos/datepicker/#alt-field
$(“#datepicker”).datepicker({
altField: ‘#datepicker_value’
});
[...] http://elementdesignllc.com/ POST: http://elementdesignllc.com/2009/09/jquery-ui-datepicker-inline-select/ JavaScript, JQuery, [...]
Excellent! you saved my life whit this post! I have days trying to do this but, any lights turned on.. hehe thank ypu very much! really usefull!
My markup is as follows:
My javascript is as follows:
$(function () {
$(“#datepicker”).datepicker({
altField: “#ChangeWeek”
});
});
I see that this works great and the input field ChangeWeek is being populated. However, I would like the form to be submitted when they select a new date. Why doesn’t the onchange get triggered? How would I accomplish the form submit when a new date is selected?
Bryan,
Send me an email with the HTML code so I can help you out.
Hi,
Thanks for the code, I needed to update to latest version of jquery to get the inline form to show.
Anyway, I just had a quick question.
I would like to format my date that appears in the input field to be more like
Wednesday 02 Feb
as an example – I know the js supports this but everytime I try to add it to the scipt you gave above it breaks it.
Thanks for any help
Sorry, should of added, I would like to format it like this
Format: “DD, d MM, yy”
thanks