From 351719bf51c15b65ee19ffc0040ff0b07691fa56 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Thu, 14 Nov 2019 12:44:37 -0500
Subject: [PATCH] Improve datePicker placeholder/icons

---
 css/civicrm.css      | 12 +++++++++---
 js/crm.datepicker.js | 23 ++++++++++++++++-------
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/css/civicrm.css b/css/civicrm.css
index 83214556d5..41bbaf7faa 100644
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -2684,9 +2684,15 @@ div.crm-container form {
   width: 9em;
 }
 
-.crm-container input.dateplugin::placeholder,
-.crm-container input.crm-form-date::placeholder,
-.crm-container input.crm-form-time::placeholder {
+.crm-container input.crm-placeholder-icon::placeholder {
+  font-family: "FontAwesome";
+  text-align: right;
+}
+.crm-container input.crm-placeholder-icon::-ms-input-placeholder {
+  font-family: "FontAwesome";
+  text-align: right;
+}
+.crm-container input.crm-placeholder-icon:-ms-input-placeholder {
   font-family: "FontAwesome";
   text-align: right;
 }
diff --git a/js/crm.datepicker.js b/js/crm.datepicker.js
index cf0719f78d..e1a15f85d0 100644
--- a/js/crm.datepicker.js
+++ b/js/crm.datepicker.js
@@ -24,6 +24,7 @@
         $dateField = $(),
         $timeField = $(),
         $clearLink = $(),
+        placeholder,
         hasDatepicker = settings.date !== false && settings.date !== 'yy',
         type = hasDatepicker ? 'text' : 'number';
 
@@ -33,21 +34,27 @@
       }
       if (settings.time !== false) {
         $timeField = $('<input>').insertAfter($dataField);
+        placeholder = settings.timePlaceholder || $dataField.attr('time-placeholder');
         CRM.utils.copyAttributes($dataField, $timeField, ['class', 'disabled']);
         $timeField
           .addClass('crm-form-text crm-form-time')
-          .attr('placeholder', $dataField.attr('time-placeholder') === undefined ? '\uf017' : $dataField.attr('time-placeholder'))
-          .attr('aria-label', $dataField.attr('time-placeholder') === undefined ? ts('Time') : $dataField.attr('time-placeholder'))
+          // Set default placeholder as clock icon (`fa-clock` is Unicode f017)
+          .attr('placeholder', placeholder === undefined ? '\uf017' : placeholder)
+          .attr('aria-label', placeholder === undefined ? ts('Time') : placeholder)
           .change(updateDataField)
           .timeEntry({
             spinnerImage: '',
             show24Hours: settings.time === true || settings.time === undefined ? CRM.config.timeIs24Hr : settings.time == '24'
           });
+        if (!placeholder) {
+          $timeField.addClass('crm-placeholder-icon');
+        }
       }
       if (settings.date !== false) {
         // Render "number" field for year-only format, calendar popup for all other formats
         $dateField = $('<input type="' + type + '">').insertAfter($dataField);
-        CRM.utils.copyAttributes($dataField, $dateField, ['placeholder', 'style', 'class', 'disabled', 'aria-label']);
+        CRM.utils.copyAttributes($dataField, $dateField, ['style', 'class', 'disabled', 'aria-label']);
+        placeholder = settings.placeholder || $dataField.attr('placeholder');
         $dateField.addClass('crm-form-' + type);
         if (!settings.minDate && !_.isUndefined(settings.start_date_years)) {
           settings.minDate = '' + (new Date().getFullYear() - settings.start_date_years) + '-01-01';
@@ -64,14 +71,16 @@
           if (!settings.yearRange && settings.minDate !== null && settings.maxDate !== null) {
             settings.yearRange = '' + CRM.utils.formatDate(settings.minDate, 'yy') + ':' + CRM.utils.formatDate(settings.maxDate, 'yy');
           }
-          // Set placeholder as calendar icon (`fa-calendar` is Unicode f073)
-          // and add datepicker
-          $dateField.addClass('crm-form-date').attr({placeholder: '\uF073'}).datepicker(settings);
+          $dateField.addClass('crm-form-date').datepicker(settings);
         } else {
           $dateField.attr('min', settings.minDate ? CRM.utils.formatDate(settings.minDate, 'yy') : '1000');
           $dateField.attr('max', settings.maxDate ? CRM.utils.formatDate(settings.maxDate, 'yy') : '4000');
         }
-        $dateField.change(updateDataField);
+        // Set placeholder as calendar icon (`fa-calendar` is Unicode f073)
+        $dateField.attr({placeholder: placeholder === undefined ? '\uF073' : placeholder}).change(updateDataField);
+        if (!placeholder) {
+          $dateField.addClass('crm-placeholder-icon');
+        }
       }
       // Rudimentary validation. TODO: Roll into use of jQUery validate and ui.datepicker.validation
       function isValidDate() {
-- 
2.25.1