Bug 1320225: [DateTimeInput] Integration of input type=date input box with picker (part 1)

1 files changed, 29 insertions, 15 deletions

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);
@@ -149,22 +150,31 @@ function DatePicker(context) {
     },
 
     /**
+     * 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();
     }
   };