33 lines
1008 B
JavaScript
33 lines
1008 B
JavaScript
import tw, { styled } from "twin.macro";
|
|
import "styled-components/macro";
|
|
import dayjs from "dayjs";
|
|
import { DatePickerInput } from '@mantine/dates';
|
|
import '@mantine/dates/styles.css';
|
|
|
|
import { useField } from "@shared/nej-react-components/Parts/Input";
|
|
|
|
export default function DateField(props) {
|
|
|
|
const [{onChange, value, ...field}, meta, helpers] = useField(props);
|
|
|
|
const parsedDate = typeof value === "string" && /^\d{4}-\d{2}-\d{2}/.test(value)
|
|
? dayjs(value.slice(0, 10))
|
|
: dayjs(value);
|
|
const isValid = value && parsedDate.isValid();
|
|
const displayDate = isValid ? parsedDate.toDate() : null;
|
|
|
|
const {value: _x, onChange: _y, ...restProps} = props;
|
|
|
|
return <DatePickerInput
|
|
value={displayDate}
|
|
onChange={(val)=>{
|
|
const outDate = val && dayjs(val).isValid() ? dayjs(val).format("YYYY-MM-DD") : null;
|
|
onChange({ target: { value: outDate, name: field.name } });
|
|
}}
|
|
{...field}
|
|
{...restProps}
|
|
/>;
|
|
}
|
|
|
|
export const DateOnlyField = DateField;
|