Add multiple style improvements to new date picker and add actions

packages/bbui/src/Form/Core/DateTimePicker/Calendar.svelte

@@ -2,6 +2,7 @@
   import { cleanInput } from "./utils"
   import Select from "../../Select.svelte"
   import dayjs from "dayjs"
+  import NumberInput from "./NumberInput.svelte"
 
   export let value
   export let onChange
@@ -80,13 +81,10 @@
           on:change={e => (calendarDate = calendarDate.month(e.detail))}
         />
       </div>
-      <input
-        class="custom-num-input"
-        type="number"
+      <NumberInput
         value={calendarDate.year()}
-        min="0"
-        max="9999"
-        onclick="this.select()"
+        min={0}
+        max={9999}
         on:change={handleCalendarYearChange}
         on:input={cleanYear}
       />
@@ -173,7 +171,6 @@
 <style>
   /* Calendar overrides */
   .spectrum-Calendar {
-    padding: 8px;
     width: auto;
   }
   .spectrum-Calendar-title {
@@ -209,7 +206,7 @@
   .spectrum-Calendar-nextMonth,
   .spectrum-Calendar-prevMonth {
     order: 1;
-    padding: 4px 6px;
+    padding: 4px;
   }
   .spectrum-Calendar-date {
     color: var(--spectrum-alias-text-color);
@@ -217,4 +214,19 @@
   .spectrum-Calendar-date.is-selected {
     color: white;
   }
+
+  /* Style select */
+  .month-selector :global(.spectrum-Picker) {
+    background: none;
+    border: none;
+    padding: 4px 6px;
+  }
+  .month-selector :global(.spectrum-Picker:hover),
+  .month-selector :global(.spectrum-Picker.is-open) {
+    background: var(--spectrum-global-color-gray-200);
+  }
+  .month-selector :global(.spectrum-Picker-label) {
+    font-size: 18px;
+    font-weight: bold;
+  }
 </style>

packages/bbui/src/Form/Core/DateTimePicker/DateTimePicker.svelte

@@ -8,6 +8,7 @@
   import TimePicker from "./TimePicker.svelte"
   import Calendar from "./Calendar.svelte"
   import DateTimeInput from "./DateTimeField.svelte"
+  import ActionButton from "../../../ActionButton/ActionButton.svelte"
 
   export let id = null
   export let disabled = false
@@ -125,47 +126,46 @@
       {#if showCalendar}
         <Calendar value={parsedValue} onChange={handleChange} />
       {/if}
-      {#if showCalendar && showTime}
-        <hr />
-      {/if}
-      {#if showTime}
-        <TimePicker value={parsedValue} onChange={handleChange} />
-      {/if}
+      <div class="footer" class:spaced={showCalendar}>
+        {#if showTime}
+          <TimePicker value={parsedValue} onChange={handleChange} />
+        {/if}
+        <div class="actions">
+          <ActionButton
+            disabled={!value}
+            size="S"
+            on:click={() => handleChange(null)}
+          >
+            Clear
+          </ActionButton>
+          <ActionButton size="S" on:click={() => handleChange(dayjs())}>
+            {showTime ? "Now" : "Today"}
+          </ActionButton>
+        </div>
+      </div>
     </div>
   {/if}
 </Popover>
 
 <style>
-  hr {
-    margin: 4px 0 0 0;
-    height: 0;
-    border: none;
-    border-top: 1px solid var(--spectrum-global-color-gray-200);
+  .date-time-popover {
+    padding: 8px;
   }
-
-  /* Style inputs */
-  .date-time-popover :global(.spectrum-Picker),
-  .date-time-popover :global(input[type="number"]) {
-    background: none;
-    border: none;
-    outline: none;
-    color: var(--spectrum-alias-text-color);
-    padding: 4px 6px;
-    border-radius: 4px;
-    transition: background 130ms ease-out;
-    font-size: 18px;
-    font-weight: bold;
-    font-family: var(--font-sans);
-    -webkit-font-smoothing: antialiased;
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 32px;
   }
-  .date-time-popover :global(.spectrum-Picker:hover),
-  .date-time-popover :global(.spectrum-Picker.is-open),
-  .date-time-popover :global(input[type="number"]:hover) {
-    background: var(--spectrum-global-color-gray-200);
+  .footer.spaced {
+    padding-top: 14px;
   }
-  .date-time-popover :global(.spectrum-Picker-label) {
-    font-size: var(--spectrum-calendar-title-text-size);
-    font-weight: bold;
-    color: var(--spectrum-alias-text-color);
+  .actions {
+    padding: 4px 0;
+    flex: 1 1 auto;
+    display: flex;
+    justify-content: flex-end;
+    gap: 6px;
+    margin-right: 4px;
   }
 </style>

packages/bbui/src/Form/Core/DateTimePicker/NumberInput.svelte

@@ -0,0 +1,54 @@
+<script>
+  export let value
+  export let min
+  export let max
+  export let onChange
+  export let hideArrows = false
+  export let width
+
+  $: style = width ? `width:${width}px;` : ""
+</script>
+
+<input
+  class:hide-arrows={hideArrows}
+  type="number"
+  {style}
+  {value}
+  {min}
+  {max}
+  onclick="this.select()"
+  on:change
+  on:input
+/>
+
+<style>
+  input {
+    background: none;
+    border: none;
+    outline: none;
+    color: var(--spectrum-alias-text-color);
+    padding: 4px 6px 5px 6px;
+    border-radius: 4px;
+    transition: background 130ms ease-out;
+    font-size: 18px;
+    font-weight: bold;
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+  input:focus,
+  input:hover {
+    --space: 30px;
+    background: var(--spectrum-global-color-gray-200);
+    z-index: 1;
+  }
+
+  /* Hide built-in arrows */
+  input.hide-arrows::-webkit-outer-spin-button,
+  input.hide-arrows::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  input.hide-arrows {
+    -moz-appearance: textfield;
+  }
+</style>

packages/bbui/src/Form/Core/DateTimePicker/TimePicker.svelte

@@ -1,6 +1,7 @@
 <script>
   import { cleanInput } from "./utils"
   import dayjs from "dayjs"
+  import NumberInput from "./NumberInput.svelte"
 
   export let value
   export let onChange
@@ -22,22 +23,22 @@
 </script>
 
 <div class="time-picker">
-  <input
-    type="number"
+  <NumberInput
+    hideArrows
     value={displayValue.hour().toString().padStart(2, "0")}
-    min="0"
-    max="23"
-    onclick="this.select()"
+    min={0}
+    max={23}
+    width={20}
     on:input={cleanHour}
     on:change={handleHourChange}
   />
   <span>:</span>
-  <input
-    type="number"
+  <NumberInput
+    hideArrows
     value={displayValue.minute().toString().padStart(2, "0")}
-    min="0"
-    max="59"
-    onclick="this.select()"
+    min={0}
+    max={59}
+    width={20}
     on:input={cleanMinute}
     on:change={handleMinuteChange}
   />
@@ -45,7 +46,6 @@
 
 <style>
   .time-picker {
-    padding: 12px;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -54,12 +54,6 @@
     font-weight: bold;
     font-size: 18px;
     z-index: -1;
-    color: var(--spectrum-global-color-gray-700);
-  }
-  .time-picker input:first-child {
-    margin-right: -16px;
-  }
-  .time-picker input:last-child {
-    margin-left: 8px;
+    margin-bottom: 1px;
   }
 </style>

packages/client/src/components/app/forms/NewDateTimeField.svelte

@@ -0,0 +1,53 @@
+<script>
+  import { CoreDatePicker } from "@budibase/bbui"
+  import Field from "./Field.svelte"
+
+  export let field
+  export let label
+  export let placeholder
+  export let disabled = false
+  export let enableTime = true
+  export let timeOnly = false
+  export let time24hr = false
+  export let ignoreTimezones = false
+  export let validation
+  export let defaultValue
+  export let onChange
+
+  let fieldState
+  let fieldApi
+
+  const handleChange = e => {
+    const changed = fieldApi.setValue(e.detail)
+    if (onChange && changed) {
+      onChange({ value: e.detail })
+    }
+  }
+</script>
+
+<Field
+  {label}
+  {field}
+  {disabled}
+  {validation}
+  {defaultValue}
+  type="datetime"
+  bind:fieldState
+  bind:fieldApi
+>
+  {#if fieldState}
+    <CoreDatePicker
+      value={fieldState.value}
+      on:change={handleChange}
+      disabled={fieldState.disabled}
+      error={fieldState.error}
+      id={fieldState.fieldId}
+      appendTo={document.getElementById("flatpickr-root")}
+      {enableTime}
+      {timeOnly}
+      {time24hr}
+      {ignoreTimezones}
+      {placeholder}
+    />
+  {/if}
+</Field>