How to make the jQuery Multisect DatePicker always open

Today we will show you how to make the jQuery Multiselect DatePicker always open. In the previous articles, we explained how to implement multiselect date picker and how to fix the flickering issue of the multiselect date picker.

Checkout more articles on JavaScript

• How to wait resize end event and then perform an action using JavaScript
• Open base64 Image in a new tab using JavaScript
• Create a multiline string in JavaScript
• How to convert a string into a camel case in JavaScript
• Automatically refresh or reload a page using JavaScript

Set DatePicker always open

Here, we have to add `div` element to render the Date Picker. Also set the `altField` attribute in the multi date picker.

<div id="datePick"></div>
<input type="text" id="altField">

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

That’s all we need for the always open DatePicker. Let’s run the following example using the above code.

index.html

  <title>jQuery Multisect DatePicker always open - 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>DatePicker always open - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h3>

  <div id="datePick"></div>
  <input type="text" id="altField">

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

Output

Run the HTML file and check the output in the browser.

Output - How to make the jQuery Multisect DatePicker always open - Clue Mediator

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