jQuery Datepicker - JavaScript

jQuery Datepicker is a popular datepicker plugin for jQuery that allows users to easily select dates from a calendar interface. It is highly customizable and supports a range of options and methods to suit different use cases.

Installation

To use jQuery Datepicker, you need to first include jQuery on your webpage. You can either download jQuery and include it on your webpage directly or use a Content Delivery Network (CDN).

Once jQuery is included, you can then include the jQuery Datepicker plugin by downloading it from the official jQuery Datepicker website or by using a CDN.

<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-HaIBaoE8neW6W+LvKDz/KCErO9RY9v/C8AxFmg026EJmndTdHDz16Lr1YWBwJuaF" crossorigin="anonymous"></script>

<!-- include jQuery Datepicker -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0-rc.2/themes/smoothness/jquery-ui.css" integrity="sha384-QVAgxIMLl94uVYTv4QDzvlV7R+O9gs1VdRBHtbDSONBPITgOViZwdNiEy5J5pGN0" crossorigin="anonymous">
<script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.min.js" integrity="sha384-BfRxd7Xv+QKfVdPruxsGmHJx5HPtL5l5m5HS5er1Ct7DvB9Jyzt8+enlrArH6Mj/" crossorigin="anonymous"></script>

Initialization

To initialize the jQuery Datepicker, you need to call the datepicker() method on a jQuery object that targets the input element that you want to turn into a datepicker.

<input type="text" id="datepicker">

<script>
  $(function() {
    // initialize datepicker
    $("#datepicker").datepicker();
  });
</script>

By default, the datepicker will display when the input field is clicked. You can also configure it to display automatically when the page loads by setting the showOn option to "both".

<input type="text" id="datepicker">
 
<script>
  $(function() {
    // initialize datepicker to show on page load
    $("#datepicker").datepicker({ showOn: "both" });
  });
</script>

Configuration

The jQuery Datepicker plugin supports a range of configuration options that allow you to customize the appearance and behavior of the datepicker.

Date Format

The dateFormat option allows you to set the format of the date that is displayed in the input field.

<input type="text" id="datepicker">

<script>
  $(function() {
    // set date format
    $("#datepicker").datepicker({ dateFormat: "dd/mm/yy" });
  });
</script>

Default Date

The defaultDate option allows you to set the default date that is selected when the datepicker is displayed.

<input type="text" id="datepicker">

<script>
  $(function() {
    // set default date
    $("#datepicker").datepicker({ defaultDate: new Date(2021, 9, 1) });
  });
</script>

Min/Max Date

The minDate and maxDate options allow you to set the minimum and maximum dates that can be selected.

<input type="text" id="datepicker">

<script>
  $(function() {
    // set minimum and maximum dates
    $("#datepicker").datepicker({ minDate: new Date(2021, 9, 1), maxDate: new Date(2021, 9, 31) });
  });
</script>

Localization

The jQuery Datepicker plugin supports localization in a range of languages. You can set the language using the dateFormat option.

<input type="text" id="datepicker">

<script>
  $(function() {
    // set language to French
    $("#datepicker").datepicker({ dateFormat: "dd/mm/yy", regional: "fr" });
  });
</script>

Theming

The jQuery Datepicker plugin can be themed using CSS. You can either create your own custom CSS or use one of the pre-built themes that are available on the official jQuery Datepicker website.

<input type="text" id="datepicker">

<!-- include jQuery Datepicker theme -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0-rc.2/themes/smoothness/jquery-ui.css" integrity="sha384-QVAgxIMLl94uVYTv4QDzvlV7R+O9gs1VdRBHtbDSONBPITgOViZwdNiEy5J5pGN0" crossorigin="anonymous">

<script>
  $(function() {
    // set theme
    $("#datepicker").datepicker({ dateFormat: "dd/mm/yy", theme: "smoothness" });
  });
</script>

Callbacks

The jQuery Datepicker plugin supports a range of callbacks that allow you to execute custom code when certain events occur.

onSelect

The onSelect callback is executed when a date is selected.

<input type="text" id="datepicker">

<script>
  $(function() {
    // execute custom code when a date is selected
    $("#datepicker").datepicker({
      onSelect: function(date) {
        console.log("Date selected: " + date);
      }
    });
  });
</script>

onChangeMonthYear

The onChangeMonthYear callback is executed when the month or year is changed.

<input type="text" id="datepicker">

<script>
  $(function() {
    // execute custom code when the month or year is changed
    $("#datepicker").datepicker({
      onChangeMonthYear: function(year, month) {
        console.log("Month/Year changed: " + month + "/" + year);
      }
    });
  });
</script>

Conclusion

jQuery Datepicker is a powerful and highly customizable datepicker plugin for jQuery. It allows you to easily add a calendar interface to your webpage and supports a wide range of options and methods to suit different use cases. With its easy installation and customization, it is a great tool for any developer looking to enhance their date selection capabilities.