javascript - How to set maxdate and mindate in uib-datepicker - Stack Overflow

admin管理员组

文章数量:1330917

Below is my Controller and html code where I'm implementing date and can someone explain me how to add maxdate and mindate to below code.

app.controller('viewfullproductionsummaryController', function ($scope, productionService, usSpinnerService) {
    $scope.open1 = function () { $scope.popup1.opened = true; };
    $scope.popup1 = { opened: false };
    $scope.data = {};
    $scope.data.ProductionReportDate = new Date();
  });

<div class="col-md-2 inputGroupContainer">
   <div class="input-group">
      <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
      <input type="text" class="form-control" uib-datepicker-popup="dd-MMM-yyyy" ng-model="data.ProductionReportDate" is-open="popup1.opened" required close-text="Close" />
   </div>
</div>

Below is my Controller and html code where I'm implementing date and can someone explain me how to add maxdate and mindate to below code.

app.controller('viewfullproductionsummaryController', function ($scope, productionService, usSpinnerService) {
    $scope.open1 = function () { $scope.popup1.opened = true; };
    $scope.popup1 = { opened: false };
    $scope.data = {};
    $scope.data.ProductionReportDate = new Date();
  });

<div class="col-md-2 inputGroupContainer">
   <div class="input-group">
      <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
      <input type="text" class="form-control" uib-datepicker-popup="dd-MMM-yyyy" ng-model="data.ProductionReportDate" is-open="popup1.opened" required close-text="Close" />
   </div>
</div>

• javascript
• angularjs
• html

Share Improve this question Follow edited Feb 15, 2017 at 20:32 Ranger asked Feb 15, 2017 at 20:25 RangerRanger 12933 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use maxDate and minDate in datepicker options.

According to documentation

to configure the uib-datepicker you need to create an object in Javascript with all the options and use it on the datepicker-options attribute

so in your html

<input type="text" class="form-control" uib-datepicker-popup="dd-MMM-yyyy" ng-model="data.ProductionReportDate" is-open="popup1.opened" datepicker-options="options" required close-text="Close" />

and in your controller

$scope.options = {
      minDate: new Date(), // set this to whatever date you want to set
    }

Have a look at this plunker

In AngularJS you can set a series of dateOptions such as dateMin, dateMax for the uib-datepicker

Check this plunker taken from this thread

You can do it with tag it self

In controller

$scope.minDate = new Date();

In view

 min-date="minDate" // add in uib-input

Just tested and Works fine

本文标签： javascriptHow to set maxdate and mindate in uibdatepickerStack Overflow