/
date-picker.js.es6
92 lines (79 loc) · 2.19 KB
/
date-picker.js.es6
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
/* global Pikaday:true */
import loadScript from "discourse/lib/load-script";
import {
default as computed,
on
} from "ember-addons/ember-computed-decorators";
const DATE_FORMAT = "YYYY-MM-DD";
export default Ember.Component.extend({
classNames: ["date-picker-wrapper"],
_picker: null,
value: null,
@computed("site.mobileView")
inputType(mobileView) {
return mobileView ? "date" : "text";
},
@on("didInsertElement")
_loadDatePicker() {
if (this.site.mobileView) {
this._loadNativePicker();
} else {
const container = document.getElementById(this.containerId);
this._loadPikadayPicker(container);
}
},
_loadPikadayPicker(container) {
loadScript("/javascripts/pikaday.js").then(() => {
Ember.run.next(() => {
const options = {
field: this.element.querySelector(".date-picker"),
container: container || null,
bound: container === null,
format: DATE_FORMAT,
firstDay: 1,
i18n: {
previousMonth: I18n.t("dates.previous_month"),
nextMonth: I18n.t("dates.next_month"),
months: moment.months(),
weekdays: moment.weekdays(),
weekdaysShort: moment.weekdaysShort()
},
onSelect: date => this._handleSelection(date)
};
this._picker = new Pikaday(Object.assign(options, this._opts()));
});
});
},
_loadNativePicker() {
const picker = this.element.querySelector("input.date-picker");
picker.onchange = () => this._handleSelection(picker.value);
picker.hide = () => {
/* do nothing for native */
};
picker.destroy = () => {
/* do nothing for native */
};
this._picker = picker;
},
_handleSelection(value) {
const formattedDate = moment(value).format(DATE_FORMAT);
if (!this.element || this.isDestroying || this.isDestroyed) return;
if (this.onSelect) {
this.onSelect(formattedDate);
}
},
@on("willDestroyElement")
_destroy() {
if (this._picker) {
this._picker.destroy();
this._picker = null;
}
},
@computed()
placeholder() {
return I18n.t("dates.placeholder");
},
_opts() {
return null;
}
});