Using Angular Material DatePicker control in AngularJS

Last Reply one year ago By dharmendr

Posted one year ago

hi all

please help, i new to Angular 

i have added datetime control in html like

<md-form-field>
    <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">
    <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
    <md-datepicker #picker></md-datepicker>
</md-form-field>

but it is not reflecting in the form and how to do the validation for dates Like it Not Accept future Dates 

please help me
 
thanks and regards
 
siddu
Posted one year ago

Hi sanvi,

For not not accepting future Dates use md-max-date.

Refer the below example.

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<script type="text/javascript">
    var app = angular.module('MyApp', ['ngMaterial']);
    app.controller('MyController', function ($scope) {
        $scope.data = {
            date: new Date()
        };
        $scope.submit = function () {
            $scope.data.dateString = moment($scope.data.date).format("DD/MM/YYYY");
        }
        $scope.maxDate = new Date();
    }).run();
</script>
<div ng-app="MyApp" ng-controller="MyController">
    <md-datepicker ng-model="data.date" md-placeholder="Choose a date" md-max-date="maxDate"></md-datepicker>
    <md-button ng-click="submit()" class="md-primary" type="button">Submit</md-button>
    <p>
        Selected Date is : {{data.dateString}}</p>
</div>

Demo