CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-datepicker
itskawsar
itskawsar

Reputation: 1242

Bootstrap datepicker disabling past dates without current date

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?

Upvotes: 42

Views: 196504

Answers (20)

SHIVA
SHIVA

Reputation: 706

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.

Upvotes: 0

akpp
akpp

Reputation: 798

The solution is much simpler:

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

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

Upvotes: 6

Tonay
Tonay

Reputation: 1

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
        });

Upvotes: 0

Sanjay Choudhary
Sanjay Choudhary

Reputation: 222

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">

Upvotes: 3

stupidboyRG
stupidboyRG

Reputation: 1

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
        });
    });

Upvotes: 0

Manjunath Bilwar
Manjunath Bilwar

Reputation: 2353

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

Upvotes: 4

B Kansara
B Kansara

Reputation: 1158

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
        })

    });

Upvotes: 1

user8127348
user8127348

Reputation: 11

The following worked for me

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

Upvotes: 0

Ritwika Das
Ritwika Das

Reputation: 199

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
});
});
});

Upvotes: 3

Drago Pun
Drago Pun

Reputation: 31

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
   });

Upvotes: 3

Lakhan
Lakhan

Reputation: 13216

Try it :

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

Upvotes: 4

Shaurya
Shaurya

Reputation: 144

to disable past date just use :

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

Upvotes: 0

NoWar
NoWar

Reputation: 37633

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>

Upvotes: 4

dcalvert
dcalvert

Reputation: 81

You can use the data attribute:

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

Upvotes: 8

Ryan Knol
Ryan Knol

Reputation: 304

use 

startDate: '-0d'

Like 

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

Upvotes: 19

Chaitanya K
Chaitanya K

Reputation: 1852

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

Upvotes: 5

Sebastian
Sebastian

Reputation: 2204

Use minDate

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

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

Upvotes: 25

Jignesh Gohel
Jignesh Gohel

Reputation: 6552

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.

Upvotes: 24

cfprabhu
cfprabhu

Reputation: 5352

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

Upvotes: 7

Tom Hartman
Tom Hartman

Reputation: 1203

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

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

Upvotes: 62

Related Questions