89 lines
2.3 KiB
Svelte
89 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte'
|
|
import { format, isValid, parse } from 'date-fns'
|
|
import { sendUserToast } from '$lib/toast'
|
|
|
|
export let value: string | undefined = undefined
|
|
export let autofocus: boolean | null = false
|
|
export let minDate: string | undefined = undefined
|
|
export let maxDate: string | undefined = undefined
|
|
export let dateFormat: string | undefined = 'dd-MM-yyyy'
|
|
export let disabled: boolean = false
|
|
|
|
let date: string | undefined = computeDate(value)
|
|
|
|
const dispatch = createEventDispatcher()
|
|
|
|
const defaultDateFormat = 'dd-MM-yyyy'
|
|
const defaultHtmlDateFormat = 'yyyy-MM-dd'
|
|
function computeDate(value: string | undefined) {
|
|
if (dateFormat === undefined) {
|
|
dateFormat = defaultDateFormat
|
|
}
|
|
if (value && value.length > 0) {
|
|
try {
|
|
let date = parse(value, dateFormat, new Date())
|
|
if (date.toString() === 'Invalid Date') {
|
|
console.debug('falling back to default html date format')
|
|
date = parse(value, defaultHtmlDateFormat, new Date())
|
|
}
|
|
const res = format(date, defaultHtmlDateFormat)
|
|
return res
|
|
} catch (error) {
|
|
sendUserToast(
|
|
`Failed to parse date: ${value} with format ${dateFormat} and ${defaultHtmlDateFormat}`,
|
|
true
|
|
)
|
|
console.error(`Failed to parse date: ${value}`, error)
|
|
return undefined
|
|
}
|
|
} else {
|
|
return undefined
|
|
}
|
|
}
|
|
|
|
function updateValue(newDate: string | undefined) {
|
|
if (newDate && isValid(new Date(newDate))) {
|
|
if (dateFormat === undefined) {
|
|
dateFormat = defaultDateFormat
|
|
}
|
|
|
|
try {
|
|
let dateFromValue: Date | undefined = newDate ? new Date(newDate + 'T00:00:00') : undefined
|
|
|
|
if (dateFromValue === undefined) {
|
|
return
|
|
}
|
|
|
|
const parsedDate = format(dateFromValue, dateFormat)
|
|
value = parsedDate
|
|
|
|
dispatch('change', value)
|
|
} catch (error) {
|
|
console.error('Failed to parse date:', error)
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
let randomId = 'datetarget-' + Math.random().toString(36).substring(7)
|
|
</script>
|
|
|
|
<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
|
|
<!-- svelte-ignore a11y-autofocus -->
|
|
<input
|
|
{disabled}
|
|
type="date"
|
|
bind:value={date}
|
|
{autofocus}
|
|
class="!w-full app-editor-input"
|
|
min={minDate}
|
|
max={maxDate}
|
|
on:change={() => {
|
|
if (date) {
|
|
updateValue(date)
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|