From 8fd370c9f39b4bc1d78cc0f763bf4e99dfd0c382 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 12:32:46 +0100 Subject: Bug 1283385: Implement UI for --- toolkit/content/widgets/datepicker.js | 354 ++++++++++++++++++++++++++++++++++ 1 file changed, 354 insertions(+) create mode 100644 toolkit/content/widgets/datepicker.js (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js new file mode 100644 index 000000000..d3f0fd1a4 --- /dev/null +++ b/toolkit/content/widgets/datepicker.js @@ -0,0 +1,354 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +function DatePicker(context) { + this.context = context; + this._attachEventListeners(); +} + +{ + const CAL_VIEW_SIZE = 42; + + DatePicker.prototype = { + /** + * Initializes the date picker. Set the default states and properties. + * @param {Object} props + * { + * {Number} year [optional] + * {Number} month [optional] + * {Number} date [optional] + * {String} locale [optional]: User preferred locale + * } + */ + init(props = {}) { + this.props = props; + this._setDefaultState(); + this._createComponents(); + this._update(); + }, + + /* + * Set initial date picker states. + */ + _setDefaultState() { + const now = new Date(); + const { year = now.getFullYear(), + month = now.getMonth(), + date = now.getDate(), + locale } = this.props; + + // TODO: Use calendar info API to get first day of week & weekends + // (Bug 1287503) + const dateKeeper = new DateKeeper({ + year, month, date + }, { + calViewSize: CAL_VIEW_SIZE, + firstDayOfWeek: 0, + weekends: [0] + }); + + 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; + this._update(); + this._dispatchState(); + }, + setYear: year => { + dateKeeper.setYear(year); + this.state.isYearSet = true; + this._update(); + this._dispatchState(); + }, + setMonth: month => { + dateKeeper.setMonth(month); + this.state.isMonthSet = true; + this._update(); + this._dispatchState(); + }, + toggleMonthPicker: () => { + this.state.isMonthPickerVisible = !this.state.isMonthPickerVisible; + this._update(); + } + }; + }, + + /** + * Initalize the date picker components. + */ + _createComponents() { + this.components = { + calendar: new Calendar({ + calViewSize: CAL_VIEW_SIZE, + locale: this.state.locale + }, { + weekHeader: this.context.weekHeader, + daysView: this.context.daysView + }), + monthYear: new MonthYear({ + setYear: this.state.setYear, + setMonth: this.state.setMonth, + locale: this.state.locale + }, { + monthYear: this.context.monthYear, + monthYearView: this.context.monthYearView + }) + }; + }, + + /** + * Update date picker and its components. + */ + _update() { + const { dateKeeper, selectionValue, isMonthPickerVisible } = this.state; + + if (isMonthPickerVisible) { + this.state.months = dateKeeper.getMonths(); + this.state.years = dateKeeper.getYears(); + } else { + this.state.days = dateKeeper.getDays(); + } + + 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 + }); + this.components.calendar.setProps({ + isVisible: !isMonthPickerVisible, + days: this.state.days, + weekHeaders: dateKeeper.state.weekHeaders, + setValue: this.state.setValue, + getDayString: this.state.getDayString, + getWeekHeaderString: this.state.getWeekHeaderString, + selectionValue + }); + + isMonthPickerVisible ? + this.context.monthYearView.classList.remove("hidden") : + this.context.monthYearView.classList.add("hidden"); + }, + + /** + * Use postMessage to pass the state of picker to the panel. + */ + _dispatchState() { + const { year, month, date } = this.state.dateKeeper.state; + const { isYearSet, isMonthSet, isDateSet } = this.state; + // The panel is listening to window for postMessage event, so we + // do postMessage to itself to send data to input boxes. + window.postMessage({ + name: "DatePickerPopupChanged", + detail: { + year, + month, + date, + isYearSet, + isMonthSet, + isDateSet + } + }, "*"); + }, + + /** + * Attach event listeners + */ + _attachEventListeners() { + window.addEventListener("message", this); + document.addEventListener("click", this); + }, + + /** + * Handle events. + * + * @param {Event} event + */ + handleEvent(event) { + switch (event.type) { + case "message": { + this.handleMessage(event); + break; + } + case "click": { + if (event.target == this.context.buttonLeft) { + this.state.dateKeeper.setMonthByOffset(-1); + this._update(); + } else if (event.target == this.context.buttonRight) { + this.state.dateKeeper.setMonthByOffset(1); + this._update(); + } + break; + } + } + }, + + /** + * Handle postMessage events. + * + * @param {Event} event + */ + handleMessage(event) { + switch (event.data.name) { + case "DatePickerSetValue": { + this.set(event.data.detail); + break; + } + case "DatePickerInit": { + this.init(event.data.detail); + break; + } + } + }, + + /** + * Set the date state and update the components with the new state. + * + * @param {Object} dateState + * { + * {Number} year [optional] + * {Number} month [optional] + * {Number} date [optional] + * } + */ + set(dateState) { + if (dateState.year != undefined) { + this.state.isYearSet = true; + } + if (dateState.month != undefined) { + this.state.isMonthSet = true; + } + if (dateState.date != undefined) { + this.state.isDateSet = true; + } + + this.state.dateKeeper.set(dateState); + this._update(); + } + }; + + /** + * MonthYear is a component that handles the month & year spinners + * + * @param {Object} options + * { + * {String} locale + * {Function} setYear + * {Function} setMonth + * } + * @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; + + this.context = context; + this.state = { dateFormat }; + this.props = {}; + this.components = { + month: new Spinner({ + setValue: month => { + this.state.isMonthSet = true; + options.setMonth(month); + }, + getDisplayString: month => monthFormat(new Date(0, month)), + viewportSize: spinnerSize + }, context.monthYearView), + year: new Spinner({ + setValue: year => { + this.state.isYearSet = true; + options.setYear(year); + }, + getDisplayString: year => yearFormat(new Date(new Date(0).setFullYear(year))), + viewportSize: spinnerSize + }, context.monthYearView) + }; + + this._attachEventListeners(); + } + + MonthYear.prototype = { + + /** + * Set new properties and pass them to components + * + * @param {Object} props + * { + * {Boolean} isVisible + * {Date} dateObj + * {Number} month + * {Number} year + * {Array} months + * {Array} years + * {Function} toggleMonthPicker + * } + */ + setProps(props) { + this.context.monthYear.textContent = this.state.dateFormat(props.dateObj); + + if (props.isVisible) { + this.components.month.setState({ + value: props.month, + items: props.months, + isInfiniteScroll: true, + isValueSet: this.state.isMonthSet, + smoothScroll: !this.state.firstOpened + }); + this.components.year.setState({ + value: props.year, + items: props.years, + isInfiniteScroll: false, + isValueSet: this.state.isYearSet, + smoothScroll: !this.state.firstOpened + }); + this.state.firstOpened = false; + } else { + this.state.isMonthSet = false; + this.state.isYearSet = false; + this.state.firstOpened = true; + } + + this.props = Object.assign(this.props, props); + }, + + /** + * Handle events + * @param {DOMEvent} event + */ + handleEvent(event) { + switch (event.type) { + case "click": { + this.props.toggleMonthPicker(); + break; + } + } + }, + + /** + * Attach event listener to monthYear button + */ + _attachEventListeners() { + this.context.monthYear.addEventListener("click", this); + } + }; +} -- cgit v1.2.3 From c87dbe6922ec79f988744f5aab0cde1a166292e6 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 13:38:47 +0100 Subject: Bug 1325922: [DateTimePicker] Add arrows svg file and style month-year button for date picker --- toolkit/content/widgets/datepicker.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index d3f0fd1a4..7453b67eb 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -174,7 +174,8 @@ function DatePicker(context) { */ _attachEventListeners() { window.addEventListener("message", this); - document.addEventListener("click", this); + document.addEventListener("mouseup", this, { passive: true }); + document.addEventListener("mousedown", this); }, /** @@ -188,16 +189,28 @@ function DatePicker(context) { this.handleMessage(event); break; } - case "click": { + case "mousedown": { + // Use preventDefault to keep focus on input boxes + event.preventDefault(); + event.target.setCapture(); + if (event.target == this.context.buttonLeft) { + event.target.classList.add("active"); this.state.dateKeeper.setMonthByOffset(-1); this._update(); } else if (event.target == this.context.buttonRight) { + event.target.classList.add("active"); this.state.dateKeeper.setMonthByOffset(1); this._update(); } break; } + case "mouseup": { + if (event.target == this.context.buttonLeft || event.target == this.context.buttonRight) { + event.target.classList.remove("active"); + } + + } } }, @@ -307,6 +320,7 @@ function DatePicker(context) { this.context.monthYear.textContent = this.state.dateFormat(props.dateObj); if (props.isVisible) { + this.context.monthYear.classList.add("active"); this.components.month.setState({ value: props.month, items: props.months, @@ -323,6 +337,7 @@ function DatePicker(context) { }); this.state.firstOpened = false; } else { + this.context.monthYear.classList.remove("active"); this.state.isMonthSet = false; this.state.isYearSet = false; this.state.firstOpened = true; -- cgit v1.2.3 From 631b690ac3fecb1406246237d282390283c77e2c Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Wed, 14 Feb 2018 14:03:55 +0100 Subject: Bug 1320225: [DateTimeInput] Integration of input type=date input box with picker (part 1) --- toolkit/content/widgets/datepicker.js | 44 +++++++++++++++++++++++------------ 1 file changed, 29 insertions(+), 15 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index 7453b67eb..210ca856c 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -37,13 +37,13 @@ function DatePicker(context) { const now = new Date(); const { year = now.getFullYear(), month = now.getMonth(), - date = now.getDate(), + day = now.getDate(), locale } = this.props; // TODO: Use calendar info API to get first day of week & weekends // (Bug 1287503) const dateKeeper = new DateKeeper({ - year, month, date + year, month, day }, { calViewSize: CAL_VIEW_SIZE, firstDayOfWeek: 0, @@ -68,6 +68,7 @@ function DatePicker(context) { this.state.isDateSet = true; this._update(); this._dispatchState(); + this._closePopup(); }, setYear: year => { dateKeeper.setYear(year); @@ -148,23 +149,32 @@ function DatePicker(context) { this.context.monthYearView.classList.add("hidden"); }, + /** + * Use postMessage to close the picker. + */ + _closePopup() { + window.postMessage({ + name: "ClosePopup" + }, "*"); + }, + /** * Use postMessage to pass the state of picker to the panel. */ _dispatchState() { - const { year, month, date } = this.state.dateKeeper.state; - const { isYearSet, isMonthSet, isDateSet } = this.state; + const { year, month, day } = this.state.dateKeeper.state; + const { isYearSet, isMonthSet, isDaySet } = this.state; // The panel is listening to window for postMessage event, so we // do postMessage to itself to send data to input boxes. window.postMessage({ - name: "DatePickerPopupChanged", + name: "PickerPopupChanged", detail: { year, month, - date, + day, isYearSet, isMonthSet, - isDateSet + isDaySet } }, "*"); }, @@ -221,11 +231,11 @@ function DatePicker(context) { */ handleMessage(event) { switch (event.data.name) { - case "DatePickerSetValue": { + case "PickerSetValue": { this.set(event.data.detail); break; } - case "DatePickerInit": { + case "PickerInit": { this.init(event.data.detail); break; } @@ -242,18 +252,22 @@ function DatePicker(context) { * {Number} date [optional] * } */ - set(dateState) { - if (dateState.year != undefined) { + set({ year, month, day }) { + const { dateKeeper } = this.state; + + if (year != undefined) { this.state.isYearSet = true; } - if (dateState.month != undefined) { + if (month != undefined) { this.state.isMonthSet = true; } - if (dateState.date != undefined) { - this.state.isDateSet = true; + if (day != undefined) { + this.state.isDaySet = true; } - this.state.dateKeeper.set(dateState); + dateKeeper.set({ + year, month, day + }); this._update(); } }; -- cgit v1.2.3 From e25430117a67f5c898e5e9388ebd44b185d469ab Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 12:17:17 +0200 Subject: moebius#92: HTML - input - datetime + native in moebius: Bug 1317600: https://bugzilla.mozilla.org/show_bug.cgi?id=1317600 A note - not implemented: Bug 1282768: https://bugzilla.mozilla.org/show_bug.cgi?id=1282768 *.css: filter: url("chrome://global/skin/filters.svg#fill");, fill: Bug 1283385: https://bugzilla.mozilla.org/show_bug.cgi?id=1283385 Bug 1323109: https://bugzilla.mozilla.org/show_bug.cgi?id=1323109 Bug 1314544: https://bugzilla.mozilla.org/show_bug.cgi?id=1314544 Bug 1286182: https://bugzilla.mozilla.org/show_bug.cgi?id=1286182 Bug 1325922: https://bugzilla.mozilla.org/show_bug.cgi?id=1325922 A note - not implemented: Bug 1282768: https://bugzilla.mozilla.org/show_bug.cgi?id=1282768 *.css: filter: url("chrome://global/skin/filters.svg#fill");, fill: Bug 1320225: https://bugzilla.mozilla.org/show_bug.cgi?id=1320225 Bug 1341190: https://bugzilla.mozilla.org/show_bug.cgi?id=1341190 --- toolkit/content/widgets/datepicker.js | 94 +++++++++++++++-------------------- 1 file changed, 41 insertions(+), 53 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') 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} weekends + * {Array} monthStrings + * {Array} 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} months * {Array} 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, -- cgit v1.2.3 From 6f1fcab2d81caedd96d9404386bc92f9884c30ce Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 20:56:33 +0200 Subject: Bug 1363672 - Add step support to date picker --- toolkit/content/widgets/datepicker.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index 317f0ae94..25b15dae6 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -22,6 +22,8 @@ function DatePicker(context) { * {Number} date [optional] * {String} min * {String} max + * {Number} step + * {Number} stepBase * {Number} firstDayOfWeek * {Array} weekends * {Array} monthStrings @@ -41,10 +43,10 @@ function DatePicker(context) { * Set initial date picker states. */ _setDefaultState() { - const { year, month, day, min, max, firstDayOfWeek, weekends, + const { year, month, day, min, max, step, stepBase, firstDayOfWeek, weekends, monthStrings, weekdayStrings, locale } = this.props; const dateKeeper = new DateKeeper({ - year, month, day, min, max, firstDayOfWeek, weekends, + year, month, day, min, max, step, stepBase, firstDayOfWeek, weekends, calViewSize: CAL_VIEW_SIZE }); -- cgit v1.2.3 From 6a44ab26592fbe95b69e1bf4d3a3b0de03a99b26 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 21:14:18 +0200 Subject: Bug 1364026 - (Part 2) Check if min and max attributes on input type date are valid date strings --- toolkit/content/widgets/datepicker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index 25b15dae6..0c288d917 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -20,8 +20,8 @@ function DatePicker(context) { * {Number} year [optional] * {Number} month [optional] * {Number} date [optional] - * {String} min - * {String} max + * {Number} min + * {Number} max * {Number} step * {Number} stepBase * {Number} firstDayOfWeek -- cgit v1.2.3 From e14c686ac0ad5e6cfdd933049c11b80a425283dc Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Fri, 30 Mar 2018 23:50:34 +0200 Subject: Bug 1381421 - (Part 1) Handle dates earlier than 0001-01-01 and later than 275760-09-13 correctly --- toolkit/content/widgets/datepicker.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index 0c288d917..f5659b736 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -54,7 +54,7 @@ function DatePicker(context) { dateKeeper, locale, isMonthPickerVisible: false, - getDayString: new Intl.NumberFormat(locale).format, + getDayString: day => day ? new Intl.NumberFormat(locale).format(day) : "", getWeekHeaderString: weekday => weekdayStrings[weekday], getMonthString: month => monthStrings[month], setSelection: date => { @@ -101,7 +101,10 @@ function DatePicker(context) { this.components = { calendar: new Calendar({ calViewSize: CAL_VIEW_SIZE, - locale: this.state.locale + locale: this.state.locale, + setSelection: this.state.setSelection, + getDayString: this.state.getDayString, + getWeekHeaderString: this.state.getWeekHeaderString }, { weekHeader: this.context.weekHeader, daysView: this.context.daysView @@ -141,10 +144,7 @@ function DatePicker(context) { this.components.calendar.setProps({ isVisible: !isMonthPickerVisible, days: this.state.days, - weekHeaders: dateKeeper.state.weekHeaders, - setSelection: this.state.setSelection, - getDayString: this.state.getDayString, - getWeekHeaderString: this.state.getWeekHeaderString + weekHeaders: dateKeeper.state.weekHeaders }); isMonthPickerVisible ? @@ -254,8 +254,8 @@ function DatePicker(context) { set({ year, month, day }) { const { dateKeeper } = this.state; - dateKeeper.set({ - year, month, day + dateKeeper.setCalendarMonth({ + year, month }); dateKeeper.setSelection({ year, month, day -- cgit v1.2.3 From 0a2b11d18138283e5fd1520e1230451f2e41a0c9 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Sat, 31 Mar 2018 07:05:58 +0200 Subject: Bug 1397114 - Disable smooth scrolling when value changes come from input box --- toolkit/content/widgets/datepicker.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index f5659b736..4387ae632 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -124,7 +124,7 @@ function DatePicker(context) { /** * Update date picker and its components. */ - _update() { + _update(options = {}) { const { dateKeeper, isMonthPickerVisible } = this.state; if (isMonthPickerVisible) { @@ -139,7 +139,8 @@ function DatePicker(context) { dateObj: dateKeeper.state.dateObj, months: this.state.months, years: this.state.years, - toggleMonthPicker: this.state.toggleMonthPicker + toggleMonthPicker: this.state.toggleMonthPicker, + noSmoothScroll: options.noSmoothScroll }); this.components.calendar.setProps({ isVisible: !isMonthPickerVisible, @@ -260,7 +261,7 @@ function DatePicker(context) { dateKeeper.setSelection({ year, month, day }); - this._update(); + this._update({ noSmoothScroll: true }); } }; @@ -330,14 +331,14 @@ function DatePicker(context) { items: props.months, isInfiniteScroll: true, isValueSet: this.state.isMonthSet, - smoothScroll: !this.state.firstOpened + smoothScroll: !(this.state.firstOpened || props.noSmoothScroll) }); this.components.year.setState({ value: props.dateObj.getUTCFullYear(), items: props.years, isInfiniteScroll: false, isValueSet: this.state.isYearSet, - smoothScroll: !this.state.firstOpened + smoothScroll: !(this.state.firstOpened || props.noSmoothScroll) }); this.state.firstOpened = false; } else { -- cgit v1.2.3 From f4d1b4804a0dad0a616b01edc31187dace152165 Mon Sep 17 00:00:00 2001 From: janekptacijarabaci Date: Sat, 31 Mar 2018 11:33:23 +0200 Subject: moebius#110: HTML - input - datetime - Datepicker shows incorrect month for the first day of the month --- toolkit/content/widgets/datepicker.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) (limited to 'toolkit/content/widgets/datepicker.js') diff --git a/toolkit/content/widgets/datepicker.js b/toolkit/content/widgets/datepicker.js index 4387ae632..0e9c9a6e6 100644 --- a/toolkit/content/widgets/datepicker.js +++ b/toolkit/content/widgets/datepicker.js @@ -279,9 +279,11 @@ function DatePicker(context) { */ function MonthYear(options, context) { const spinnerSize = 5; - const yearFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric" }).format; - const dateFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric", month: "long" }).format; - + const yearFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric", + timeZone: "UTC" }).format; + const dateFormat = new Intl.DateTimeFormat(options.locale, { year: "numeric", + month: "long", + timeZone: "UTC" }).format; this.context = context; this.state = { dateFormat }; this.props = {}; @@ -299,7 +301,7 @@ function DatePicker(context) { this.state.isYearSet = true; options.setYear(year); }, - getDisplayString: year => yearFormat(new Date(new Date(0).setFullYear(year))), + getDisplayString: year => yearFormat(new Date(new Date(0).setUTCFullYear(year))), viewportSize: spinnerSize }, context.monthYearView) }; -- cgit v1.2.3