--- a/toolkit/content/widgets/datepicker.js
+++ b/toolkit/content/widgets/datepicker.js
@@ -232,16 +232,17 @@ function DatePicker(context) {
     handleMessage(event) {
       switch (event.data.name) {
         case "PickerSetValue": {
           this.set(event.data.detail);
           break;
         }
         case "PickerInit": {
           this.init(event.data.detail);
+          document.dispatchEvent(new CustomEvent("PickerReady"));
           break;
         }
       }
     },
 
     /**
      * Set the date state and update the components with the new state.
      *
@@ -289,24 +290,26 @@ function DatePicker(context) {
     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({
+        id: "month",
         setValue: month => {
           this.state.isMonthSet = true;
           options.setMonth(month);
         },
         getDisplayString: month => monthFormat(new Date(0, month)),
         viewportSize: spinnerSize
       }, context.monthYearView),
       year: new Spinner({
+        id: "year",
         setValue: year => {
           this.state.isYearSet = true;
           options.setYear(year);
         },
         getDisplayString: year => yearFormat(new Date(new Date(0).setFullYear(year))),
         viewportSize: spinnerSize
       }, context.monthYearView)
     };

--- a/toolkit/content/widgets/spinner.js
+++ b/toolkit/content/widgets/spinner.js
@@ -37,17 +37,17 @@ function Spinner(props, context) {
      *             as localized strings.
      *           {Number} viewportSize [optional]: Number of items in a
      *             viewport.
      *           {Boolean} hideButtons [optional]: Hide up & down buttons
      *           {Number} rootFontSize [optional]: Used to support zoom in/out
      *         }
      */
     _init(props) {
-      const { setValue, getDisplayString, hideButtons, rootFontSize = 10 } = props;
+      const { id, setValue, getDisplayString, hideButtons, rootFontSize = 10 } = props;
 
       const spinnerTemplate = document.getElementById("spinner-template");
       const spinnerElement = document.importNode(spinnerTemplate.content, true);
 
       // Make sure viewportSize is an odd number because we want to have the selected
       // item in the center. If it's an even number, use the default size instead.
       const viewportSize = props.viewportSize % 2 ? props.viewportSize : VIEWPORT_SIZE;
 
@@ -70,16 +70,17 @@ function Spinner(props, context) {
         itemsViewElements: []
       };
 
       this.elements.spinner.style.height = (ITEM_HEIGHT * viewportSize) + "rem";
 
       if (hideButtons) {
         this.elements.container.classList.add("hide-buttons");
       }
+      this.elements.container.id = id;
 
       this.context.appendChild(spinnerElement);
       this._attachEventListeners();
     },
 
     /**
      * Only the parent component calls setState on the spinner.
      * It checks if the items have changed and updates the spinner.