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

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,