Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How does jQuery Datepicker onchange event work?
To work with jQuery Datepicker onchange event, use the datepicker onSelect event. This event is triggered when a date is selected from the datepicker, allowing you to capture the selected date and perform actions when the date value changes.
The onSelect callback function receives the selected date as text and provides access to the datepicker instance. You can also manually trigger the change event to ensure compatibility with other event handlers.
Example
You can try to run the following code to learn how to work with jQuery Datepicker onchange ?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + ", Current Selected Value = " + this.value);
$(this).change();
}
}).on("change", function() {
display("Change event triggered");
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
</script>
</head>
<body>
Date: <input type='text' class='date' id="datepicker">
</body>
</html>
The output of the above code is ?
When you select a date from the datepicker: Selected date: 12/25/2023, Current Selected Value = 12/25/2023 Change event triggered
In this example, the onSelect function captures the selected date and displays it, while $(this).change() manually triggers the change event. The .on("change") handler responds to the change event, providing a complete solution for handling date selection changes.
Conclusion
The jQuery Datepicker onchange functionality is implemented using the onSelect event combined with manual change event triggering. This approach ensures that date selection changes are properly captured and can be handled by both datepicker-specific and general change event handlers.
17K+ Views
