1
0
Fork 0
mirror of synced 2024-06-14 00:14:39 +12:00

Fix for #3758 - updating the datetime cell renderer and form component to be capable of display time only formats, as well as adding an option to only select the time component for a date time form field.

This commit is contained in:
mike12345567 2022-02-08 16:15:08 +00:00
parent 3d8354d155
commit 832e3bd76e
7 changed files with 100 additions and 64 deletions

View file

@ -14,16 +14,20 @@
export let value = null
export let placeholder = null
export let appendTo = undefined
export let timeOnly = false
const dispatch = createEventDispatcher()
const flatpickrId = `${generateID()}-wrapper`
let open = false
let flatpickr
let flatpickr, flatpickrOptions, isTimeOnly
$: isTimeOnly = !timeOnly && value ? !isNaN(new Date(`0-${value}`)) : timeOnly
$: flatpickrOptions = {
element: `#${flatpickrId}`,
enableTime: enableTime || false,
enableTime: isTimeOnly || enableTime || false,
noCalendar: isTimeOnly || false,
altInput: true,
altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
altFormat: isTimeOnly ? "H:i" : enableTime ? "F j Y, H:i" : "F j, Y",
wrap: true,
appendTo,
disableMobile: "true",
@ -35,6 +39,11 @@
if (newValue) {
newValue = newValue.toISOString()
}
// if time only set date component to today
if (timeOnly) {
const todayDate = new Date().toISOString().split("T")[0]
newValue = `${todayDate}T${newValue.split("T")[1]}`
}
dispatch("change", newValue)
}
@ -67,7 +76,11 @@
return null
}
let date
if (val instanceof Date) {
let time = new Date(`0-${val}`)
// it is a string like 00:00:00, just time
if (timeOnly || (typeof val === "string" && !isNaN(time))) {
date = time
} else if (val instanceof Date) {
// Use real date obj if already parsed
date = val
} else if (isNaN(val)) {
@ -77,7 +90,7 @@
// Treat as numerical timestamp
date = new Date(parseInt(val))
}
const time = date.getTime()
time = date.getTime()
if (isNaN(time)) {
return null
}
@ -88,69 +101,71 @@
}
</script>
<Flatpickr
bind:flatpickr
value={parseDate(value)}
on:open={onOpen}
on:close={onClose}
options={flatpickrOptions}
on:change={handleChange}
element={`#${flatpickrId}`}
>
<div
id={flatpickrId}
class:is-disabled={disabled}
class:is-invalid={!!error}
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
class:is-focused={open}
aria-readonly="false"
aria-required="false"
aria-haspopup="true"
{#key isTimeOnly}
<Flatpickr
bind:flatpickr
value={parseDate(value)}
on:open={onOpen}
on:close={onClose}
options={flatpickrOptions}
on:change={handleChange}
element={`#${flatpickrId}`}
>
<div
on:click={flatpickr?.open}
class="spectrum-Textfield spectrum-InputGroup-textfield"
id={flatpickrId}
class:is-disabled={disabled}
class:is-invalid={!!error}
class="flatpickr spectrum-InputGroup spectrum-Datepicker"
class:is-focused={open}
aria-readonly="false"
aria-required="false"
aria-haspopup="true"
>
{#if !!error}
<div
on:click={flatpickr?.open}
class="spectrum-Textfield spectrum-InputGroup-textfield"
class:is-disabled={disabled}
class:is-invalid={!!error}
>
{#if !!error}
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-icon-18-Alert" />
</svg>
{/if}
<input
data-input
type="text"
{disabled}
class="spectrum-Textfield-input spectrum-InputGroup-input"
{placeholder}
{id}
{value}
/>
</div>
<button
type="button"
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
tabindex="-1"
{disabled}
class:is-invalid={!!error}
on:click={flatpickr?.open}
>
<svg
class="spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
class="spectrum-Icon spectrum-Icon--sizeM"
focusable="false"
aria-hidden="true"
aria-label="Calendar"
>
<use xlink:href="#spectrum-icon-18-Alert" />
<use xlink:href="#spectrum-icon-18-Calendar" />
</svg>
{/if}
<input
data-input
type="text"
{disabled}
class="spectrum-Textfield-input spectrum-InputGroup-input"
{placeholder}
{id}
{value}
/>
</button>
</div>
<button
type="button"
class="spectrum-Picker spectrum-Picker--sizeM spectrum-InputGroup-button"
tabindex="-1"
{disabled}
class:is-invalid={!!error}
on:click={flatpickr?.open}
>
<svg
class="spectrum-Icon spectrum-Icon--sizeM"
focusable="false"
aria-hidden="true"
aria-label="Calendar"
>
<use xlink:href="#spectrum-icon-18-Calendar" />
</svg>
</button>
</div>
</Flatpickr>
</Flatpickr>
{/key}
{#if open}
<div class="overlay" on:mousedown|self={flatpickr?.close} />
{/if}

View file

@ -9,6 +9,7 @@
export let disabled = false
export let error = null
export let enableTime = true
export let timeOnly = false
export let placeholder = null
export let appendTo = undefined
@ -27,6 +28,7 @@
{value}
{placeholder}
{enableTime}
{timeOnly}
{appendTo}
on:change={onChange}
/>

View file

@ -2,9 +2,18 @@
import dayjs from "dayjs"
export let value
// adding the 0- will turn a string like 00:00:00 into a valid ISO
// date, but will make actual ISO dates invalid
$: time = new Date(`0-${value}`)
$: isTime = !isNaN(time)
</script>
<div>{dayjs(value).format("MMMM D YYYY, HH:mm")}</div>
<div>
{dayjs(isTime ? time : value).format(
isTime ? "HH:mm:ss" : "MMMM D YYYY, HH:mm"
)}
</div>
<style>
div {

View file

@ -2453,6 +2453,12 @@
"key": "enableTime",
"defaultValue": true
},
{
"type": "boolean",
"label": "Time Only",
"key": "timeOnly",
"defaultValue": false
},
{
"type": "text",
"label": "Default value",

View file

@ -7,6 +7,7 @@
export let placeholder
export let disabled = false
export let enableTime = false
export let timeOnly = false
export let validation
export let defaultValue
@ -33,6 +34,7 @@
id={fieldState.fieldId}
appendTo={document.getElementById("flatpickr-root")}
{enableTime}
{timeOnly}
{placeholder}
/>
{/if}

View file

@ -36,13 +36,9 @@ CREATE TABLE people
INSERT products
(name, description)
VALUES
('Bananas', 'Fruit thing');
INSERT products
(name, description)
VALUES
('Bananas', 'Fruit thing'),
('Meat', 'Animal thing');
INSERT tasks
(taskname, productid)
VALUES

View file

@ -19,6 +19,12 @@ CREATE TABLE Tasks (
FOREIGN KEY(PersonID)
REFERENCES Persons(PersonID)
);
CREATE TABLE Products (
id serial primary key,
name text,
updated time
);
INSERT INTO Persons (FirstName, LastName, Age, Address, City, CreatedAt) VALUES ('Mike', 'Hughes', 28.2, '123 Fake Street', 'Belfast', '2021-01-19 03:14:07');
INSERT INTO Tasks (PersonID, TaskName) VALUES (1, 'assembling');
INSERT INTO Tasks (PersonID, TaskName) VALUES (1, 'processing');
INSERT INTO Products (name, updated) VALUES ('Meat', '11:00:22'), ('Fruit', '10:00:00');