jQuery UI Datepicker and datejs example code [javascript]

jQuery UI Datepicker and datejs example code

javascript

Here’s an example of how to use jQuery UI Datepicker with the datejs library:

<!DOCTYPE html>
<html>
<head>
	<title>Example</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
</head>
<body>
	<label for="datepicker">Choose a date:</label>
	<input type="text" id="datepicker">

	<script>
		$(document).ready(function(){
			// Set the date format for datepicker and datejs
			$.datepicker.setDefaults({
				dateFormat: 'dd/mm/yy'
			});
			Date.parseLocale = 'en';

			// Initialize the datepicker
			$("#datepicker").datepicker();

			// Get the selected date and parse it with datejs
			$("#datepicker").on("change", function(){
				var selectedDate = Date.parseExact($(this).val(), "d/M/yyyy");
				console.log(selectedDate.toString("dddd, MMMM d, yyyy"));
			});
		});
	</script>
</body>
</html>

In this example, we first include the necessary libraries and stylesheets: jQuery, jQuery UI, and datejs.

We then create an input element with an id of datepicker and a label that points to it.

We use the $.datepicker.setDefaults() method to set the date format for the datepicker to “dd/mm/yy”, which is the format used by datejs.

We also set the Date.parseLocale property of datejs to “en” to ensure that it uses the English language for parsing dates.

We then initialize the datepicker by calling the datepicker() method on the #datepicker element.

Finally, we attach an event listener to the change event of the #datepicker element to get the selected date and parse it with datejs using the Date.parseExact() method. We then log the formatted date string to the console.

Note that you can customize the date format and locale settings to suit your specific needs.

jQuery UI Datepicker and datejs example code

Other Article on Tag javascript

All Tags