Select multiple Dates in jQuery DatePicker

In this article, you will learn how to select multiple dates in jQuery DatePicker. There are so many libraries are available to implement the DatePicker but here we will show you how to implement the date picker for multiple date selection.

Checkout more articles on JavaScript / jQuery

• Divide an array in half using JavaScript
• How to preview selected image from input type file using jQuery
• Create a Modal Popup using jQuery
• Select or Deselect all Checkboxes using jQuery
• Bootstrap Colorpicker Example using JQuery

Demo Application

Output - Select multiple Dates in jQuery DatePicker - Clue Mediator

Steps to implement datepicker for multiple date selection

1. Add jQuery library for datepicker
2. Import datepicker CSS
3. Initialize the multiselect datepicker
4. Output

1. Add jQuery library for datepicker

Let’s add the following libraries to implement the datepicker.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dubrox/Multiple-Dates-Picker-for-jQuery-UI@master/jquery-ui.multidatespicker.js"></script>

2. Import datepicker CSS

To design the picker, use the following CSS links.

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">

3. Initialize the multiselect datepicker

First add the text input field to bind the datepicker.

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

Now initialize the datepicker for multiple dates selection.

<script>
  $(document).ready(function () {
    $('#datePick').multiDatesPicker();
  });
</script>

4. Output

Let’s combine all code together and see how it works.

index.html

  <title>Select multiple Dates in jQuery DatePicker - Clue Mediator</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/dubrox/Multiple-Dates-Picker-for-jQuery-UI@master/jquery-ui.multidatespicker.js"></script>

  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    input {
      width: 300px;
      padding: 7px;
    }

    .ui-state-highlight {
      border: 0 !important;
    }

    .ui-state-highlight a {
      background: #363636 !important;
      color: #fff !important;
    }
  </style>



  <h3>Select multiple Dates in jQuery DatePicker - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue
      Mediator</a></h3>
  <input type="text" id="datePick">

  <script>
    $(document).ready(function () {
      $('#datePick').multiDatesPicker();
    });
  </script>

Open the HTML page in browser and check the output.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂