fe588cc7f8
* DEV: Fix the function prototype observers deprecation
DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.observes('foo') to observer('foo', function() {}). [deprecation id: function-prototype-extensions.observes] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-observes for more details.
* DEV: Fix the function prototype event listeners deprecation
DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.on('foo') to on('foo', function() {}). [deprecation id: function-prototype-extensions.on] See https://deprecations.emberjs.com/v3.x/#toc_function-prototype-extensions-on for more details.
* DEV: Simplify `default as` imports
Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
import { next } from "@ember/runloop";
|
|
import Component from "@ember/component";
|
|
/* global Pikaday:true */
|
|
import loadScript from "discourse/lib/load-script";
|
|
import discourseComputed, { on } from "discourse-common/utils/decorators";
|
|
|
|
const DATE_FORMAT = "YYYY-MM-DD";
|
|
|
|
export default Component.extend({
|
|
classNames: ["date-picker-wrapper"],
|
|
_picker: null,
|
|
value: null,
|
|
|
|
@discourseComputed("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(() => {
|
|
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.weekdaysMin()
|
|
},
|
|
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;
|
|
}
|
|
},
|
|
|
|
@discourseComputed()
|
|
placeholder() {
|
|
return I18n.t("dates.placeholder");
|
|
},
|
|
|
|
_opts() {
|
|
return null;
|
|
}
|
|
});
|