diff options
Diffstat (limited to 'toolkit/content/widgets/datepicker.js')
| -rw-r--r-- | toolkit/content/widgets/datepicker.js | 94 |
1 files changed, 41 insertions, 53 deletions
diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index 210ca856c..317f0ae94 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -20,6 +20,12 @@ function DatePicker(context) { * {Number} year [optional] * {Number} month [optional] * {Number} date [optional] + * {String} min + * {String} max + * {Number} firstDayOfWeek + * {Array<Number>} weekends + * {Array<String>} monthStrings + * {Array<String>} weekdayStrings * {String} locale [optional]: User preferred locale * } */ @@ -28,57 +34,54 @@ function DatePicker(context) { this._setDefaultState(); this._createComponents(); this._update(); + document.dispatchEvent(new CustomEvent("PickerReady")); }, /* * Set initial date picker states. */ _setDefaultState() { - const now = new Date(); - const { year = now.getFullYear(), - month = now.getMonth(), - day = now.getDate(), - locale } = this.props; - - // TODO: Use calendar info API to get first day of week & weekends - // (Bug 1287503) + const { year, month, day, min, max, firstDayOfWeek, weekends, + monthStrings, weekdayStrings, locale } = this.props; const dateKeeper = new DateKeeper({ - year, month, day - }, { - calViewSize: CAL_VIEW_SIZE, - firstDayOfWeek: 0, - weekends: [0] + year, month, day, min, max, firstDayOfWeek, weekends, + calViewSize: CAL_VIEW_SIZE }); this.state = { dateKeeper, locale, isMonthPickerVisible: false, - isYearSet: false, - isMonthSet: false, - isDateSet: false, getDayString: new Intl.NumberFormat(locale).format, - // TODO: use calendar terms when available (Bug 1287677) - getWeekHeaderString: weekday => ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][weekday], - setValue: ({ dateValue, selectionValue }) => { - dateKeeper.setValue(dateValue); - this.state.selectionValue = selectionValue; - this.state.isYearSet = true; - this.state.isMonthSet = true; - this.state.isDateSet = true; + getWeekHeaderString: weekday => weekdayStrings[weekday], + getMonthString: month => monthStrings[month], + setSelection: date => { + dateKeeper.setSelection({ + year: date.getUTCFullYear(), + month: date.getUTCMonth(), + day: date.getUTCDate(), + }); this._update(); this._dispatchState(); this._closePopup(); }, setYear: year => { dateKeeper.setYear(year); - this.state.isYearSet = true; + dateKeeper.setSelection({ + year, + month: dateKeeper.selection.month, + day: dateKeeper.selection.day, + }); this._update(); this._dispatchState(); }, setMonth: month => { dateKeeper.setMonth(month); - this.state.isMonthSet = true; + dateKeeper.setSelection({ + year: dateKeeper.selection.year, + month, + day: dateKeeper.selection.day, + }); this._update(); this._dispatchState(); }, @@ -104,6 +107,7 @@ function DatePicker(context) { monthYear: new MonthYear({ setYear: this.state.setYear, setMonth: this.state.setMonth, + getMonthString: this.state.getMonthString, locale: this.state.locale }, { monthYear: this.context.monthYear, @@ -116,7 +120,7 @@ function DatePicker(context) { * Update date picker and its components. */ _update() { - const { dateKeeper, selectionValue, isMonthPickerVisible } = this.state; + const { dateKeeper, isMonthPickerVisible } = this.state; if (isMonthPickerVisible) { this.state.months = dateKeeper.getMonths(); @@ -128,9 +132,7 @@ function DatePicker(context) { this.components.monthYear.setProps({ isVisible: isMonthPickerVisible, dateObj: dateKeeper.state.dateObj, - month: dateKeeper.state.month, months: this.state.months, - year: dateKeeper.state.year, years: this.state.years, toggleMonthPicker: this.state.toggleMonthPicker }); @@ -138,10 +140,9 @@ function DatePicker(context) { isVisible: !isMonthPickerVisible, days: this.state.days, weekHeaders: dateKeeper.state.weekHeaders, - setValue: this.state.setValue, + setSelection: this.state.setSelection, getDayString: this.state.getDayString, - getWeekHeaderString: this.state.getWeekHeaderString, - selectionValue + getWeekHeaderString: this.state.getWeekHeaderString }); isMonthPickerVisible ? @@ -162,8 +163,7 @@ function DatePicker(context) { * Use postMessage to pass the state of picker to the panel. */ _dispatchState() { - const { year, month, day } = this.state.dateKeeper.state; - const { isYearSet, isMonthSet, isDaySet } = this.state; + const { year, month, day } = this.state.dateKeeper.selection; // The panel is listening to window for postMessage event, so we // do postMessage to itself to send data to input boxes. window.postMessage({ @@ -172,9 +172,6 @@ function DatePicker(context) { year, month, day, - isYearSet, - isMonthSet, - isDaySet } }, "*"); }, @@ -255,19 +252,12 @@ function DatePicker(context) { set({ year, month, day }) { const { dateKeeper } = this.state; - if (year != undefined) { - this.state.isYearSet = true; - } - if (month != undefined) { - this.state.isMonthSet = true; - } - if (day != undefined) { - this.state.isDaySet = true; - } - dateKeeper.set({ year, month, day }); + dateKeeper.setSelection({ + year, month, day + }); this._update(); } }; @@ -280,12 +270,12 @@ function DatePicker(context) { * {String} locale * {Function} setYear * {Function} setMonth + * {Function} getMonthString * } * @param {DOMElement} context */ function MonthYear(options, context) { const spinnerSize = 5; - const monthFormat = new Intl.DateTimeFormat(options.locale, { month: "short" }).format; const yearFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric" }).format; const dateFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric", month: "long" }).format; @@ -298,7 +288,7 @@ function DatePicker(context) { this.state.isMonthSet = true; options.setMonth(month); }, - getDisplayString: month => monthFormat(new Date(0, month)), + getDisplayString: options.getMonthString, viewportSize: spinnerSize }, context.monthYearView), year: new Spinner({ @@ -323,8 +313,6 @@ function DatePicker(context) { * { * {Boolean} isVisible * {Date} dateObj - * {Number} month - * {Number} year * {Array<Object>} months * {Array<Object>} years * {Function} toggleMonthPicker @@ -336,14 +324,14 @@ function DatePicker(context) { if (props.isVisible) { this.context.monthYear.classList.add("active"); this.components.month.setState({ - value: props.month, + value: props.dateObj.getUTCMonth(), items: props.months, isInfiniteScroll: true, isValueSet: this.state.isMonthSet, smoothScroll: !this.state.firstOpened }); this.components.year.setState({ - value: props.year, + value: props.dateObj.getUTCFullYear(), items: props.years, isInfiniteScroll: false, isValueSet: this.state.isYearSet, |