CODEWITHSUNDEEP
javascriptjquerydatepickerdatetimepickersmalot-datetimepicker
Vaidehi Hirani
Vaidehi Hirani

Reputation: 306

Disable specific dates dynamically using bootstrap datetime picker

I am using bootstrap datetimepicker(http://www.malot.fr/bootstrap-datetimepicker) but there is no method to disable specific dates after initialization of datetimepicker.

How to disable specific dates pro-grammatically using above datepicker?

Upvotes: 0

Views: 1555

Answers (2)

Joschi
Joschi

Reputation: 2974

It has that feature but it's not documented on their website. You can

  • set "datesDisabled" in the options when you create the picker
  • set the data attribute "data-dates-disabled"
  • call the picker method "setDatesDisabled"

Use your defined format for this.

Example for the first option:

$(".form_datetime").datetimepicker({
  format: 'yyyy-mm-dd hh:ii',
  datesDisabled: ["2018-04-28 12:00"]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

<input size="16" type="text" value="2018-04-27 14:45" readonly class="form_datetime">

Upvotes: 1

Vaidehi Hirani
Vaidehi Hirani

Reputation: 306

There is a method named setDatesDisabled() in new version of bootstrap datetime picker but it is not mentioned in documentation.

Upvotes: 0

Related Questions