1 files changed, 21 insertions, 8 deletions

diff --git a/toolkit/modules/DateTimePickerHelper.jsm b/toolkit/modules/DateTimePickerHelper.jsm
index 398687988..b509742b0 100644
--- a/toolkit/modules/DateTimePickerHelper.jsm
+++ b/toolkit/modules/DateTimePickerHelper.jsm
@@ -21,6 +21,7 @@ this.EXPORTED_SYMBOLS = [
 
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/Task.jsm");
 
 /*
  * DateTimePickerHelper receives message from content side (input box) and
@@ -63,9 +64,13 @@ this.DateTimePickerHelper = {
           return;
         }
         this.picker.closePicker();
+        this.close();
         break;
       }
       case "FormDateTime:UpdatePicker": {
+        if (!this.picker) {
+          return;
+        }
         this.picker.setPopupValue(aMessage.data);
         break;
       }
@@ -87,6 +92,7 @@ this.DateTimePickerHelper = {
         if (browser) {
           browser.messageManager.sendAsyncMessage("FormDateTime:PickerClosed");
         }
+        this.picker.closePicker();
         this.close();
         break;
       }
@@ -97,18 +103,15 @@ this.DateTimePickerHelper = {
 
   // Called when picker value has changed, notify input box about it.
   updateInputBoxValue: function(aEvent) {
-    // TODO: parse data based on input type.
-    const { hour, minute } = aEvent.detail;
-    debug("hour: " + hour + ", minute: " + minute);
     let browser = this.weakBrowser ? this.weakBrowser.get() : null;
     if (browser) {
       browser.messageManager.sendAsyncMessage(
-        "FormDateTime:PickerValueChanged", { hour, minute });
+        "FormDateTime:PickerValueChanged", aEvent.detail);
     }
   },
 
   // Get picker from browser and show it anchored to the input box.
-  showPicker: function(aBrowser, aData) {
+  showPicker: Task.async(function* (aBrowser, aData) {
     let rect = aData.rect;
     let dir = aData.dir;
     let type = aData.type;
@@ -138,13 +141,23 @@ this.DateTimePickerHelper = {
       debug("aBrowser.dateTimePicker not found, exiting now.");
       return;
     }
-    this.picker.loadPicker(type, detail);
+    // The datetimepopup binding is only attached when it is needed.
+    // Check if openPicker method is present to determine if binding has
+    // been attached. If not, attach the binding first before calling it.
+    if (!this.picker.openPicker) {
+      let bindingPromise = new Promise(resolve => {
+        this.picker.addEventListener("DateTimePickerBindingReady",
+                                     resolve, {once: true});
+      });
+      this.picker.setAttribute("active", true);
+      yield bindingPromise;
+    }
     // The arrow panel needs an anchor to work. The popupAnchor (this._anchor)
     // is a transparent div that the arrow can point to.
-    this.picker.openPopup(this._anchor, "after_start", rect.left, rect.top);
+    this.picker.openPicker(type, this._anchor, detail);
 
     this.addPickerListeners();
-  },
+  }),
 
   // Picker is closed, do some cleanup.
   close: function() {