forked from FezVrasta/bootstrap-material-datepicker
-
Notifications
You must be signed in to change notification settings - Fork 123
/
index.html
140 lines (125 loc) · 6.02 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html ng-app="mdDatetimePickerDemo">
<head>
<title>Angular-Material DateTimePicker</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet"
type="text/css"/>
<link rel="stylesheet" href="./css/material-datetimepicker.css" type="text/css"/>
</head>
<body ng-controller="DemoCtrl" layout="column">
<md-content class="md-padding">
<div layout="column">
<h1>Angular Material DatePicker</h1>
</div>
<md-card layout="column">
<md-toolbar class="md-primary">
<div class="md-toolbar-tools">
<h2>
<span>Datetime Pickers</span>
</h2>
</div>
</md-toolbar>
<md-card-content class="md-padding">
<p>
You can double click / double tap to make selections.
</p>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Datepicker Only</label>
<input time="false" date="true" mdc-datetime-picker type="text" id="date"
placeholder="Date"
ng-model="date" min-date="minDate" max-date="maxDate">
</md-input-container>
<div flex-gt-md="grow" flex-md="initial" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Timepicker Only (12-hour)</label>
<input mdc-datetime-picker date="false" time="true" type="text" id="time" short-time="true"
placeholder="Time"
min-date="minDate"
format="hh:mm a"
ng-model="time">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Timepicker Only (24-hour)</label>
<input mdc-datetime-picker date="false" time="true" type="text" id="time2"
placeholder="Time"
min-date="minDate"
format="HH:mm"
ng-model="time">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Date/Time Picker</label>
<input mdc-datetime-picker date="true" time="true" type="text" id="datetime"
placeholder="Date" show-todays-date
min-date="date"
ng-model="dateTime">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div layout="column" flex-gt-md="30" class="range">
<md-input-container>
<label>Start Date/Time</label>
<input mdc-datetime-picker date="true" time="true" type="text"
placeholder="Date"
max-date="dateTimeEnd"
ng-model="dateTimeStart"
/>
</md-input-container>
<md-input-container>
<label>End Date/Time</label>
<input mdc-datetime-picker date="true" time="true" type="text"
placeholder="Date"
min-date="dateTimeStart"
ng-model="dateTimeEnd"
/>
</md-input-container>
</div>
<div flex-gt-md="grow" ex-source-code target="div.range" title="DateRange Example"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<md-input-container flex-gt-md="30">
<label>Disable Certain Dates</label>
<input time="false" date="true" mdc-datetime-picker type="text" id="date-2"
placeholder="Date"
ng-model="date" min-date="minDate" max-date="maxDate" disable-dates="dates">
</md-input-container>
<div flex-gt-md="grow" ex-source-code target="input"></div>
</div>
<div layout-gt-md="row" layout="column" layout-align-gt-md="center center">
<div flex-gt-md="30">
<p>Test mdcDateTimeDialog Service</p>
<md-button class="md-raised md-primary" ng-click="displayDialog()">
Display Picker
</md-button>
<p ng-if="selectedDateTime">Date: {{selectedDateTime|date}}</p>
</div>
<div flex-gt-md="grow" ex-source-code target="button"></div>
</div>
</md-card-content>
</md-card>
</md-content>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
<script type="text/javascript" src="./beautifier.js"></script>
<script type="text/javascript" src="./js/angular-material-datetimepicker.js"></script>
<script type="text/javascript" src="./js/demo.js"></script>
</body>
</html>