jQuery Datepicker

jQuery datepicker is a very simple, light weight and useful tool. In this article you will see how to create and disable dates in jQuery datepicker.

Create jQuery Datepicker

Inside the <head> tags you will have to include the following code.

<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

Then inside the <body> tags you can use textbox or div to display your datepicker.

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

<div id="date"></div>

Now you have to initialise the datepicker

Start your headless eCommerce
now. Read More

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

This will get your datepicker started.

You can add some features.

$(function() {
     $("#date").datepicker({
         changeYear: true,
         changeMonth:true,
         dateFormat: 'mm/dd/yy',
         minDate: new Date('01/01/1900'),
         maxDate: '+1Y'
     });
});

Disabling dates in datepicker

var dates = ["20/01/2018", "21/01/2018", "22/01/2018", "23/01/2018"];

function DisableDates(date) {
    var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
    return [dates.indexOf(string) == -1];
}

$(function() {
     $("#date").datepicker({
         beforeShowDay: DisableDates
     });
});

This will disable the dates mentioned in the array dates