Nejcraft/nej-react-utils
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dates

Browse Source
This commit is contained in:
honzapatCZ 2026-06-03 17:01:55 +02:00
parent c1f672bcf6
commit 16a81d9eb7
2 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
Form/Core/DateFields.js
View File

@ -1,8 +1,10 @@
import tw, { styled } from "twin.macro"; import tw, { styled } from "twin.macro";
import "styled-components/macro"; import "styled-components/macro";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { DatePickerInput } from '@mantine/dates';
import '@mantine/dates/styles.css';
import Input, { useField } from "@shared/nej-react-components/Parts/Input"; import { useField } from "@shared/nej-react-components/Parts/Input";
export default function DateField(props) { export default function DateField(props) {
@ -13,7 +15,10 @@ export default function DateField(props) {
const {value: _x, onChange: _y, ...restProps} = props; const {value: _x, onChange: _y, ...restProps} = props;
return <Input type="date" return <DatePickerInput
value={isValid ? parsedDate.format("YYYY-MM-DD") : ""} value={isValid ? parsedDate.toDate() : null}
onChange={(e)=>onChange({ target: { value: e.target.value ? dayjs(e.target.value).toDate() : null, name: field.name } })} {...field} {...restProps} />; onChange={(val)=>onChange({ target: { value: val, name: field.name } })}
{...field}
{...restProps}
/>;
} }

25
Form/Core/DateTimeField.js
View File

@ -1,22 +1,31 @@
import tw, { styled } from "twin.macro"; import tw, { styled } from "twin.macro";
import "styled-components/macro"; import "styled-components/macro";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { DateTimePicker } from '@mantine/dates';
import '@mantine/dates/styles.css';
import Input, { useField } from "@shared/nej-react-components/Parts/Input"; dayjs.extend(utc);
import { useField } from "@shared/nej-react-components/Parts/Input";
export default function DateTimeField(props) { export default function DateTimeField(props) {
const [{onChange, value, ...field}, meta, helpers] = useField(props); const [{onChange, value, ...field}, meta, helpers] = useField(props);
const parsedDate = dayjs(value); const parsedDate = dayjs.utc(value);
const isValid = value && parsedDate.isValid(); const isValid = value && parsedDate.isValid();
const displayDate = isValid ? dayjs(parsedDate.format("YYYY-MM-DDTHH:mm:ss")).toDate() : null;
const {value: _x, onChange: _y, ...restProps} = props; const {value: _x, onChange: _y, ...restProps} = props;
return <Input type="datetime-local" return <DateTimePicker
value={isValid ? parsedDate.format("YYYY-MM-DDTHH:mm") : ""} value={displayDate}
onChange={(e)=>{ onChange={(val)=>{
const val = e.target.value; const outDate = val ? dayjs.utc(dayjs(val).format("YYYY-MM-DDTHH:mm:ss")).toDate() : null;
onChange({ target: { value: val ? dayjs(val).toDate() : null, name: field.name } }); onChange({ target: { value: outDate, name: field.name } });
}} {...field} {...restProps} />; }}
{...field}
{...restProps}
/>;
} }