how to restrict bootstrap date picker from future date

Question

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

Have you tried this? http://stackoverflow.com/questions/12652492/twitter-bootstrap-datepicker-how-to-enable-only-specific-daterange, specifically: endDate: '+0d' — peinearydevelopment, Jan 07 '14 at 05:02
There's also a `maxDate:0` option as stated [here](http://dotnetlearners.com/blogs/jquery-date-picker-example-to-disable-future-dates). gl — Paulo Bueno, Jul 13 '19 at 14:38

TJ Nicolaides · Answer 1 · 2014-01-07T05:35:51.373

56

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/

edited Jan 07 '14 at 05:35

answered Jan 07 '14 at 05:13

TJ Nicolaides

965
6
11

i tried it but it is not working in my code. date picker is working fine but it is not restricting the future dates – user2142786 Jan 07 '14 at 05:17
Are you sure all your external libraries are linked correctly? Do you see any errors in your console when you try to activate the datepicker? – TJ Nicolaides Jan 07 '14 at 05:18
Also: what version of the Datepicker library are you using? – TJ Nicolaides Jan 07 '14 at 05:19
Are you able to link to a public URL where you can demonstrate this not working? – TJ Nicolaides Jan 07 '14 at 05:23
I think you may be using a version of the plugin that doesn't support the endDate property. The project was forked and I recommend replacing your version with the latest version from here: https://github.com/eternicode/bootstrap-datepicker/blob/master/js/bootstrap-datepicker.js – TJ Nicolaides Jan 07 '14 at 05:33
yes TJ Nicolaides i found it and now it is working fine...thanks for your support... :) – user2142786 Jan 07 '14 at 05:38
i used this one http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.js – user2142786 Jan 07 '14 at 05:39
This answer is incomplete because it is version specific.There's a `maxDate:0` propertie that can solve some cases for different versions of the plugin. gl – Paulo Bueno Jul 13 '19 at 14:40
I had to use `endDate: '-1d';` in order to sucessfully disable tomorrows date. Otherwise it would still allow me to select the 8th (if today's date was the 7th). – Dawson Irvine Mar 08 '22 at 03:04

Pranav C Balan · Answer 2 · 2016-11-10T07:46:16.347

28

Set endDate property to +0d

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

FIDDLE

edited Nov 10 '16 at 07:46

answered Jan 07 '14 at 05:03

Pranav C Balan

113,687
23
165
188

it is not working in my browser. i am using google chrome to check it. – user2142786 Jan 07 '14 at 05:29
@PranavRam Don't try to use GitHub as a CDN; it doesn't work. When viewing your fiddle in Chrome, it doesn't work and I see `Refused to execute script from 'https://raw.github.com/eternicode/bootstrap-datepicker/master/js/bootstrap-datepicker.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.` in the console. – Mark Amery Jan 17 '14 at 17:32
1

Thanks Pranav, it works like a charm. I tried lot of other options like maxDate: '0' etc. that failed to work. But your answer saves my day. – AKS Oct 28 '15 at 07:43

score 7 · Answer 3 · edited Jul 25 '19 at 09:39

7

This code worked for me..

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

edited Jul 25 '19 at 09:39

AndrewRMillar

608
1
7
17

answered Oct 12 '16 at 06:26

Nithya

1,029
2
14
27

Rohan Kumar · Answer 4 · 2014-01-07T05:09:49.563

6

Try this,

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

I used date picker from Git

Demo

edited Jan 07 '14 at 05:09

answered Jan 07 '14 at 05:04

Rohan Kumar

40,431
11
76
106

Try it like, var today = new Date(); $('.datepicker').datepicker({ startDate: new Date(today.getFullYear()-5, today.getMonth(), today.getDate()) }); For more details see the issue https://github.com/uxsolutions/bootstrap-datepicker/issues/485 – Rohan Kumar Feb 16 '17 at 07:03
Now the Datepicker startDate option will takes Date parameter see https://bootstrap-datepicker.readthedocs.io/en/stable/options.html#startdate – Rohan Kumar Feb 16 '17 at 07:04

score 6 · Answer 5 · edited Jul 25 '19 at 09:41

6

$(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

edited Jul 25 '19 at 09:41

AndrewRMillar

608
1
7
17

answered Dec 04 '15 at 07:54

KATJ Srinath

950
1
11
18

score 2 · Answer 6 · answered Jan 07 '14 at 05:40

2

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

answered Jan 07 '14 at 05:40

user2142786

1,484
9
41
74

score 1 · Answer 7 · edited Jul 25 '19 at 09:49

1

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

edited Jul 25 '19 at 09:49

AndrewRMillar

608
1
7
17

answered Nov 04 '14 at 06:32

Rachel

23
1
1
7

score 1 · Answer 8 · edited Jul 25 '19 at 09:42

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

score 1 · Answer 9 · answered Jul 03 '19 at 09:07

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

score -1 · Answer 10 · edited Apr 14 '16 at 07:40

-1

Try this:

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

edited Apr 14 '16 at 07:40

Draken

3,134
13
34
54

answered Apr 14 '16 at 07:03

Mohan kumar

1

how to restrict bootstrap date picker from future date

10 Answers10

Linked

Related