How to diable previous dates in angular-io-datepicker

687 views Asked by At

I dont know much about the angular 4, can any tell me how to diable previous dates in angular-io-datepicker.

2

There are 2 answers

1
Marjorie Pickard On

*************I apologize, this is not the correct datepicker pluggin. But im leaving it just in case you want to switch

If this is the ui that you are using, check out the min date button.

http://angular-ui.github.io/bootstrap/#!#%2Fdatepicker

html:

<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>

angularjs:

$scope.toggleMin = function() {
    $scope.options.minDate = $scope.options.minDate ? null : new Date();
  };
1
Unsinkable Sam On

You should use the min input to be able to do this.
Simply add it on the input tag where you placed the mdDatepicker directive, then bind min to the date that separates the valid dates from the invalid ones.
In this example I used new Date() to be able to disable all the dates that are prior to the current date.

@Component({
  selector: 'app-root',
  template: `<input [mdDatepicker]="datePicker" [min]="minDate">
             <button [mdDatepickerToggle]="datePicker"></button>
             <md-datepicker #datePicker></md-datepicker>`,
})
export class AppComponent {
  minDate = new Date();
}