You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.8 KiB
68 lines
1.8 KiB
<script lang="ts">
|
|
import { format, fromUnixTime, getUnixTime, parse } from "date-fns";
|
|
|
|
import {
|
|
Input,
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupText,
|
|
} from "sveltestrap";
|
|
import { SearchDateFormatStr } from "../api/util";
|
|
|
|
interface IDateTimeParts {
|
|
date: string;
|
|
time: string;
|
|
}
|
|
|
|
const fromDateTimeParts = ({ date, time }: IDateTimeParts): Date =>
|
|
parse(`${date} ${time}`, SearchDateFormatStr, new Date());
|
|
|
|
const toDateTimeParts = (dt: Date = new Date()): IDateTimeParts => ({
|
|
date: format(dt, "yyyy-MM-dd"),
|
|
time: format(dt, "HH:mm:ss"),
|
|
});
|
|
|
|
const isDate = (v: string) =>
|
|
(v.match(/[\d]{4}-\d{2}-\d{2}/) || []).length > 0;
|
|
|
|
export let label: string = "label";
|
|
export let defaultValue: Date = new Date();
|
|
export let value: Date = defaultValue;
|
|
|
|
$: dateTimeParts = toDateTimeParts(value || defaultValue || new Date());
|
|
|
|
const update = ({ target: { value: v } }) => {
|
|
if (!dateTimeParts) {
|
|
dateTimeParts = toDateTimeParts(defaultValue);
|
|
return;
|
|
}
|
|
|
|
const { date, time } = dateTimeParts;
|
|
|
|
let dateTimePartsInput = isDate(v)
|
|
? { date: v, time }
|
|
: { date, time: v };
|
|
|
|
value = fromDateTimeParts(dateTimePartsInput);
|
|
// dateTimeParts = toDateTimeParts(value);
|
|
};
|
|
</script>
|
|
|
|
<InputGroup class="flex flex-row">
|
|
<InputGroupAddon addonType="prepend">
|
|
<InputGroupText>{label}</InputGroupText>
|
|
</InputGroupAddon>
|
|
<Input
|
|
bsSize="sm"
|
|
type="date"
|
|
value={dateTimeParts.date}
|
|
on:change={update}
|
|
/>
|
|
<Input
|
|
bsSize="sm"
|
|
type="time"
|
|
value={dateTimeParts.time}
|
|
on:change={update}
|
|
/>
|
|
</InputGroup>
|