How to disable past dates from today in bootstrap datetimepicker?

Question

Unable to disable the past dates in bootstrap datetimepicker

HTML

<br/>
<div class="row">
    <div class="col-md-12">
         <h6>Datetimepicker</h6>

        <div class="form-group">
            <div class="input-group date" id="datetimepicker">
                <input type="text" class="form-control" />  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
            </div>
        </div>

    </div>
</div>

JavaScript

$(function () {
    $('#datetimepicker').datetimepicker();
 });

I also used startDate atrribute.But no use.

Fiddle here

score 53 · Accepted Answer · edited Mar 03 '17 at 04:44

53

startDate option use in bootstrap-datepicker same option not mentioned anywhere in bootstrap-datetimepicker/Options/ doc it has minDate option for that

 $(function () {
     $('#datetimepicker').datetimepicker({  
         minDate:new Date()
      });
 });

FIddle

edited Mar 03 '17 at 04:44

JH_

406
1
4
15

answered Nov 25 '15 at 11:28

Shailendra Sharma

6,976
2
28
48

picking a time by drill down is disabled. How to solve this ? check the fiddle example you have pointed above. – Pranesh Janarthanan Jan 12 '17 at 13:47
combination of previous date time is disable, you can choose future date time – Shailendra Sharma Jan 13 '17 at 05:09
Yesterday, i solved the issue. the point is new Date() will make the current HH:mm tt as sealing time. instead we should point the hours directly like 'var date = new Date(); var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0); var endDate = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate(), 23, 59, 59);' https://jsfiddle.net/65vaoqkw/7/#&togetherjs=zELfaP3wpz – Pranesh Janarthanan Jan 13 '17 at 06:17

score 12 · Answer 2 · edited Sep 12 '18 at 04:43

12

You can do it like this:

$(function () {
   var date = new Date();
   var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
   $('#datetimepicker').datetimepicker({ 
      minDate: today
   });
});

Another solution:

$(function () { 
  var date = new Date();
  date.setDate(date.getDate()-1);
  $('#datetimepicker').datetimepicker({ 
   startDate: date
  });
});

edited Sep 12 '18 at 04:43

Raviteja

3,399
23
42
69

answered Nov 25 '15 at 12:14

Atif Tariq

2,650
27
34

How to disable all dates after today? – flyingbird013 Sep 01 '20 at 14:11
Just change minDate to maxDate: today – Atif Tariq Sep 02 '20 at 13:22

score 5 · Answer 3 · edited Sep 12 '18 at 04:41

5

I have used your fiddle and change it with following code which disables all the past dates, its working perfectly.

Here is the Fiddle and Code -

$(function () {
   $('#datetimepicker').datetimepicker({
      minDate : moment()
   });
});

edited Sep 12 '18 at 04:41

Raviteja

3,399
23
42
69

answered Nov 25 '15 at 11:50

Manoj Salvi

2,639
1
17
21

How to disable past dates from today in bootstrap datetimepicker?

3 Answers3

Linked