Bootstrap datepicker disabling past dates without current date

Question

I wanted to disable all past date before current date, not with current date. I am trying by bootstrap datepicker library "bootstrap-datepicker" and using following code:

$('#date').datepicker({ 
    startDate: new Date() 
});

It works fine. But it is disabling date till today.

As example if today is 04-20-2013 and i disable past dates by setting startDate: new Date(). but I am able to select date from 04-21-2013.

UPDATED: i can solve it as following for UTC zone:

var d = new Date();
options["startDate"] = new Date(d.setDate(d.getDate() - 1));

or startDate: "+0d"

But these methods don't work when UTC is a day ahead. For my client in California that means at 5:00 pm my client can no longer select his local current date as a valid date. In order to fix this I am temporarily using startDate: "-1d", but of course before 5 that means yesterday is visible.

Has anyone come up with a better method for now as I do not want to tell users to put in a UTC date?

Midyear

Are you using Bootstrap 2.0.4+ jQuery 1.7.1+? – Praetor

I am using Bootstrap v2.2.1 and jQuery 1.8.1 – Midyear

Answer 1

var date = new Date();
date.setDate(date.getDate()-1);

$('#date').datepicker({ 
    startDate: date
});

Mears

if the timezone will changed in future, what will happen? – Midyear

I'm not entirely sure. You might want to take a look at this thread: Need to display local times over DST transitions using Javascript Date Object – Mears

i got TypeError: option startDate is not recognized! do you know the problem – Abase

Your Script was short to use, but it allows user to select yesterday's date. but this solution works. Hope helps. – Percy

is there anyway that this can be done dynamically and not set in the options? – Getupandgo

Answer 2

Use minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#date').datepicker({ 
    minDate: today
});

Sybarite

for simplicity use moment.js like minDate: moment() – Horoscopy

Just so future users are aware, this solution is for a different plugin ('bootstrap-datetimepicker'). – Cardigan

Answer 3

HTML

<input type="text" name="my_date" value="4/26/2015" class="datepicker">

JS

jQuery(function() {
  var datepicker = $('input.datepicker');

  if (datepicker.length > 0) {
    datepicker.datepicker({
      format: "mm/dd/yyyy",
      startDate: new Date()
    });
  }
});

That will highlight the default date as 4/26/2015 (Apr 26, 2015) in the calendar when opened and disable all the dates before current date.

Umbrella

Answer 4

use

startDate: '-0d'

Like

$("#datepicker").datepicker({
    startDate: '-0d',
    changeMonth: true
});

Vouge

Answer 5

You can use the data attribute:

<div class="datepicker" data-date-start-date="+1d"></div>

Awed

Answer 6

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

Policyholder

Answer 7

The solution is much simpler:

$('#date').datepicker({ 
    startDate: "now()" 
});

Try Online Demo and fill input Start date: now()

Quiberon

Just for info, startDate: "tomorrow" or startDate: "yesterday" also work if needed. – Bernice

Answer 8

<script type="text/javascript">
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    startDate: '-0d',
    autoclose: true,
})

Sonny

Could you explain why this should work and why it's a better solution than the accepted answer from 2 years ago? – Loquat

Answer 9

Here it is

 <script>
          $(function () {
              var date = new Date();
              date.setDate(date.getDate() - 7);

            $('#datetimepicker1').datetimepicker({
                maxDate: 'now',
                showTodayButton: true,
                showClear: true,
                minDate: date
            });
        });
    </script>

Declaration

Answer 10

Try it :

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

Irremeable

Answer 11

To disable past dates & highlight today's date:

$(function () {
    $('.input-daterange').datepicker({
        startDate : new Date(),
        todayHighlight : true
    });
});

To disable future dates & highlight today's date:

$(function () {
    $('.input-daterange').datepicker({
        endDate : new Date(),
        todayHighlight : true
    });
});

For more details check this out https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=startdate#quick-reference

Poulos

Answer 12

Disable all past date

<script type="text/javascript">
        $(function () {
            /*--FOR DATE----*/
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            //Date1
            $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
              format: 'dd-mm-yyyy',
              todayHighlight:'TRUE',
              startDate: today,
              endDate:0,
              autoclose: true
            });

        });
</script>

Disable all future date

 var date = new Date();
 var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

   //Date1
   $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
       format: 'dd-mm-yyyy',
       todayHighlight:'TRUE',
       minDate: today,
       autoclose: true
   });

Gillum

Answer 13

Please refer to the fiddle http://jsfiddle.net/Ritwika/gsvh83ry/

**With three fields having date greater than the **
<input type="text" type="text" class="form-control datepickstart" />
<input type="text" type="text" class="form-control datepickend" />
<input type="text" type="text" class="form-control datepickthird" />

var date = new Date();
 date.setDate(date.getDate()-1);
$('.datepickstart').datepicker({
 autoclose: true,
 todayHighlight: true,
 format: 'dd/mm/yyyy',
  startDate: date
});
$('.datepickstart').datepicker().on('changeDate', function() {
    var temp = $(this).datepicker('getDate');
    var d = new Date(temp);
  d.setDate(d.getDate() + 1);
  $('.datepickend').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d
}).on('changeDate', function() {
    var temp1 = $(this).datepicker('getDate');
    var d1 = new Date(temp1);
   d1.setDate(d1.getDate() + 1);
  $('.datepickthird').datepicker({
 autoclose: true,
 format: 'dd/mm/yyyy',
 startDate: d1
});
});
});

Zeph

Answer 14

You can simply add data attribute in html input tag:

In rails html :

<%= form.text_field :appointment_date, 'data-provide': 'datepicker', 'data-date-start-date': "+0d" %>

HTML :

<input data-provide="datepicker" data-date-start-date="+0d" type="text" name="appointment_date" id="appointment_date">

Antilepton

data-date-start-date="+0d" did it. Thanks – Darell

I am working on rails and it helped me, upvoted. Provided data:{ provide:'datepicker', 'date-start-date': "+1d"} for getting dates from tomorrow – Muliebrity

Answer 15

In html

<input class="required form-control" id="d_start_date" name="d_start_date" type="text" value="">

In Js side

<script type="text/javascript">
        $(document).ready(function () {
        var dateToday = new Date();
        dateToday.setDate(dateToday.getDate());

        $('#d_start_date').datepicker({
            autoclose: true,
            startDate: dateToday
        })

    });

Geehan

Answer 16

to disable past date just use :

  $('.input-group.date').datepicker({
       format: 'dd/mm/yyyy',
       startDate: 'today'
  });

Heartsick

Answer 17

The following worked for me

$('.input-group.date').datepicker({
     format: 'dd/mm/yyyy',
     startDate: new Date()
});

Museum

This does not answer the question. You should give an answer that fixes the problem, explain why it works, explain how it works, this way other people can learn. How did you come up with this answer? That is something you should include in your answers. Your answer is not helpful to other readers in it's current state. – Armored

Answer 18

It depends on what format you put on the datepicker So first we gave it the format.

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd;
    } 
    if(mm<10){
        mm='0'+mm;
    } 
    var today = yyyy+'-'+mm+'-'+dd; //Here you put the format you want

Then Pass the datepicker (depends on the version you using, could be startDate or minDate which is my case )

    //Datetimepicker
    $(function () {
        $('#datetimepicker1').datetimepicker({
            minDate: today, //pass today's date
            daysOfWeekDisabled: [0],
            locale: 'es',
            inline: true,
            format: 'YYYY-MM-DD HH:mm', //format of my datetime (to save on mysqlphpadmin)
            sideBySide: true
        });
    });

Electrotherapy

Answer 19

You can find your solution in this link below: https://codepen.io/ahmetcadirci25/pen/NpMNzJ

Thats work for me.

My code:

        var date = new Date();
        date.setDate(date.getDate());

        $('#datetimepicker1').datetimepicker({
            isRTL: false,
            format: 'dd.mm.yyyy hh:ii',
            autoclose: true,
            language: 'tr',
            startDate: date
        });

Supertanker

Answer 20

If your requirement is to disable the startDate and endDate dynamically based on one on another you can you this.

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date3').datepicker('getDate');
            if(date){
             $('#date2').datepicker('setEndDate', date);
                }
    });

        $('#date3').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date2').datepicker('getDate');
            if(date){
             $('#date3').datepicker('setStartDate', date);
                }
    });

If your requirement is just disabled past dates then you can use below snippet.

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true,
            startDate : new Date()
        })

If your requirement is just disabled future dates then you can use below snippet.

 $('#date2').datepicker({
                todayHighlight: true,
                autoclose: true,
                format: "dd/mm/yyyy",
                clearBtn : true,
                endDate : new Date()
            })

I hope it will help someone.

Grovergroves