- Angular Material Tutorial
- Angular Material - Home
- Angular Material - Overview
- Environment Setup
- Angular Material - Autocomplete
- Angular Material - Bottom Sheet
- Angular Material - Cards
- Angular Material - Widgets
- Angular Material - Layouts
- Angular Material - Inputs
- Angular Material - Icons
- Angular Material - Grids
- Angular Material - SideNav
- Angular Material - Fab Speed Dial
- Angular Material - Subheaders
- Angular Material - Swipe
- Angular Material - Switches
- Angular Material - Themes
- Angular Material - Toasts
- Angular Material - Typography
- Angular Material - Virtual Repeat
- Angular Material - WhiteFrame
- Angular Material Useful Resources
- Angular Material - Quick Guide
- Angular Material - Useful Resources
- Angular Material - Discussion
Angular Material - DatePicker
The md-datepicker, an Angular Directive, is an input control to select a date and supports ngMessages for input validation.
Attributes
The following table lists out the parameters and description of the different attributes of md-datepicker.
Sr.No | Parameter & Description |
---|---|
1 | * ng-model This component’s model expects a JavaScript Date object. |
2 | ng-change The expression evaluated when the model value changes. |
3 | md-min-date The expression representing a min date (inclusive). |
4 | md-max-date The expression representing a max date (inclusive). |
5 | md-date-filter The function expecting a date and returning a boolean and determines whether it can be selected or not. |
6 | md-placeholder The date input placeholder value. |
7 | ng-disabled This determines whether the datepicker is disabled. |
8 | ng-required This determines whether a value is required for the datepicker. |
Example
The following example shows the use of md-datepicker directive and also the uses of datepicker.
am_datepicker.htm
<html lang = "en"> <head> <link rel = "stylesheet" href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script> <script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script> <style> .datepickerdemo md-content { padding-bottom: 200px; } .datepickerdemo .validation-messages { font-size: 11px; color: darkred; margin: 10px 0 0 25px; } </style> <script language = "javascript"> angular .module('firstApplication', ['ngMaterial','ngMessages']) .controller('dateController', dateController); function dateController ($scope) { $scope.myDate = new Date(); $scope.minDate = new Date( $scope.myDate.getFullYear(), $scope.myDate.getMonth() - 2, $scope.myDate.getDate()); $scope.maxDate = new Date( $scope.myDate.getFullYear(), $scope.myDate.getMonth() + 2, $scope.myDate.getDate()); $scope.onlyWeekendsPredicate = function(date) { var day = date.getDay(); return day === 0 || day === 6; } } </script> </head> <body ng-app = "firstApplication"> <div class = "datepickerdemo" ng-controller = "dateController as ctrl" layout = "column" ng-cloak> <md-content> <h4>Standard Date Picker</h4> <md-datepicker ng-model = "myDate" md-placeholder = "Enter date"></md-datepicker> <h4>Disabled Date Picker</h4> <md-datepicker ng-model = "myDate" md-placeholder = "Enter date" disabled></md-datepicker> <h4>Date-picker with min and max dates</h4> <md-datepicker ng-model = "myDate" md-placeholder = "Enter date" md-min-date = "minDate" md-max-date = "maxDate"></md-datepicker> <h4>Date-picker with only selectable weekends</h4> <md-datepicker ng-model = "myDate" md-placeholder = "Enter date" md-date-filter = "onlyWeekendsPredicate"></md-datepicker> <h4>Date-picker with only selectable weekends in a range</h4> <md-datepicker ng-model = "myDate" md-placeholder = "Enter date" md-min-date = "minDate" md-max-date = "maxDate" md-date-filter = "onlyWeekendsPredicate"></md-datepicker> <h4>Date-picker with validation mesages</h4> <form name = "myForm"> <md-datepicker name = "dateField" ng-model = "myDate" md-placeholder = "Enter date" required md-min-date = "minDate" md-max-date = "maxDate" md-date-filter = "onlyWeekendsPredicate"></md-datepicker> <div class = "validation-messages" ng-messages = "myForm.dateField.$error"> <div ng-message = "valid">The entered value is not a date!</div> <div ng-message = "required">This date is required!</div> <div ng-message = "mindate">Date is too early!</div> <div ng-message = "maxdate">Date is too late!</div> <div ng-message = "filtered">Only weekends are allowed!</div> </div> </form> </md-content> </div> </body> </html>
Result
Verify the result.