In this article I will explain with an example, how to call a JavaScript function on Selected Date event in jQuery DatePicker plugin.
The jQuery DatePicker plugin supports various events and the event which is raised when a Date is selected in the Calendar i.e. when User clicks on the Date a JavaScript function will be called.
HTML Markup and jQuery DatePicker implementation
The following HTML Markup consists of a TextBox which has been made Read Only.
Inside the jQuery document ready event handler, the TextBox has been applied with jQuery DatePicker plugin.
The jQuery DatePicker plugin has been assigned following properties:
showOn – button
The jQuery DatePicker will be shown only when the Button next to the TextBox is clicked.
buttonImageOnly – true
The Button will be an Image.
buttonImage – URL
The URL of the Image file to be displayed as Button.
dateFormat – dd/mm/yy
The jQuery DatePicker will set the selected Date in dd/MM/yyyy date format in TextBox.
changeMonth – true
The jQuery DatePicker will show the Month DropDown in Calendar.
changeYear – true
The jQuery DatePicker will show the Year DropDown in Calendar.
The jQuery DatePicker plugin has been assigned following event handlers:
onSelect
When a Date is selected, the onSelect event handler captures the Date value in String format and the JavaScript object of the HTML element i.e. the TextBox to which the jQuery DatePicker plugin is applied.
Inside the onSelect event handler, a JavaScript function is called which displays the value of the Selected Date and the ID of the TextBox using JavaScript Alert Message Box.
<input type="text" id="txtDate" name="SelectedDate" readonly="readonly" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#txtDate").datepicker({
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImageOnly: true,
buttonImage: 'images/calendar.gif',
dateFormat: 'dd/mm/yy',
onSelect: function (dateString, txtDate) {
DisplayDate("Selected Date: " + dateString + "\nTextBox ID: " + txtDate.id);
}
});
});
function DisplayDate(message) {
alert(message);
};
</script>
Screenshot
![jQuery DatePicker: Call function on Selected Date event]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
