implement date field, for #9477

css/80_app.css

@@ -1536,7 +1536,11 @@ a.hide-toggle {
         border-color: #f1f1f1;
     }
 }
-.form-field-button.colour-selector {
+input.colour-selector {
+    visibility: hidden;
+    position: absolute;
+}
+input.date-selector {
     visibility: hidden;
     position: absolute;
 }

data/core.yaml

@@ -784,6 +784,7 @@ en:
       # abbreviation of inches
       inch: in
     max_length_reached: "This string is longer than the maximum length of {maxChars} characters. Anything exceeding that length will be truncated."
+    set_today: "Sets the value to today."
   background:
     title: Background
     description: Background Settings

modules/ui/fields/index.js

@@ -63,6 +63,7 @@ export var uiFields = {
     colour: uiFieldColour,
     combo: uiFieldCombo,
     cycleway: uiFieldDirectionalCombo,
+    date: uiFieldText,
     defaultCheck: uiFieldDefaultCheck,
     directionalCombo: uiFieldDirectionalCombo,
     email: uiFieldEmail,

modules/ui/fields/input.js

@@ -6,10 +6,11 @@ import * as countryCoder from '@ideditor/country-coder';
 import { presetManager } from '../../presets';
 import { fileFetcher } from '../../core/file_fetcher';
 import { t, localizer } from '../../core/localizer';
-import { utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent } from '../../util';
+import { utilDetect, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent } from '../../util';
 import { svgIcon } from '../../svg/icon';
 import { cardinal } from '../../osm/node';
 import { uiLengthIndicator } from '..';
+import { uiTooltip } from '../tooltip';
 
 export {
     uiFieldText as uiFieldColour,
@@ -208,38 +209,44 @@ export function uiFieldText(field, context) {
             input.attr('type', 'text');
 
             updateColourPreview();
+        } else if (field.type === 'date') {
+            input.attr('type', 'text');
+
+            updateDateField();
         }
     }
 
-    function isColourValid(colour) {
-        if (!colour.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
-            // OSM only supports hex or named colors
-            return false;
-        } else if (!CSS.supports('color', colour) || ['unset', 'inherit', 'initial', 'revert'].includes(colour)) {
-            // see https://stackoverflow.com/a/68217760/1627467
-            return false;
-        }
-        return true;
-    }
+
     function updateColourPreview() {
+        function isColourValid(colour) {
+            if (!colour.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
+                // OSM only supports hex or named colors
+                return false;
+            } else if (!CSS.supports('color', colour) || ['unset', 'inherit', 'initial', 'revert'].includes(colour)) {
+                // see https://stackoverflow.com/a/68217760/1627467
+                return false;
+            }
+            return true;
+        }
         wrap.selectAll('.colour-preview')
             .remove();
 
         const colour = utilGetSetValue(input);
 
-        if (!isColourValid(colour) && colour !== '') return;
+        if (!isColourValid(colour) && colour !== '') {
+            wrap.selectAll('input.colour-selector').remove();
+            wrap.selectAll('.form-field-button').remove();
+            return;
+        }
 
         var colourSelector = wrap.selectAll('.colour-selector')
             .data([0]);
-        outlinkButton = wrap.selectAll('.colour-preview')
-            .data([colour]);
 
         colourSelector
             .enter()
             .append('input')
             .attr('type', 'color')
-            .attr('class', 'form-field-button colour-selector')
-            .attr('value', colour)
+            .attr('class', 'colour-selector')
             .on('input', _debounce(function(d3_event) {
                 d3_event.preventDefault();
                 var colour = this.value;
@@ -248,8 +255,12 @@ export function uiFieldText(field, context) {
                 change()();
                 updateColourPreview();
             }, 100));
+        wrap.selectAll('input.colour-selector')
+            .attr('value', colour);
 
-        outlinkButton = outlinkButton
+        var chooserButton = wrap.selectAll('.colour-preview')
+            .data([colour]);
+        chooserButton = chooserButton
             .enter()
             .append('div')
             .attr('class', 'form-field-button colour-preview')
@@ -257,12 +268,83 @@ export function uiFieldText(field, context) {
             .style('background-color', d => d)
             .attr('class', 'colour-box');
         if (colour === '') {
-            outlinkButton = outlinkButton
+            chooserButton = chooserButton
                 .call(svgIcon('#iD-icon-edit'));
         }
-        outlinkButton
-            .on('click', () => wrap.select('.colour-selector').node().click())
-            .merge(outlinkButton);
+        chooserButton
+            .on('click', () => wrap.select('.colour-selector').node().showPicker());
+    }
+
+
+    function updateDateField() {
+        function isDateValid(date) {
+            return date.match(/^[0-9]{4}(-[0-9]{2}(-[0-9]{2})?)?$/);
+        }
+        wrap.selectAll('.date-preview') // todo: rename
+            .remove();
+
+        const date = utilGetSetValue(input);
+
+        const now = new Date();
+        const today = new Date(now.getTime() - now.getTimezoneOffset() * 60000).toISOString().split('T')[0];
+        if (field.key === 'check_date' && date !== today) {
+            wrap.selectAll('.date-set-today')
+                .data([0])
+                .enter()
+                .append('button')
+                .attr('class', 'form-field-button date-set-today')
+                .call(svgIcon('#fas-rotate'))
+                .call(uiTooltip().title(() => t.append('inspector.set_today')))
+                .on('click', () => {
+                    utilGetSetValue(input, today);
+                    change()();
+                    updateDateField();
+                });
+        } else {
+            wrap.selectAll('.date-set-today').remove();
+        }
+
+        if (!isDateValid(date) && date !== '') {
+            wrap.selectAll('input.date-selector').remove();
+            wrap.selectAll('.date-calendar').remove();
+            return;
+        }
+
+        if (utilDetect().browser !== 'Safari') {
+            console.log(utilDetect());
+            // opening of the calendar pick is not yet supported in safari <= 16
+            // https://caniuse.com/mdn-api_htmlinputelement_showpicker_date_input
+
+            var dateSelector = wrap.selectAll('.date-selector')
+                .data([0]);
+
+            dateSelector
+                .enter()
+                .append('input')
+                .attr('type', 'date')
+                .attr('class', 'date-selector')
+                .on('input', _debounce(function(d3_event) {
+                    d3_event.preventDefault();
+                    var date = this.value;
+                    if (!isDateValid(date)) return;
+                    utilGetSetValue(input, this.value);
+                    change()();
+                    updateDateField();
+                }, 100));
+            wrap.selectAll('input.date-selector')
+                .attr('value', date);
+
+            var calendarButton = wrap.selectAll('.date-calendar')
+                .data([date]);
+            calendarButton = calendarButton
+                .enter()
+                .append('button')
+                .attr('class', 'form-field-button date-calendar')
+                .call(svgIcon('#fas-calendar-days'));
+
+            calendarButton
+                .on('click', () => wrap.select('.date-selector').node().showPicker());
+        }
     }
 
 
@@ -362,7 +444,9 @@ export function uiFieldText(field, context) {
 
         if (field.type === 'tel') updatePhonePlaceholder();
 
-        if (field.key.split(':').includes('colour')) updateColourPreview();
+        if (field.type === 'colour') updateColourPreview();
+
+        if (field.type === 'date') updateDateField();
 
         if (outlinkButton && !outlinkButton.empty()) {
             var disabled = !validIdentifierValueForLink();

scripts/build_data.js

@@ -64,7 +64,9 @@ function buildData() {
     'fas-i-cursor',
     'fas-lock',
     'fas-th-list',
-    'fas-user-cog'
+    'fas-user-cog',
+    'fas-calendar-days',
+    'fas-rotate'
   ]);
   // add icons for QA integrations
   readQAIssueIcons(faIcons);

svg/fontawesome/fas-calendar-days.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="calendar-days" class="svg-inline--fa fa-calendar-days" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"></path></svg>

svg/fontawesome/fas-rotate.svg

@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rotate" class="svg-inline--fa fa-rotate" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M142.9 142.9c62.2-62.2 162.7-62.5 225.3-1L327 183c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H463.5c0 0 0 0 0 0H472c13.3 0 24-10.7 24-24V72c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2L413.4 96.6c-87.6-86.5-228.7-86.2-315.8 1C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5c7.7-21.8 20.2-42.3 37.8-59.8zM16 312v7.6 .7V440c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l41.6-41.6c87.6 86.5 228.7 86.2 315.8-1c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.2 62.2-162.7 62.5-225.3 1L185 329c6.9-6.9 8.9-17.2 5.2-26.2s-12.5-14.8-22.2-14.8H48.4h-.7H40c-13.3 0-24 10.7-24 24z"></path></svg>