forked from Collaborne/paper-date-picker-item
-
Notifications
You must be signed in to change notification settings - Fork 0
/
paper-date-picker-behaviors.html
143 lines (126 loc) · 3.09 KB
/
paper-date-picker-behaviors.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
<!doctype html>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../moment-element/moment-import.html">
<link rel="import" href="../iron-behaviors/iron-control-state.html">
<script>
var Polymer = Polymer || {};
/**
* Shared functionality for date picker
*
* @polymerBehavior Polymer.PaperDatePickerItemBehavior
*/
Polymer.PaperDatePickerItemBehaviorImpl = {
properties: {
/**
* Date reflected by the component
*/
date: {
type: Date,
value: null,
notify: true
},
/**
* Default time if none has been specified, in a string format HH:mm
*/
defaultTime: String,
/**
* Format to use for the date, adhering to momentjs.com display formats.
*/
dateFormat: {
type: String,
value: 'll'
},
/**
* Format to use for time, adhering to momentjs.com display formats.
*/
timeFormat: {
type: String,
value: 'LT'
},
/**
* Text shown when no date is set. Use this property to localize the element.
*/
placeholder: {
type: String,
value: 'Add a date'
},
/**
* Text for the cancel button in the edit dialog. Use this property to localize the element.
*/
cancelButton: {
type: String,
value: 'Cancel'
},
/**
* Text for the OK button in the edit dialog. Use this property to localize the element.
*/
okButton: {
type: String,
value: 'OK'
},
/**
* The locale used for date and time formatting.
*/
locale: {
type: String,
value: function() {
return moment.locale();
}
},
/**
* The minimum allowed date
*/
minDate: Date,
/**
* The maximum allowed date
*/
maxDate: Date
},
_edit: function(dialogId) {
var dialog = document.createElement(dialogId);
// Wait until dialog is created before the properties can be set
// @see http://stackoverflow.com/a/31482376
this.async(function() {
// Initialize dialog with the current date (default to today to avoid exception)
dialog.date = this.date ? moment(this.date).toDate() : new Date();
// Localize text
dialog.cancelButton = this.cancelButton;
dialog.okButton = this.okButton;
dialog.locale = this.locale;
dialog.minDate = this.minDate;
dialog.maxDate = this.maxDate;
// Capture date if the user saved the dialog
dialog.addEventListener('paper-date-picker-edit-dialog-save', function(e) {
this._changeDate(e.detail);
}.bind(this));
dialog.open();
}.bind(this));
// Return dialog for unit testing
return dialog;
},
_changeDate: function(date) {
this.date = date;
// Inform listener of "change" events when the date was changed
this.fire('change', { value: this.date });
},
// Format date
_getFormattedDate: function(date, placeholder, locale) {
if (!date) {
return placeholder;
}
return moment(date).locale(locale).format(this.dateFormat);
},
// Format time
_getFormattedTime: function(date, locale) {
if (!date) {
return '';
}
return moment(date).locale(locale).format(this.timeFormat);
}
};
/** @polymerBehavior */
Polymer.PaperDatePickerItemBehavior = [
Polymer.IronControlState,
Polymer.PaperDatePickerItemBehaviorImpl
];
</script>