Skip to content

Commit 9b6fb24

Browse files
patrinhani-ciandtpatrinhani-ciandt
committed
Fixes #2 
1 parent 7459253 commit 9b6fb24

File tree

5 files changed

+107
-109
lines changed

5 files changed

+107
-109
lines changed

‎bower.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@
2323
],
2424
"dependencies": {
2525
"polymer": "Polymer/polymer#^1.1.0",
26-
"paper-input": "PolymerElements/paper-input#~1.0.15",
27-
"paper-icon-button": "PolymerElements/paper-icon-button#~1.0.3",
26+
"paper-input": "PolymerElements/paper-input#^1.1.15",
27+
"paper-icon-button": "PolymerElements/paper-icon-button#^1.1.2",
2828
"moment": "~2.10.6",
29-
"paper-date-picker": "bendavis78/paper-date-picker#~1.0.3",
30-
"paper-dialog": "PolymerElements/paper-dialog#~1.0.2",
31-
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#~1.0.6"
29+
"paper-date-picker": "bendavis78/paper-date-picker#^1.1.4",
30+
"paper-dialog": "PolymerElements/paper-dialog#^1.1.0",
31+
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.1.7"
3232
},
3333
"devDependencies": {
34-
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
34+
"iron-component-page": "PolymerElements/iron-component-page#^1.1.7",
3535
"web-component-tester": "*"
3636
}
3737
}

‎demo/index.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@
1616
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
1717
<link rel="import" href="../../paper-button/paper-button.html">
1818
<link rel="import" href="../paper-input-date-picker.html">
19+
<!--<style>
20+
*:focus {
21+
border: 2px solid red;
22+
}
23+
</style>-->
1924
</head>
2025
<body unresolved>
2126

@@ -24,8 +29,8 @@
2429
<p>An example of <code>&lt;paper-input-date-picker&gt;</code>:</p>
2530

2631
<p>An baic example of <code>&lt;paper-input-date-picker&gt;</code>:</p>
27-
<paper-input-date-picker label="Pick a date..."></paper-input-date-picker>
28-
<paper-input-date-picker label="Pick a date (No prefix icon)..." no-prefix-icon="true" style="width: 300px;"></paper-input-date-picker>
32+
<paper-input-date-picker label="Pick a date..." modal></paper-input-date-picker>
33+
<paper-input-date-picker label="Pick a date (No prefix icon)..." no-prefix-icon="true" style="width: 300px;" locale="pt-BR"></paper-input-date-picker>
2934

3035

3136
<p>An example of <code>&lt;paper-input-date-picker&gt;</code> with validaton messages:</p>

‎moment-import.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<script src='../moment/min/moment.js'></script>

‎moment-with-locales-import.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<script src='../moment/min/moment-with-locales.js'></script>

‎paper-input-date-picker.html‎

Lines changed: 92 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
<!--
2-
@license
3-
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4-
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5-
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6-
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7-
Code distributed by Google as part of the polymer project is also
8-
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-
-->
10-
111
<link rel="import" href="../polymer/polymer.html">
122

133
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
@@ -20,8 +10,7 @@
2010
<link rel="import" href="../paper-dialog/paper-dialog.html">
2111
<link rel="import" href="../paper-date-picker/paper-date-picker.html">
2212

23-
<script src="../moment/min/moment-with-locales.min.js"></script>
24-
13+
<link rel="import" href="./moment-with-locales-import.html">
2514
<!--
2615
An element providing a solution to no problem in particular.
2716
@@ -51,6 +40,11 @@
5140
text-align: left;
5241
}
5342

43+
:host paper-dialog paper-date-picker {
44+
margin: 0px;
45+
padding: 0px;
46+
}
47+
5448
:host > paper-button::shadow > .content.paper-button {
5549
padding: 0px;
5650
}
@@ -63,13 +57,21 @@
6357
paper-button.btn-clear:hover {
6458
background: var(--paper-red-50);
6559
}
60+
61+
@media (max-width: 600px) {
62+
:host paper-dialog {
63+
margin: 0px
64+
}
65+
}
66+
6667
</style>
6768

68-
<paper-button on-tap="showDialog"
69-
focus-target="[[_dropdownContent]]">
69+
<paper-button on-tap="_showDialog"
70+
focus-target="[[_dropdownContent]]"
71+
tabindex="-1">
7072
<paper-input id="input"
7173
disabled="[[disabled]]"
72-
value="[[dateInputText]]"
74+
value="[[_computeInputText(value)]]"
7375
invalid="{{invalid}}"
7476
prevent-invalid-input="[[preventInvalidInput]]"
7577
allowed-pattern="[[allowedPattern]]"
@@ -97,15 +99,20 @@
9799
autosave="[[autosave]]"
98100
results="[[results]]"
99101
error-message="[[errorMessage]]"
100-
label="[[label]]">
102+
label="[[label]]"
103+
on-blur="_onInputBlur"
104+
on-keydown="_onInputKeyDown"
105+
on-keyup="_onInputKeyUp"
106+
tabindex="-1"
107+
readonly>
101108
<iron-icon icon="[[prefixIcon]]" hidden="[[noPrefixIcon]]" prefix></iron-icon>
102109
<iron-icon icon="arrow-drop-down" suffix></iron-icon>
103110
</paper-input>
104111
</paper-button>
105-
<paper-dialog id="dialog" class="paper-date-picker-dialog" modal="[[modal]]" on-iron-overlay-closed="dismissDialog">
112+
<paper-dialog id="dialog" class="paper-date-picker-dialog" modal="[[modal]]" on-iron-overlay-closed="_dismissDialog">
106113
<paper-date-picker id="picker" locale="{{locale}}"></paper-date-picker>
107114
<div class="buttons">
108-
<paper-button dialog-confirm on-tap="onTapClearValue" class="btn-clear">Clear</paper-button>
115+
<paper-button dialog-dismiss on-tap="_onTapClearValue" class="btn-clear">Clear</paper-button>
109116
<paper-button dialog-dismiss>Cancel</paper-button>
110117
<paper-button dialog-confirm>OK</paper-button>
111118
</div>
@@ -121,14 +128,21 @@
121128
is: 'paper-input-date-picker',
122129

123130
behaviors: [
124-
Polymer.IronFormElementBehavior,
125-
Polymer.PaperInputBehavior,
126-
Polymer.IronControlState,
127-
Polymer.IronButtonState,
128-
Polymer.IronA11yKeysBehavior
131+
Polymer.IronButtonState
129132
],
130133

134+
hostAttributes: {
135+
tabindex: '0'
136+
},
137+
131138
properties: {
139+
140+
/**
141+
* Turns the datepicker in a modal dialog .
142+
*/
143+
modal: {
144+
type: Boolean
145+
},
132146

133147
/**
134148
* The label for the dropdown.
@@ -175,98 +189,86 @@
175189
type: Boolean,
176190
value: false
177191
},
178-
179-
/**
180-
* Format date to be displayed on input.
181-
*/
182-
dateFormat: {
183-
type: String,
184-
},
185192

186193
/**
187194
* For localization formatting.
188195
*/
189196
locale: {
190197
type: String
191198
},
192-
193-
/**
194-
* The derived "label" of the currently selected item. This value
195-
* is the `label` property on the selected item if set, or else the
196-
* trimmed text content of the selected item.
197-
*/
198-
dateInputText: {
199-
type: String,
200-
notify: true,
201-
computed: '_computeInputText(value)'
202-
},
203199

204200
keyEventTarget: {
205201
type: Object,
206202
value: function() {
207203
return this;
208204
}
209205
},
206+
207+
value: {
208+
type: Date,
209+
notify: true
210+
}
210211
},
211212

212-
// Element Lifecycle
213+
get $picker() {
214+
return this.$.picker;
215+
},
213216

214-
ready: function() {
215-
// `ready` is called after all elements have been configured, but
216-
// propagates bottom-up. This element's children are ready, but parents
217-
// are not.
218-
//
219-
// This is the point where you should make modifications to the DOM (when
220-
// necessary), or kick off any processes the element wants to perform.
221-
var $this = this;
222-
223-
this.locale = window.navigator.userLanguage || window.navigator.language;
224-
225-
this.addEventListener("focus", function () {
226-
227-
$this.$.input.readonly = true;
228-
$this.$.input.focus();
229-
}, true);
230-
231-
this.addEventListener("blur", function () {
217+
get _inputElement() {
218+
return this.$.input;
219+
},
232220

233-
$this.$.input.readonly = false;
234-
}, true);
235-
236-
this._inputElement = this.$.input;
237-
238-
this.dateFormat = this.$.picker.dateFormat;
221+
listeners: {
222+
'focus': '_onFocus'
239223
},
240224

241-
attached: function() {
242-
// `attached` fires once the element and its parents have been inserted
243-
// into a document.
244-
//
245-
// This is a good place to perform any work related to your element's
246-
// visual state or active behavior (measuring sizes, beginning animations,
247-
// loading resources, etc).
225+
_onFocus: function (e) {
226+
this._inputElement.focus();
227+
this.setAttribute('tabindex','-1');
248228
},
249229

250-
detached: function() {
251-
// The analog to `attached`, `detached` fires when the element has been
252-
// removed from a document.
253-
//
254-
// Use this to clean up anything you did in `attached`.
230+
_onInputBlur: function (e) {
231+
this.setAttribute('tabindex','0');
232+
e.stopPropagation();
233+
},
234+
235+
_onInputKeyDown: function (e) {
236+
if (e.keyCode === 13) {
237+
this._showDialog();
238+
e.stopPropagation();
239+
}
240+
},
241+
242+
_onInputKeyUp: function (e) {
243+
if (e.keyCode === 46) {
244+
this._clearValue();
245+
}
246+
e.stopPropagation();
247+
},
248+
249+
_onTapClearValue: function () {
250+
this.value = null;
251+
},
252+
253+
// Element Lifecycle
254+
255+
ready: function() {
256+
if (!this.locale) {
257+
this.locale = window.navigator.userLanguage || window.navigator.language;
258+
}
255259
},
256260

257261
// Element Behavior
258262
keyBindings: {
259263
'del': '_delPressed'
260264
},
261265

262-
_delPressed: function(event) {
263-
266+
_delPressed: function() {
264267
this._clearValue();
265268
},
266269

267270
_clearValue: function() {
268-
269-
this.value = '';
271+
this.value = null;
270272
},
271273

272274
/**
@@ -279,32 +281,21 @@
279281
return '';
280282
}
281283

282-
return this.dateFormat(value, 'LL');
284+
return this.$picker.dateFormat(value, 'LL');
283285
},
284286

285-
dismissDialog: function(event) {
286-
287-
var $this = this;
288-
289-
if (event.detail.confirmed) {
290-
291-
this.value = this.$.picker.date;
292-
}
293-
287+
_dismissDialog: function(event) {
288+
var $this = this;
289+
if ((!event.detail.canceled) && (event.detail.confirmed)) {
290+
this.value = this.$picker.date;
291+
}
294292
this.focus();
295293
},
296294

297-
showDialog: function() {
298-
299-
this.focus();
300-
this.$.picker.date = this.value;
295+
_showDialog: function() {
296+
this.$picker.date = (this.value) ? this.value : new Date();
301297
this.$.dialog.toggle();
302298
},
303-
304-
onTapClearValue: function () {
305-
306-
this.$.picker.date = null;
307-
},
308299

309300
});
310301

0 commit comments

Comments
 (0)