-->

how to restrict bootstrap date picker from future

2019-01-24 02:25发布

问题:

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

回答1:

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/



回答2:

Set endDate property to +0d

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

FIDDLE



回答3:

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



回答4:

Try this,

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

I used date picker from Git

Demo



回答5:

This code worked for me..

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


回答6:

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



回答7:

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


回答8:

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


回答9:

Try this:

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