Es/tempus dominus

corehq/apps/cloudcare/static/cloudcare/js/form_entry/entries.js

@@ -1,4 +1,4 @@
 'use strict';
 hqDefine("cloudcare/js/form_entry/entries", [
     'jquery',
     'knockout',
@@ -784,6 +784,8 @@
      */
     function DateTimeEntryBase(question, options) {
         var self = this;
+        self.templateType = 'datetime';
+        self.datetimeIconClass = "fcc fcc-fd-datetime";
 
         EntrySingleAnswer.call(self, question, options);
 
@@ -818,7 +820,7 @@
     DateTimeEntryBase.prototype.serverFormat = undefined;
 
     function DateEntry(question, options) {
-        this.templateType = 'date';
+        this.datetimeIconClass = "fa-solid fa-calendar-days";
         DateTimeEntryBase.call(this, question, options);
     }
     DateEntry.prototype = Object.create(DateTimeEntryBase.prototype);
@@ -831,7 +833,7 @@
     };
 
     function TimeEntry(question, options) {
-        this.templateType = 'time';
+        this.datetimeIconClass = "fa-regular fa-clock";
         if (question.style) {
             if (question.stylesContains(constants.TIME_12_HOUR)) {
                 this.clientFormat = 'h:mm A';

corehq/apps/cloudcare/static/cloudcare/js/formplayer/menus/views/query.js

@@ -1,4 +1,4 @@
 'use strict';
 hqDefine("cloudcare/js/formplayer/menus/views/query", [
     'jquery',
     'underscore',
@@ -267,6 +267,7 @@
                 errorMessage: this.errorMessage,
                 itemsetChoicesDict: itemsetChoicesDict,
                 contentTag: this.parentView.options.sidebarEnabled ? "div" : "td",
+                cid: this.options.model.cid,
             };
         },
 
@@ -474,7 +475,7 @@
             });
             cloudcareUtils.initDatePicker(this.ui.date, this.model.get('value'));
             this.ui.dateRange.each(function (index, el) {
-                hqTempusDominus.createDefaultDateRangePicker(el, {
+                hqTempusDominus.createDefaultDateRangePicker(el.parentNode, {
                     localization: {
                         format: dateFormat,
                     },

corehq/apps/cloudcare/static/cloudcare/js/utils.js

@@ -1,4 +1,4 @@
 'use strict';
 hqDefine('cloudcare/js/utils', [
     'jquery',
     'underscore',
@@ -379,7 +379,7 @@
         if (selectedDate) {
             options.viewDate = new hqTempusDominus.tempusDominus.DateTime(selectedDate);
         }
-        let picker = hqTempusDominus.createDatePicker($el.get(0), options);
+        let picker = hqTempusDominus.createDatePicker($el[0].parentNode, options);
 
         $el.attr("placeholder", dateFormat);
         $el.attr("pattern", "[0-9\\-\\/]+");
@@ -410,7 +410,7 @@
         if (date.isValid()) {
             options.viewDate = new hqTempusDominus.tempusDominus.DateTime(date);
         }
-        return hqTempusDominus.createTimePicker($el.get(0), options);
+        return hqTempusDominus.createTimePicker($el[0].parentNode, options);
     };
 
     var smallScreenIsEnabled = function () {

corehq/apps/cloudcare/templates/cloudcare/partials/all_templates.html

@@ -15,7 +15,6 @@
 {% include 'cloudcare/partials/form_entry/entry_blank.html' %}
 {% include 'cloudcare/partials/form_entry/entry_button.html' %}
 {% include 'cloudcare/partials/form_entry/entry_choice_label.html' %}
-{% include 'cloudcare/partials/form_entry/entry_date.html' %}
 {% include 'cloudcare/partials/form_entry/entry_datetime.html' %}
 {% include 'cloudcare/partials/form_entry/entry_dropdown.html' %}
 {% include 'cloudcare/partials/form_entry/entry_ethiopian_date.html' %}
@@ -27,7 +26,6 @@
 {% include 'cloudcare/partials/form_entry/entry_signature.html' %}
 {% include 'cloudcare/partials/form_entry/entry_str.html' %}
 {% include 'cloudcare/partials/form_entry/entry_text.html' %}
-{% include 'cloudcare/partials/form_entry/entry_time.html' %}
 {% include 'cloudcare/partials/form_entry/entry_unsupported.html' %}
 {% include 'cloudcare/partials/form_entry/form.html' %}
 {% include 'cloudcare/partials/form_entry/form_navigation.html' %}

corehq/apps/cloudcare/templates/cloudcare/partials/form_entry/entry_datetime.html

@@ -1,9 +1,19 @@
 <script type="text/html" id="datetime-entry-ko-template">
-  <div class="input-group">
+  <div
+    class="input-group"
+    data-td-target-input="nearest"
+    data-td-target-toggle="nearest"
+  >
     <input type="text" class="form-control" data-bind="
       css: { 'is-invalid': $parent.hasError() },
-      attr: { id: entryId, 'aria-required': $parent.required() ? 'true' : 'false' },
+      attr: {id: entryId, 'aria-required': $parent.required() ? 'true' : 'false',},
     "/>
-    <span class="input-group-text"><i class="fcc fcc-fd-datetime"></i></span>
+    <button
+      class="btn btn-outline-secondary"
+      type="button"
+      data-td-toggle="datetimepicker"
+    >
+      <i data-bind="class: datetimeIconClass"></i>
+    </button>
   </div>
 </script>

corehq/apps/cloudcare/templates/cloudcare/partials/query/item.html

@@ -44,23 +44,25 @@
         <% } %>
     </select>
 
-    <% } else if (input === "date") { %>
-    <div class="input-group">
+    <% } else if (input === "date" | input === "daterange") { %>
+    <div class="input-group"
+         data-td-target-input="nearest"
+         data-td-target-toggle="nearest"
+    >
       <input id="<%- text ? text : "" %>"
              type="text"
-             class="date query-field form-control<% if (errorMessage) { %> is-invalid<% } %>"
+             class="<%- input %> query-field form-control<% if (errorMessage) { %> is-invalid<% } %>"
              value="<%- value %>"
-             <% if (required) { %> aria-required="true"<% } %>>
-      <span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>
+             <% if (required) { %> aria-required="true"<% } %>
+      >
+      <button class="btn btn-outline-secondary"
+              type="button"
+              data-td-toggle="datetimepicker"
+      >
+        <i class="fa-solid fa-calendar-days"></i>
+      </button>
     </div>
 
-    <% } else if (input === "daterange") { %>
-    <input id="<%- text ? text : "" %>"
-           type="text"
-           class="daterange query-field form-control<% if (errorMessage) { %> is-invalid<% } %>"
-           value="<%- value %>"
-           <% if (required) { %> aria-required="true"<% } %>>
-
     <% } else if (input === "checkbox") { %>
     <fieldset multiple
               class="query-field<% if (errorMessage) { %> is-invalid<% } %>"

corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/requirejs_config.js

@@ -1,4 +1,4 @@
 "use strict";
 requirejs.config({
     baseUrl: '/static/',
     paths: {
@@ -20,7 +20,7 @@
         "popper": "@popperjs/core/dist/umd/popper.min",
         "sentry_browser": "sentry/js/sentry.browser.7.28.0.min",
         "sentry_captureconsole": "sentry/js/sentry.captureconsole.7.28.0.min",
-        "tempusDominus": "@eonasdan/tempus-dominus/dist/js/tempus-dominus.min",
+        "tempusDominus": "tempus-dominus/js/tempus-dominus",
         "underscore": "underscore/underscore",
         "nvd3/nv.d3.latest.min": "nvd3-1.8.6/build/nv.d3.min",
         "stripe": "https://js.stripe.com/v2/?noext",

corehq/apps/hqwebapp/static/hqwebapp/js/tempus_dominus.js

@@ -1,4 +1,4 @@
 "use strict";
 /**
   * This replaces hqwebapp/js/daterangepicker.config, which is tied to bootstrap3
   *
@@ -61,6 +61,7 @@
         let picker = new tempusDominus.TempusDominus(
             el, {
                 dateRange: true,
+                useCurrent: false,
                 multipleDatesSeparator: separator,
                 display: {
                     theme: 'light',
@@ -84,9 +85,15 @@
             picker.dates.setValue(new tempusDominus.DateTime(end), 1);
         }
 
+        picker.subscribe("change.td", function () {
+            // This won't close automatically on single-date ranges
+            if (picker.dates.picked.length === 2) {
+                picker.hide();
+            }
+        });
 
-        // Handle single-date ranges
         picker.subscribe("hide.td", function () {
+            // Handle single-date ranges
             if (picker.dates.picked.length === 1) {
                 picker.dates.setValue(picker.dates.picked[0], 0);
                 picker.dates.setValue(picker.dates.picked[0], 1);