CODEWITHSUNDEEP
jquerytwitter-bootstrapdatepickerbootstrap-datepicker
user2142786
user2142786

Reputation: 1482

how to restrict bootstrap date picker from future date

I want to restrict the date picker of bootstrap from taking future date.I just want to enable the dates up to today only.How can i achieve this.

Here is my code

<script>
  var FromEndDate = new Date();

   $(function(){
     $('.datepicker').datepicker({
       format: 'mm-dd-yyyy',
       endDate: FromEndDate, 
       autoclose: true
     });
   });
</script>

Can any body help regarding this

Upvotes: 26

Views: 106549

Answers (10)

Rachel
Rachel

Reputation: 23

$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        onRender:function(date){
            return date.valueOf() > FromEndDate.valueOf()?'disabled':'';
        }
     });
});

Upvotes: 1

MasoodRehman
MasoodRehman

Reputation: 715

Non of the above solutions work for me. After alot of searching and debugging finally I fix it. I am sharing my solution below, If someone like me facing the same problem can try the following solution.

var now = new Date();
$('[name=depdate]').datepicker({
    format: 'yyyy-mm-dd',
    onRender: function(date) {
        if(date.valueOf() > now.addDays(15).valueOf()) {
            return 'disabled';
        } else if(date.valueOf() < now.valueOf()) {
            return 'disabled';
        }
    }
})
.on('changeDate', function(){
    $(this).datepicker('hide');
}).data('datepicker');

Upvotes: 1

KATJ Srinath
KATJ Srinath

Reputation: 970

$(document).ready(function(){
    $(".datepicker").datepicker({
        endDate:'today'
    });
});

Adding this to your js user can only select date upto today's date and user cannot enter custom date value manually to the input element. If user enters a custom value then it will automatically change to the current date

Upvotes: 6

Nithya
Nithya

Reputation: 1121

This code worked for me..

$('#txtTo').datepicker({
    dateFormat: "dd/MM/yy",
    changeMonth: true,
    changeYear: true,
    ignoreReadonly: true,
    maxDate: 'now'
});

Upvotes: 7

Mark O Brian
Mark O Brian

Reputation: 11

You can do it using the option endDate. All the dates after the date specified in endDate option are disabled. If you want to disable dates after today use this in your input tag:

<input type="text" data-provide="datepicker" data-date-end-date="0d">

Source: https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#id5

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115212

Set endDate property to +0d

<script> 
    $(function() {
        $('.datepicker').datepicker({
            format: 'mm-dd-yyyy',
            endDate: '+0d',
            autoclose: true
        });
    });
</script>

FIDDLE

Upvotes: 29

Mohan kumar
Mohan kumar

Reputation: 1

Try this:

var date=new Date();
$('#datetimepicker').datetimepicker({
    format: 'MM/dd/yyyy',
    language: 'en',
    startDate : new Date('2015-01-01'),
    endDate :  date
});

Upvotes: -1

user2142786
user2142786

Reputation: 1482

Due to issue in plugin it is getting happened use this datepicker.js

http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js

Upvotes: 2

TJ Nicolaides
TJ Nicolaides

Reputation: 975

Here is a demo of a working solution:

http://jsfiddle.net/tjnicolaides/cjp7y/

<script>
$(function(){
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
});
</script>

edit: the version of Bootstrap Datepicker that supports startDate and endDate is here: https://github.com/eternicode/bootstrap-datepicker

The original project, which is the current top search result for the plugin, does not have that feature at this time: http://www.eyecon.ro/bootstrap-datepicker/

Upvotes: 57

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$(function () {
    $('.datepicker').datepicker({
        format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
});

I used date picker from Git

Demo

Upvotes: 6

Related Questions