Fix validation and focus styling on datepickers

packages/standard-components/manifest.json

@@ -1263,6 +1263,12 @@
         "type": "text",
         "label": "Placeholder",
         "key": "placeholder"
+      },
+      {
+        "type": "boolean",
+        "label": "Show Time",
+        "key": "enableTime",
+        "defaultValue": true
       }
     ]
   }

packages/standard-components/src/forms/DateTimeField.svelte

@@ -7,28 +7,48 @@
   export let field
   export let label
   export let placeholder
+  export let enableTime
 
   let fieldState
   let fieldApi
-  let value
+  let open = false
-  $: fieldApi?.setValue(value)
+  let flatpickr
+
   $: flatpickrOptions = {
     element: `#${$fieldState?.id}-wrapper`,
-    enableTime: true,
+    enableTime: enableTime || false,
     altInput: true,
-    altFormat: "F j Y, H:i",
+    altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
   }
 
   const handleChange = event => {
-    const [fullDate] = event.detail
+    const [dates] = event.detail
-    value = fullDate
+    fieldApi.setValue(dates[0])
+  }
+
+  const onOpen = () => {
+    open = true
+  }
+
+  const onClose = () => {
+    open = false
+
+    // Manually blur all input fields since flatpickr creates a second
+    // duplicate input field.
+    // We need to blur both because the focus styling does not get properly
+    // applied.
+    const els = document.querySelectorAll(`#${$fieldState.id}-wrapper input`)
+    els.forEach(el => el.blur())
   }
 </script>
 
 <SpectrumField {label} {field} bind:fieldState bind:fieldApi>
   {#if fieldState}
     <Flatpickr
-      {value}
+      bind:flatpickr
+      value={$fieldState.value}
+      on:open={onOpen}
+      on:close={onClose}
       options={flatpickrOptions}
       on:change={handleChange}
       element={`#${$fieldState.id}-wrapper`}>
@@ -37,6 +57,7 @@
         aria-disabled="false"
         aria-invalid="false"
         class="flatpickr spectrum-InputGroup spectrum-Datepicker"
+        class:is-focused={open}
         aria-readonly="false"
         aria-required="false"
         aria-haspopup="true">
@@ -53,7 +74,8 @@
         <button
           type="button"
           class="spectrum-Picker spectrum-InputGroup-button"
-          tabindex="-1">
+          tabindex="-1"
+          on:click={flatpickr?.open}>
           <svg
             class="spectrum-Icon spectrum-Icon--sizeM"
             focusable="false"

packages/standard-components/src/forms/validation.js

@@ -92,10 +92,10 @@ const inclusionConstraint = (options = []) => value => {
 const dateConstraint = (dateString, isEarliest) => {
   const dateLimit = Date.parse(dateString)
   return value => {
-    if (value == null || value === "" || !value.length) {
+    if (value == null || value === "") {
       return null
     }
-    const dateValue = Date.parse(value[0])
+    const dateValue = Date.parse(value)
     const valid = isEarliest ? dateValue >= dateLimit : dateValue <= dateLimit
     const adjective = isEarliest ? "Earliest" : "Latest"
     const limitString = flatpickr.formatDate(new Date(dateLimit), "F j Y, H:i")