use dayjs for dates

This commit is contained in:
honzapatCZ 2026-06-03 15:15:08 +02:00
parent e46167ea63
commit a975be99e9
2 changed files with 11 additions and 24 deletions

View File

@ -1,5 +1,6 @@
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 Input, { useField } from "@shared/nej-react-components/Parts/Input"; import Input, { useField } from "@shared/nej-react-components/Parts/Input";
@ -7,16 +8,12 @@ export default function DateField(props) {
const [{onChange, value, ...field}, meta, helpers] = useField(props); const [{onChange, value, ...field}, meta, helpers] = useField(props);
let realDate = (typeof(value) === "string" ? new Date(Date.parse(value)) : value); const parsedDate = dayjs(value);
if(typeof(realDate) != "object") const isValid = value && parsedDate.isValid();
realDate = null;
//check if its ivnalid, if so make it null
if(isNaN(realDate))
realDate = null;
const {value: _x, onChange: _y, ...restProps} = props; const {value: _x, onChange: _y, ...restProps} = props;
return <Input type="date" return <Input type="date"
value={realDate?.toISOString().slice(0,10)} value={isValid ? parsedDate.format("YYYY-MM-DD") : ""}
onChange={(e)=>onChange(new Date(e.target.value))} {...field} {...restProps} />; onChange={(e)=>onChange(e.target.value ? dayjs(e.target.value).toDate() : null)} {...field} {...restProps} />;
} }

View File

@ -1,5 +1,6 @@
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 Input, { useField } from "@shared/nej-react-components/Parts/Input"; import Input, { useField } from "@shared/nej-react-components/Parts/Input";
@ -7,26 +8,15 @@ export default function DateTimeField(props) {
const [{onChange, value, ...field}, meta, helpers] = useField(props); const [{onChange, value, ...field}, meta, helpers] = useField(props);
//console.log(value) const parsedDate = dayjs(value);
/*** const isValid = value && parsedDate.isValid();
* @type {Date}
*/
let realDate = (typeof(value) === "string" ? new Date(Date.parse( (value.length > 19 || value.length < 10) ? value : value + "Z")) : value);
if(typeof(realDate) != "object")
realDate = null;
//check if its ivnalid, if so make it null
if(isNaN(realDate))
realDate = null;
const {value: _x, onChange: _y, ...restProps} = props; const {value: _x, onChange: _y, ...restProps} = props;
// console.log(realDate)
// console.log(realDate?.toISOString().slice(0,19))
return <Input type="datetime-local" return <Input type="datetime-local"
value={realDate?.toISOString().slice(0,16)} value={isValid ? parsedDate.format("YYYY-MM-DDTHH:mm") : ""}
onChange={(e)=>{ onChange={(e)=>{
const value = e.target.value; const val = e.target.value;
console.log( (value.length > 19 || value.length < 10) ? value : value + "Z") onChange(val ? dayjs(val).toDate() : null);
onChange(new Date( (value.length > 19 || value.length < 10) ? value : value + "Z"))
}} {...field} {...restProps} />; }} {...field} {...restProps} />;
} }