This repository has been archived by the owner on Sep 19, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdatetime-local-input.html
197 lines (163 loc) · 5.7 KB
/
datetime-local-input.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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
<link rel="import" href="../paper-input/paper-input-behavior.html">
<link rel="import" href="../iron-input/iron-input.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-input/paper-input-error.html">
<link rel="import" href="datetime-local-polyfill.html">
<!--
`<datetime-local-input>` is a paper-input for datetime-local that follows the Material Design styling. It has a customizable error message, label, and initial datetime-local value. The datetime-local value should have hours (in 24-hour format) and minutes but no seconds.
<datetime-local-input error-message="halp!" label="your date" value="2016-01-01T14:00"></datetime-local-input>
### Validation
The input is validated onInput if the component is `required` and uses `auto-validate`.
To override the validation behavior use your own `_getValidity` method. It uses either
native datetime-local input or a polyfill depending on browser support.
### Styling
See `Polymer.PaperInputContainer` for a list of custom properties used to
style this element.
@demo demo/index.html
-->
<dom-module id="datetime-local-input">
<style>
/* forcing the hidden attribute here since Chrome doesn't always respect it */
*[hidden] {
display: none;
}
</style>
<template>
<paper-input-container id="container"
no-label-float="[[noLabelFloat]]"
invalid="[[invalid]]"
always-float-label>
<label hidden$="[[!label]]">[[label]]</label>
<!-- This supports the native datetime-local input -->
<input is="iron-input"
class="paper-input-input"
type="datetime-local"
id="input"
hidden$="[[_polyfill]]"
required$="[[required]]"
disabled$="[[disabled]]"
aria-labelledby$="[[_ariaLabelledBy]]"
aria-describedby$="[[_ariaDescribedBy]]"
bind-value="{{value}}"
name$="[[name]]"
autofocus$="[[autofocus]]"
inputmode$="[[inputmode]]"
inavlid="{{invalid}}"
readonly$="[[readonly]]">
<!-- This is the polyfill for datetime-local input -->
<datetime-local-polyfill class="paper-input-input"
id="input"
hidden$="[[!_polyfill]]"
aria-labelledby$="[[_ariaLabelledBy]]"
aria-describedby$="[[_ariaDescribedBy]]"
datetime="{{value}}"
invalid="{{invalid}}"
required="[[required]]">
</datetime-local-polyfill>
<template is="dom-if" if="[[errorMessage]]">
<paper-input-error id="error">[[errorMessage]]</paper-input-error>
</template>
</template>
</dom-module>
<script>
(function() {
'use strict';
Polymer ({
is: 'datetime-local-input',
behaviors: [
Polymer.IronFormElementBehavior,
Polymer.PaperInputBehavior
],
properties: {
/**
* error message for when validation fails
*/
errorMessage: {
type: String,
value: "Please provide a full date"
},
/**
* input label
*/
label: {
type: String,
value: "Date"
},
/**
* datetime-local value. By default, the value will be the current time.
*/
value: {
type: String,
notify: true,
value: function() {
return moment().format('YYYY-MM-DDTHH:mm');
},
observer: 'validate'
},
/**
* Directs whether the polyfill is needed
*/
_polyfill: {
type: Boolean,
value: function() {
return this._setPolyfill();
}
}
},
/**
* Overriden from Polymer.PaperInputBehavior
*/
get _focusableElement() {
return this.$$("#input");
},
/**
* Check that the datetime-local value matches the expected datetime-local
* format. If any of the datetime-local input was blank, this will fail.
*
* @return {Boolean} the validity of the component
*/
validate: function() {
var datetime = this.value,
valid = true;
// Empty, non-required input is valid.
if (!this.required && datetime == '') {
} else {
var datetimeExp = /\d{4}-\d{2}-\d{2}T\d{2}\:\d{2}/;
if (!datetimeExp.test(datetime))
valid = false;
}
// when validity changes update invalid and the addon
if (valid == this.invalid) {
this.invalid = !valid;
this.$.container.updateAddons({
inputElement: this.$$("#input"),
value: this.value,
invalid: !valid
})
}
return valid;
},
/**
* Check the browser to see if datetime-local is supported
*
* @return {Boolean} true if support exists for datetime-local
*/
_setPolyfill: function() {
return !Modernizr.inputtypes['datetime-local'];
},
ready: function() {
// If there's an initial input, validate it.
if (this.value)
this.validate(this.value);
// set the tabindex to 1 for the polyfill
if (this._setPolyfill()) {
this.setAttribute('tabindex', 1);
}
}
});
})();
</script>
<script src="../moment/moment.js"></script>
<script src="modernizr.js"></script>