<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://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>
It was really a nice post and I was really impressed by reading this keep updating Angularjs Training Hyderabad
ReplyDelete