Mastering jQuery Date Picker: Simplify Your Date Selection

jquery date picker validation

Including jQuery date picker validation CDN

To use jQuery date picker validation, you need to include the necessary CDN (Content Delivery Network) files in your HTML document. The CDN ensures that the required JavaScript and CSS files are loaded from the external server. Simply add the following lines to your HTML file:

<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.js"></script>

The Versatility of jQuery UI Date Picker

The jQuery UI Date Picker offers a wide range of features for selecting dates in web applications. It provides an intuitive user interface, allowing users to easily navigate and choose dates from a calendar view. Some of its key features include:

  • Date range selection: Users can select a single date or a range of dates depending on the configuration.
  • Localization: The date picker supports localization, enabling the display of month and day names in different languages.
  • Customization: You can customize the appearance and behavior of the date picker to match your application’s design and requirements.
  • Inline and pop-up modes: The date picker can be displayed inline within the page or as a pop-up when triggered by an input field.

Formatting Dates with HTML

The jQuery UI Date Picker allows you to specify the format in which dates are displayed and parsed. You can use various format options such as “dd-mm-yy” for day, month, and year, or “yy-mm-dd” for year, month, and day. By applying the appropriate format in the input field, the date picker will automatically adjust to match the specified format.

  1. Basic Date Picker:
   <input type="text" id="datepicker">

   <script>
     $(document).ready(function() {
       $("#datepicker").datepicker();
     });
   </script>
jquery date picker

This example initializes a basic date picker on an input field with the ID “datepicker”. Users can click on the input field to select a date from the calendar.

  1. Date Range Selection:
   <input type="text" id="start-date">
   <input type="text" id="end-date">

   <script>
     $(document).ready(function() {
       $("#start-date").datepicker({
         dateFormat: "dd-mm-yy",
         onSelect: function(selectedDate) {
           $("#end-date").datepicker("option", "minDate", selectedDate);
         }
       });

       $("#end-date").datepicker({
         dateFormat: "dd-mm-yy",
         onSelect: function(selectedDate) {
           $("#start-date").datepicker("option", "maxDate", selectedDate);
         }
       });
     });
   </script>
jquery date picker

This example demonstrates a date range selection using two input fields. The “start-date” field defines the minimum date selectable for the “end-date” field, and vice versa.

  1. Localization:
   <input type="text" id="datepicker">

   <script>
     $(document).ready(function() {
       $("#datepicker").datepicker($.datepicker.regional["fr"]); // Display the date picker in French
     });
   </script>
jquery date picker

In this example, the date picker is displayed in French by specifying the regional settings using $.datepicker.regional["fr"]. You can replace “fr” with the appropriate language code for your desired localization.

  1. Inline Date Picker:
   <div id="datepicker"></div>

   <script>
     $(document).ready(function() {
       $("#datepicker").datepicker({
         inline: true
       });
     });
   </script>
jquery date picker

This example shows an inline date picker, where the calendar is displayed directly on the page instead of being attached to an input field. The selected date can be captured using event handlers or by accessing the date picker’s API.

  1. Date Range with Custom Range Selection:
   <input type="text" id="start-date">
   <input type="text" id="end-date">

   <script>
     $(document).ready(function() {
       $("#start-date, #end-date").datepicker({
         dateFormat: "dd-mm-yy",
         rangeSelect: true
       });
     });
   </script>
jquery date picker

This example extends the date range selection by enabling the “rangeSelect” option. Users can select a start date and an end date by clicking and dragging on the calendar.

  1. Restricting Date Range:
   <input type="text" id="datepicker">

   <script>
     $(document).ready(function() {
       $("#datepicker").datepicker({
         minDate: new Date(2023, 0, 1), // Restrict to dates after 1st January 2023
         maxDate: new Date(2023, 11, 31) // Restrict to dates before 31st December 2023
       });
     });
   </script>
jquery date picker
jquery date picker

In this example, the date picker is configured to allow selection only within a specific date range. The “minDate” and “maxDate” options are set to restrict dates before 1st January 2023 and after 31st December 2023, respectively.

You can try this jQuery UI Date Picker CDN also:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

In this example, we initialize the date picker on an input field with the ID “datepicker.” When the page loads, the input field will be transformed into a date picker, allowing users to select dates seamlessly.

By leveraging the power of jQuery UI Date Picker, you can enhance your web application with an elegant and user-friendly date selection feature. It simplifies the process of capturing and validating dates, making it an indispensable tool for any web developer.

Remember to explore the official documentation and additional resources to further unlock the potential of jQuery UI Date Picker in your projects.


Our Recommendation

Avatar of Akhand Pratap Singh

Akhand Pratap Singh

Greetings and a warm welcome to my website! I am Akhand Pratap Singh, a dedicated professional web developer and passionate blogger.

Related Post

Leave a Comment





Newsletter

Subscribe for latest updates

We don't spam.

Loading

Categories