Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit f861609

Browse files
crisbetokara
crisbeto
authored and
kara
committed
chore(datepicker): split and clean up demos (#9517)
* Splits up the datepicker demos into two: one for standard usage and one for validations. * Switches the datepicker demos to use controllerAs. * Adds examples for a couple more options.
1 parent c613591 commit f861609

File tree

5 files changed

+89
-100
lines changed

5 files changed

+89
-100
lines changed

‎src/components/datepicker/demoBasicUsage/index.html‎

Lines changed: 25 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,33 @@
1-
<div ng-controller="AppCtrl" ng-cloak>
2-
<md-content layout-padding>
3-
4-
<div layout-gt-xs="row">
5-
<div flex-gt-xs>
6-
<h4>Standard date-picker</h4>
7-
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
8-
</div>
9-
10-
<div flex-gt-xs>
11-
<h4>Disabled date-picker</h4>
12-
<md-datepicker ng-model="myDate" md-placeholder="Enter date" disabled></md-datepicker>
13-
</div>
1+
<md-content ng-controller="AppCtrl as ctrl" layout-padding ng-cloak>
2+
<div layout-gt-xs="row">
3+
<div flex-gt-xs>
4+
<h4>Standard date-picker</h4>
5+
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"></md-datepicker>
146
</div>
157

16-
<div layout-gt-xs="row">
17-
<div flex-gt-xs>
18-
<h4>Date-picker with min date and max date</h4>
19-
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
20-
md-min-date="minDate" md-max-date="maxDate"></md-datepicker>
21-
</div>
22-
23-
<div flex-gt-xs>
24-
<h4>Only weekends are selectable</h4>
25-
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
26-
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
27-
</div>
8+
<div flex-gt-xs>
9+
<h4>Disabled date-picker</h4>
10+
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" disabled></md-datepicker>
2811
</div>
12+
</div>
2913

30-
<div layout-gt-xs="row">
31-
<div flex-gt-xs>
32-
<h4>Only weekends within given range are selectable</h4>
33-
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
34-
md-min-date="minDate" md-max-date="maxDate"
35-
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
36-
</div>
37-
38-
<div flex-gt-xs>
39-
<h4>Opening the calendar when the input is focused</h4>
40-
<md-datepicker ng-model="myDate" md-placeholder="Enter date"
41-
md-open-on-focus></md-datepicker>
42-
</div>
14+
<div layout-gt-xs="row">
15+
<div flex-gt-xs>
16+
<h4>Opening the calendar when the input is focused</h4>
17+
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
4318
</div>
4419

45-
<div layout-gt-xs="row">
46-
<form name="myForm" flex-gt-xs>
47-
<h4>With ngMessages</h4>
48-
<md-datepicker name="dateField" ng-model="myDate" md-placeholder="Enter date"
49-
required md-min-date="minDate" md-max-date="maxDate"
50-
md-date-filter="onlyWeekendsPredicate"></md-datepicker>
51-
52-
<div class="validation-messages" ng-messages="myForm.dateField.$error">
53-
<div ng-message="valid">The entered value is not a date!</div>
54-
<div ng-message="required">This date is required!</div>
55-
<div ng-message="mindate">Date is too early!</div>
56-
<div ng-message="maxdate">Date is too late!</div>
57-
<div ng-message="filtered">Only weekends are allowed!</div>
58-
</div>
59-
</form>
60-
61-
<form name="myOtherForm" flex-gt-xs>
62-
<h4>Inside a md-input-container</h4>
63-
64-
<md-input-container>
65-
<label>Enter date</label>
66-
<md-datepicker ng-model="myDate" name="dateField" md-min-date="minDate"
67-
md-max-date="maxDate"></md-datepicker>
68-
69-
<div ng-messages="myOtherForm.dateField.$error">
70-
<div ng-message="valid">The entered value is not a date!</div>
71-
<div ng-message="required">This date is required!</div>
72-
<div ng-message="mindate">Date is too early!</div>
73-
<div ng-message="maxdate">Date is too late!</div>
74-
</div>
75-
</md-input-container>
76-
</form>
20+
<div flex-gt-xs>
21+
<h4>Date-picker that goes straight to the year view</h4>
22+
<md-datepicker ng-model="ctrl.myDate" md-current-view="year" md-placeholder="Enter date"></md-datepicker>
7723
</div>
24+
</div>
7825

79-
</md-content>
80-
</div>
26+
<div layout-gt-xs="row">
27+
<div flex-gt-xs>
28+
<h4>Custom calendar trigger</h4>
29+
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date" md-is-open="ctrl.isOpen"></md-datepicker>
30+
<md-button class="md-primary md-raised" ng-click="ctrl.isOpen = true">Open</md-button>
31+
</div>
32+
</div>
33+
</md-content>

‎src/components/datepicker/demoBasicUsage/script.js‎

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,4 @@
1-
angular.module('datepickerBasicUsage',
2-
['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
3-
$scope.myDate = new Date();
4-
5-
$scope.minDate = new Date(
6-
$scope.myDate.getFullYear(),
7-
$scope.myDate.getMonth() - 2,
8-
$scope.myDate.getDate());
9-
10-
$scope.maxDate = new Date(
11-
$scope.myDate.getFullYear(),
12-
$scope.myDate.getMonth() + 2,
13-
$scope.myDate.getDate());
14-
15-
$scope.onlyWeekendsPredicate = function(date) {
16-
var day = date.getDay();
17-
return day === 0 || day === 6;
18-
};
1+
angular.module('datepickerBasicUsage', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function() {
2+
this.myDate = new Date();
3+
this.isOpen = false;
194
});

‎src/components/datepicker/demoBasicUsage/style.css‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/datepicker/demoValidations/index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<md-content ng-controller="AppCtrl as ctrl" layout-padding ng-cloak>
2+
<div layout-gt-xs="row">
3+
<div flex-gt-xs>
4+
<h4>Date-picker with min date and max date</h4>
5+
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"
6+
md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate"></md-datepicker>
7+
</div>
8+
9+
<div flex-gt-xs>
10+
<h4>Only weekends are selectable</h4>
11+
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"
12+
md-date-filter="ctrl.onlyWeekendsPredicate"></md-datepicker>
13+
</div>
14+
</div>
15+
16+
<div layout-gt-xs="row">
17+
<div flex-gt-xs>
18+
<h4>Only weekends within given range are selectable</h4>
19+
<md-datepicker ng-model="ctrl.myDate" md-placeholder="Enter date"
20+
md-min-date="ctrl.minDate" md-max-date="ctrl.maxDate"
21+
md-date-filter="ctrl.onlyWeekendsPredicate"></md-datepicker>
22+
</div>
23+
24+
<form name="myForm" flex-gt-xs>
25+
<h4>Inside a md-input-container</h4>
26+
27+
<md-input-container>
28+
<label>Enter date</label>
29+
<md-datepicker ng-model="ctrl.myDate" name="dateField" md-min-date="ctrl.minDate"
30+
md-max-date="ctrl.maxDate"></md-datepicker>
31+
32+
<div ng-messages="myForm.dateField.$error">
33+
<div ng-message="valid">The entered value is not a date!</div>
34+
<div ng-message="required">This date is required!</div>
35+
<div ng-message="mindate">Date is too early!</div>
36+
<div ng-message="maxdate">Date is too late!</div>
37+
</div>
38+
</md-input-container>
39+
</form>
40+
</div>
41+
</md-content>

‎src/components/datepicker/demoValidations/script.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
angular.module('datepickerValidations', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function() {
2+
this.myDate = new Date();
3+
4+
this.minDate = new Date(
5+
this.myDate.getFullYear(),
6+
this.myDate.getMonth() - 2,
7+
this.myDate.getDate()
8+
);
9+
10+
this.maxDate = new Date(
11+
this.myDate.getFullYear(),
12+
this.myDate.getMonth() + 2,
13+
this.myDate.getDate()
14+
);
15+
16+
this.onlyWeekendsPredicate = function(date) {
17+
var day = date.getDay();
18+
return day === 0 || day === 6;
19+
};
20+
});

0 commit comments

Comments
 (0)