How to fix the flickering issue of the jQuery Multi DatePicker

When you are implementing a jQuery multi DatePicker then you may see the flickering issue on date selection. So in this article, you will see how to fix the flickering issue for the multi select DatePicker.

In the previous article, we explained How to create a multi select DatePicker in jQuery.

Checkout more articles on JavaScript

• Include text in the middle of Date format with Moment.js
• Get the number of days between two dates using jQuery
• How to get yesterday’s, today’s, and tomorrow’s date using JavaScript
• Sort an array by Date in JavaScript
• Add days to a date in JavaScript

Flicker Issue

Flicker Issue - Select multiple Dates in jQuery DatePicker - Clue Mediator

Solution

Use the following jQuery code to fix the flicker issue in DatePicker. Add this code after initializing the Date picker.

$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function (id, dateStr) {
  var target = $(id);
  var inst = this._getInst(target[0]);
  if (target[0].multiDatesPicker != null) {
    inst.inline = true;
    $.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    target[0].multiDatesPicker.changed = false;
  } else {
    $.datepicker._selectDateOverload(id, dateStr);
    target.multiDatesPicker.changed = false;
  }
  this._updateDatepicker(inst);
};

Let’s use the above code in the example and see how it looks.

index.html

  <title>[Fixed] jQuery DatePicker Flickering issue - 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>[Fixed] jQuery DatePicker Flickering issue - <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();
      $.datepicker._selectDateOverload = $.datepicker._selectDate;
      $.datepicker._selectDate = function (id, dateStr) {
        var target = $(id);
        var inst = this._getInst(target[0]);
        if (target[0].multiDatesPicker != null) {
          inst.inline = true;
          $.datepicker._selectDateOverload(id, dateStr);
          inst.inline = false;
          target[0].multiDatesPicker.changed = false;
        } else {
          $.datepicker._selectDateOverload(id, dateStr);
          target.multiDatesPicker.changed = false;
        }
        this._updateDatepicker(inst);
      };
    });
  </script>

Output

Output - How to fix the flickering issue of the jQuery Multi DatePicker - Clue Mediator

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