Disabling past dates in bootstrap datepicker

Bootstrap datepicker gained popularity among sites using bootstrap css framework in the recent times. You might have a use case where you want to disable past dates, future dates or restrict selectable date between two relative dates. For example when using datepicker for getting date-of-birth as, it is good not to allow future dates (or today – (minus) 18 years if your site only allows adults). This article will guide you in disabling past and future dates in bootstrap datepicker.

Bootstrap datepicker can be invoked using HTML5 tags and Javascript. This article covers both.

Disabling past dates using HTML5 Data API

You can use data-date-startdate=’yyyy-mm-dd’ to set a start date. This will disable dates before the specified start date and users will not be able to select dates preceding it. Refer below code snippet.

<div class="control-group">
<label class="control-label">Select Date</label>
<div class="controls input-append date form_date" data-date="" data-date-format="dd-mm-yyyy" data-date-startdate="2014-07-29" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input readonly="readonly" size="16" type="text" value="" />
</div>
</div>

You can set a dynamic date as startDate using PHP like this.

<?php 
$today = time(); $startdate = strtotime("+1 months", $today); 
$enddate = strtotime("+12 months", $today);
?>
//echo this date as value data-date-startdate like this
<div class="controls input-append date form_date" data-date="" data-date-format="dd-mm-yyyy" data-date-startdate="<?php echo $startdate; ?>" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
<input readonly="readonly" size="16" type="text" value="" /></div>

Disabling future dates using HTML5 tag

Its pretty straightforward now. You can now simply use data-date-enddate=’yyyy-mm-dd’ to disable dates that comes after the date mentioned as “enddate”.

<div class="control-group">
     <label class="control-label">Select Date</label>
     <div class="controls input-append date form_date" data-date="" data-date-format="dd-mm-yyyy" data-date-enddate="2014-07-29" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
          <input readonly="readonly" size="16" type="text" value="" /></div>
</div>

Disabling past dates using Javascript

If you don’t want to use HTML5 data API, you can use Javascript methods to do the trick for you. The code snippet below uses startDate to initialize least selectable date of the datepicker attached to the current element.

$('.form_date').datetimepicker({
         language:  'en',
         weekStart: 1,
         todayBtn:  1,
 	 autoclose: 1,
 	 todayHighlight: 1,
 	 startView: 2,
 	 minView: 2,
 	 forceParse: 0,
 	 startDate: '2014-08-15'     
});

Please note that I have used form_date as a class name on the input text box used for the datepicker, which is why I used $(‘.form_date’).datetimepicker for attaching the datepicker to the input box. You can use your own class name. Use #idname if you are reffering the element by ID.

ALSO READ  Integrate Google Maps to your Address Form

Disabling future dates using Javascript

Again, you can simply replace startDate by endDate method to set the maximum selectable date in your datepicker. Here is the code.

$('.form_date').datetimepicker({
        language:  'en',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		minView: 2,
		forceParse: 0,
		startDate: '2014-08-01',
		endDate: '2014-08-15'

    });

Specifying dynamic start date and end date

Hard-coding date will not actually be useful in the actual application. You might want to set startDate as today, tomorrow or next week. To do this you can simply replace the actual date with

  • ‘+1d’ for today
  • ‘+1w’ for a week from now
  • ‘+1m’ for a month from now
  • ‘+1y’ for a year from now

This is my personal favorite feature of the plugin because calculating a future date using Javascript date function is serious a pain. This would save a lot of your time.

8 Comments

  1. Prateek September 14, 2015
    • Nadin October 12, 2015
  2. osman January 21, 2016
  3. osman January 21, 2016
    • Narendran Parivallal January 21, 2016
  4. anita August 31, 2016
  5. Rinky August 31, 2016
  6. andile November 11, 2016

Leave a Reply