Bootstrap datetimepicker change disabled days after initialisation

Question

I try to change the disabled days after the datetimepicker is initialised.

I do this with an ajax call but I tried to simplify the code. I tried $('#datetimepicker').data("DateTimePicker").FUNCTION() for the FUNCTION I tried .disableddates, .setDisabledDates.

The first one erased the formerly declared disabled dates but did not add new ones.

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker-standalone.css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nl.js"></script>
    <script src="/Scripts/bootstrap-datetimepicker.min.js" ></script>
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class='col-sm-6'>
          <div class="form-group">
            <div class='input-group date' id='datetimepicker1'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
          </div>
        </div>
      </div>

      <div class="row">
        <button class="btn button-default" onclick="ChangeDate()" >Change disabled days</button>
      </div>
    </div>

    <script type="text/javascript">
      $(function () {
        $('#datetimepicker1').datetimepicker({
          locale:"nl",
          defaultDate: "2017-06-25",
          disabledDates: ['2017-06-26','2017-06-27','2017-06-28'],
          debug: false                    
        });
      });

      function ChangeDate(){
        alert('ChangeDate geklikt !');
        $('#datetimepicker1').data("DateTimePicker").disabledDates(['2017-06-21','2017-06-22']);
        alert('functie is uitgevoerd !');
      }
    </script>
  </body>
</html>

score 3 · Answer 1 · answered Jun 27 '17 at 22:02

As the docs states disabledDates:

Takes an [ string or Date or moment ] of values and disallows the user to select those days.

If you pass an array of strings each element should be compatible with datetimepicker format option (in your case the default L LT which is DD-MM-YYYY HH:mm for nl locale).

The issue is that the datepicker disabledDates function does:

moment('2017-06-21', 'DD-MM-YYYY HH:mm')

that parses the input string as 2021-06-20 (disabled instead of 2017-06-21).

You can simply convert your array string to an array of moment object using moment(String) parsing function (note that your input string is in ISO 8601 compliant format recognized by moment).

Here a working sample:

$('#datetimepicker1').datetimepicker({
  locale:"nl",
  defaultDate: "2017-06-25",
  disabledDates: ['2017-06-26','2017-06-27','2017-06-28'],
  debug: false
});

function ChangeDate(){
  //alert('ChangeDate geklikt !');
  $('#datetimepicker1').data("DateTimePicker").disabledDates([
    moment('2017-06-21'),
    moment('2017-06-22')
  ]);
  //alert('functie is uitgevoerd !');
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/locale/nl.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <button class="btn button-default" onclick="ChangeDate()" >Change disabled days</button>
  </div>
</div>

Another way to fix the issue is to add the extraFormats: ['YYYY-MM-DD'] option to datetimepicker config to tell the component how to parse correctly strings like '2017-06-21' and '2017-06-22'.

Great !!! thank you very much, it toke me days. But I get the dates from my json webservice like "2017-07-11T00:00:00.0000000", how can I use these? — Texellab, Jun 28 '17 at 07:37
You can parse your date using moment as described in the answer (`moment("2017-07-11T00:00:00.0000000"`) or add `extraFormats: ['YYYY-MM-DDTHH:mm:ss.SSSSSSS']`. — VincenzoC, Jun 28 '17 at 08:13
Sorry I dont get i to work. I get values from the webservice like '2017-06-29 00:00:00Z' the min and maxValues are set correctly but the disabledDates are not set. The disabledDates is an array with dates in the same format. In the datetimepicker I set the format to ` format: ("DD-MM-YYYY"), locale: 'nl',extraFormats: ['YYYY-MM-DDTHH:mm:ss.SSSSSSS'],` and after initialisation I do `jQuery('#datepicker2').data("DateTimePicker").disabledDates(pDisabledDays);` — Texellab, Jun 29 '17 at 10:28
Since you are getting values like `'2017-06-29 00:00:00Z'`, I suggest to use [`moment.utc`](http://momentjs.com/docs/#/parsing/utc/), in your case something like `moment.utc('2017-06-29 00:00:00Z')` (foreach element of the array). — VincenzoC, Jun 29 '17 at 10:31
do you mean I have to reformat the whole array to "DisabledDays":[moment.utc("2017-06-29 00:00:00Z"),moment.utc("2017-06-30 00:00:00Z"),.....] etc ? What format does the datetTimepicker accept in the array ? — Texellab, Jun 29 '17 at 10:38
Yes, this is what I suggested in my last comment (and in the first part of my answer). The datetimepicker tries to convert each string of the `disabledDates` array to moment using the format passed to `format` option (in your case default value `L LT` => `DD-MM-YYYY HH:mm`) and each format in the [`extraFormat`](https://eonasdan.github.io/bootstrap-datetimepicker/Options/#extraformats) option. — VincenzoC, Jun 29 '17 at 10:56

Bootstrap datetimepicker change disabled days after initialisation

1 Answers1