How to disable the future dates in datepicker using angularjs and jquery

问题

Hi I need to disable the future dates, I have tried in all the ways but I'm unable please let me know where I'm wrong.

<div class="input-group date">
     <input type="text" class="form-control pull-right" id="datepicker2" placeholder="Date of Join" ng-model="DateofJoining">
     <div class="input-group-addon"></div>
</div>

$('#datepicker2').datepicker({
    autoclose: true,
    maxDate: new Date()
});

I have even tried in angularjs also but wasn't able to disable them, please let me know how to disable the future dates.

I'm using bootstrap-datepicker.js for creating the datepicker.

回答1:

My primary suggestion is to use angular directive that is suggested by @krix

Anyway you can disable future dates based on your code input as follows

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

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css">
<link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>

<input class="datepicker" />

回答2:

I suggest using the datepicker from UI Bootstrap:

https://angular-ui.github.io/bootstrap/#!#datepicker

It's like the Bootstrap directives, but rebuilt for AngularJS.

回答3:

Use the AngularJS UI Bootstrap date picker:

http://www.dotnetlearners.com/blogs/view/206/Disable-future-dates-in-AngularJS-UI-bootstrap-datepicker.aspx

来源：https://stackoverflow.com/questions/42852160/how-to-disable-the-future-dates-in-datepicker-using-angularjs-and-jquery