Enable, Disable, and Customise Date Selection JQuery UI Datepicker

In this article, we are going to describe how to enable and disable custom dates in Datepicker using jquery and jquery UI with a Live demo and sample code.

A date-picker of jQuery UI is the most usable date-picker plugin while we are working on the customizable date field, it is used to provide a calendar to the user to select the date month from a Calendar. 

This date picker is used with an input text box so user selection of the date from the calendar is transferred to the textbox.

Here We will use the CDN link for different libraries and styles. for displaying any Jquery Ui widget, we need to use jquery and Jquery UI Either downloadable or CDN. We can also change the jquery

UI Theme But I am using the base default theme you can change it as you want.

we will discuss implementing the below-mentioned problem and their solution:

  • EX 01: Disabled Sunday and Friday
  • EX 02: Enabled Monday and Friday
  • EX 03: Disabled date from 27th Aug to 30th Aug 2023
  • EX 04: Disabled date from 26th Aug to 29th aug 2023 and 2nd September to 5th September
  • EX 05: Only Enable date from 26th Aug to 30th aug and 5th September
  • EX 06: Enable Month and years dropdown for the previous 100 years and current years
  • EX 07: Enable Month and years dropdown for the Next 100 years and current years
  • EX 08: Enable Month and years dropdown for the Next 100 years and the previous 100 years
  • EX 09: Disabled future date
  • EX 10: Disabled Past date
Tree directory structure  script With PHP

Make sure you have added the below required CDN to your projects:

        
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
        crossorigin="anonymous"></script>


    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
        
    

EX 04: Disabled date from 26th Aug to 29th aug 2023 and 2nd September to 5th September

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 04: Disabled date from 26th Aug to 29th aug 2023 and 2nd september to 5th september</h3>
                    <label for="datepicker_c4">Select date</label>
                    <input type="text" name="" id="datepicker_c4" class="form-control" placeholder="select date">
                </div>
            </div>
        
    

Related Post

jQuery:

        
        // Disabled date from 26th Aug to 29th aug 2023 and 2nd september to 5th september

        var disabledDates2 = ["27-08-2023", "27-08-2023", "28-08-2023", "29-08-2023", "02-09-2023", "02-09-2023", "03-09-2023", "04-09-2023", "05-09-2023"];
        $('#datepicker_c4').datepicker({
            beforeShowDay: function (date) {
                var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
                //var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [disabledDates2.indexOf(string) == -1]
            }
        });
        
    

jQuery:

        
        // Only Enable date from 26th Aug to 30th aug and 5th september
        var availableDates = ["26-8-2023", "27-8-2023", "28-8-2023", "29-8-2023", "2-9-2023", "2-9-2023", "3-9-2023", "4-9-2023", "5-9-2023",];

        function available(date) {
            dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
            if ($.inArray(dmy, availableDates) != -1) {
                return [true, "", "Available"];
            } else {
                return [false, "", "unAvailable"];
            }
        }

        $('#datepicker_c5').datepicker({ beforeShowDay: available });
        
    

EX 06: Enable Month and years dropdown for previous 100 years and current years

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 06: Enable Month and years dropdown for previous 100 years and current years</h3>
                    <label for="datepicker_c6">Select date</label>
                    <input type="text" name="" id="datepicker_c6" class="form-control" placeholder="select date">
                </div>
            </div>
        
    

jQuery:

        
        // Enable Month and years dropdown for previous 100 years

        $(function () {
            $("#datepicker_c6").datepicker({
                yearRange: "c-100:c+0",
                changeMonth: true,
                changeYear: true,
                maxDate: 0,
                dateFormat: "dd-mm-yy",
                duration: "fast"
            });
        });
        
    

EX 07: Enable Month and years dropdown for Next 100 years and current years

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 07: Enable Month and years dropdown for Next 100 years and current years</h3>
                    <label for="datepicker_c7">Select date</label>
                    <input type="text" name="" id="datepicker_c7" class="form-control" placeholder="select date">
                </div>
            </div>
        
    

jQuery:

        
        // Enable Month and years dropdown for Next 100 years
        $(function () {
            $("#datepicker_c7").datepicker({
                yearRange: "c+0:c+100",
                changeMonth: true,
                changeYear: true,
                dateFormat: "dd-mm-yy",
                duration: "fast"
            });
        });
        
    

jQuery:


EX 08: Enable Month and years dropdown for the Next 100 years and the previous 100 years

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 08: Enable Month and years dropdown for Next 100 years and previous 100 years</h3>
                    <label for="datepicker_c8">Select date</label>
                    <input type="text" name="" id="datepicker_c8" class="form-control" placeholder="select date">
                </div>
            </div>
        
    

EX 09: Disabled future date

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 09: Disabled future date</h3>
                    <label for="datepicker_c9">Select date of birth</label>
                    <input type="text" name="" id="datepicker_c9" class="form-control" placeholder="Date of birth">
                </div>
            </div>
        
    

jQuery

        
        //  Disabled future date 
        $(function () {
            $("#datepicker_c9").datepicker({ maxDate: new Date() });
        });
        
    

EX 01: Disabled Sunday and Friday

Add below html:

        
        <div class=" col-md-12 bg-light border p-3 my-3">
                <div class="form-group">
                    <h3> EX 01: Disabled sunday and Friday</h3>
                    <label for="datepicker_c1">Select date</label>
                    <input type="text" name="" id="datepicker_c1" class="form-control" placeholder="select date">
                </div>
</div>
        
    

EX 05: Only Enable date from 26th Aug to 30th aug and 5th September

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 05: Only Enable date from 26th Aug to 30th aug and 5th september</h3>
                    <label for="datepicker_c5">Select date</label>
                    <input type="text" name="" id="datepicker_c5" class="form-control" placeholder="select date">
                </div>
            </div>
        
    

EX 10: Disabled Past date

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 10: Disabled Past date</h3>
                    <label for="datepicker_c10">Select Appointment date</label>
                    <input type="text" name="" id="datepicker_c10" class="form-control" placeholder="Appointment date">
                </div>
            </div>
        
    

jQuery:

        
        //  Disabled Past date 
        $(function () {
            $("#datepicker_c10").datepicker({ minDate: new Date() });
 });
        
    

Customization:

You can customize the appearance and behavior of the datepicker using various options. Here are some common customization options:

        
        $(function() {
  $("#datepicker").datepicker({
    dateFormat: "dd-mm-yy", // Date format
    minDate: 0, // Minimum selectable date (0: today)
    maxDate: "+1y", // Maximum selectable date (+1y: one year from today)
    showOtherMonths: true, // Show dates from other months in the current view
    selectOtherMonths: true, // Allow selecting dates from other months
    numberOfMonths: 2, // Display multiple months in the datepicker
    showButtonPanel: true, // Show button panel with Today and Done buttons
    changeMonth: true, // Show month dropdown
    changeYear: true, // Show year dropdown
    showWeek: true, // Show week numbers
    firstDay: 1, // Set Monday as the first day of the week
    showAnim: "fadeIn", // Animation effect on datepicker show
    onSelect: function(dateText) {
      // Callback function when a date is selected
      console.log("Selected date: " + dateText);
    }
  });
});
        
    

jQuery:

        
        // Disabled sunday and Friday
        function disabledDays(date) {
            /* 0= sunday, 1= Monday, 2=tuesday, 3= wednesday, 4=thursday, 5=friday, 6=suturday */
            if (date.getDay() === 0 || date.getDay() === 5) {
                return [false, "closed", "Closed"]
            }

            else {
                return [true, "", "Available"]
            }

        }

        $("#datepicker_c1").datepicker({
            beforeShowDay: disabledDays,
            showButtonPanel: true,
            closeText: "close",
            showWeek: true,
            weekHeader: "Week",

        });
        
    

EX 02: Enabled Monday and Friday

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 02: Enabled Monday and Friday</h3>
                    <label for="datepicker_c2">Select date</label>
                    <input type="text" name="" id="datepicker_c2" class="form-control" placeholder="select date">
                </div>
</div>
        
    

jQuery:

        
        //Enabled Monday and Friday
        function enabledDays(date) {
            /* 0= sunday, 1= Monday, 2=tuesday, 3= wednesday, 4=thursday, 5=friday, 6=suturday */
            if (date.getDay() === 1 || date.getDay() === 5) {
                return [true, "", "Available"]
            }

            else {
                return [false, "", "Closed"]
            }

        }
        $("#datepicker_c2").datepicker({
            beforeShowDay: enabledDays
        });
        
    

EX 03: Disabled date from 27th aug to 30th aug 2023

HTML:

        
        <div class="col-md-12 bg-light  border p-3 my-3">
                <div class="form-group">
                    <h3> EX 03: Disabled date from 27th aug to 30th aug 2023</h3>
                    <label for="datepicker_c3">Select date</label>
                    <input type="text" name="" id="datepicker_c3" class="form-control" placeholder="select date">
                </div>
            </div>
        
    

jQuery:

        
        // Disabled date from 27th aug to 30th aug 2023
        var disabledDates1 = ["27-08-2023", "28-08-2023", "29-08-2023", "30-08-2023"];
        $('#datepicker_c3').datepicker({
            beforeShowDay: function (date) {
                var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
                //var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
                return [disabledDates1.indexOf(string) == -1]
            }
        });
        
    

Leave a comment