📌  相关文章
📜  jQuery UI Datepicker(1)

📅  最后修改于: 2023-12-03 15:16:44.684000             🧑  作者: Mango

jQuery UI Datepicker

jQuery UI Datepicker is a plugin for the jQuery JavaScript library that provides a simple and customizable way to add date pickers to your HTML forms. It is widely used in web development to enhance the user experience by making it easier for users to select dates from a calendar, rather than entering them manually.

Features
  • Simple yet customizable datepicker widget with various options to customize the look and feel.
  • Support for different language localization (over 30 languages supported).
  • Date range selection.
  • Support for multiple instances on the same page.
  • Accessibility features (keyboard navigation and screen reader support).
Getting started

To use jQuery UI Datepicker, you need to include the jQuery library and jQuery UI library in your HTML file, along with the CSS and JavaScript files for the Datepicker plugin.

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery UI Datepicker</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
	<script src="//code.jquery.com/jquery-3.6.0.min.js"></script>
	<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
	<script>
		$(function() {
			$("#datepicker").datepicker();
		});
	</script>
</head>
<body>
	<label for="datepicker">Select a date:</label>
	<input type="text" id="datepicker">
</body>
</html>

In the above example, we've included the necessary JavaScript and CSS files, and initialized the datepicker widget by calling the .datepicker() method on the input element with the ID "datepicker".

Customizing the datepicker

One of the main benefits of jQuery UI Datepicker is its ability to be customized to suit your specific needs. Here are a few examples of customization that can be done:

Change the default date format

By default, the date format is set to "mm/dd/yy". However, you can change it to any valid date format using the dateFormat option. For example:

$( "#datepicker" ).datepicker({
  dateFormat: "dd-mm-yy"
});
Highlight weekends

You can use the beforeShowDay option to customize the display of calendar cells. Here's an example that highlights weekends:

$( "#datepicker" ).datepicker({
  beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day == 0 || day == 6)];
  }
});
Disable specific dates

If there are certain dates that you want to disable (e.g. holidays), you can use the beforeShowDay option. Here's an example that disables Christmas day:

$( "#datepicker" ).datepicker({
  beforeShowDay: function(date) {
    var month = date.getMonth() + 1;
    var day = date.getDate();
    return [(month == 12 && day == 25) ? false : true];
  }
});
Conclusion

jQuery UI Datepicker is a powerful and customizable datepicker plugin for web developers. Its simplicity and flexibility make it a popular choice for enhancing the user experience of HTML forms. With a little bit of jQuery knowledge, you can achieve great results with this plugin.