diff --git a/assets/javascripts/wizard/components/wizard-date-input.js.es6 b/assets/javascripts/wizard/components/wizard-date-input.js.es6 index 93c7ed2d..bb11b655 100644 --- a/assets/javascripts/wizard/components/wizard-date-input.js.es6 +++ b/assets/javascripts/wizard/components/wizard-date-input.js.es6 @@ -1,3 +1,42 @@ import DateInput from "discourse/components/date-input"; +import loadScript from "discourse/lib/load-script"; +import discourseComputed from "discourse-common/utils/decorators"; +import I18n from "I18n"; +/* global Pikaday:true */ -export default DateInput.extend(); +export default DateInput.extend({ + useNativePicker: false, + + @discourseComputed() + placeholder() { + return this.format; + }, + + _loadPikadayPicker(container) { + return loadScript("/javascripts/pikaday.js").then(() => { + let defaultOptions = { + field: this.element.querySelector(".date-picker"), + container: container || this.element.querySelector(".picker-container"), + bound: container === null, + format: this.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), + }; + + if (this.relativeDate) { + defaultOptions = Object.assign({}, defaultOptions, { + minDate: moment(this.relativeDate).toDate(), + }); + } + + return new Pikaday(Object.assign({}, defaultOptions, this._opts())); + }); + }, +}); diff --git a/assets/javascripts/wizard/templates/components/wizard-field-date.hbs b/assets/javascripts/wizard/templates/components/wizard-field-date.hbs index 4ac6571b..ed4d14e3 100644 --- a/assets/javascripts/wizard/templates/components/wizard-field-date.hbs +++ b/assets/javascripts/wizard/templates/components/wizard-field-date.hbs @@ -2,4 +2,5 @@ date=date onChange=(action "onChange") tabindex=field.tabindex + format=field.format }}