みてるぞ
be983e4ad1
Merge branch 'main' into feature/129 #129 Co-authored-by: miteruzo <miteruzo@naver.com> Reviewed-on: #265
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
|
|
import type { FC, FocusEvent } from 'react'
|
|
|
|
|
|
const pad = (n: number): string => n.toString ().padStart (2, '0')
|
|
|
|
|
|
const toDateTimeLocalValue = (d: Date) => {
|
|
const y = d.getFullYear ()
|
|
const m = pad (d.getMonth () + 1)
|
|
const day = pad (d.getDate ())
|
|
const h = pad (d.getHours ())
|
|
const min = pad (d.getMinutes ())
|
|
return `${ y }-${ m }-${ day }T${ h }:${ min }:00`
|
|
}
|
|
|
|
|
|
type Props = {
|
|
value?: string
|
|
onChange?: (isoUTC: string | null) => void
|
|
className?: string
|
|
onBlur?: (ev: FocusEvent<HTMLInputElement>) => void }
|
|
|
|
|
|
export default (({ value, onChange, className, onBlur }: Props) => {
|
|
const [local, setLocal] = useState ('')
|
|
|
|
useEffect (() => {
|
|
setLocal (value ? toDateTimeLocalValue (new Date (value)) : '')
|
|
}, [value])
|
|
|
|
return (
|
|
<input
|
|
className={cn ('border rounded p-2', className)}
|
|
type="datetime-local"
|
|
value={local}
|
|
onChange={ev => {
|
|
const v = ev.target.value
|
|
setLocal (v)
|
|
onChange?.(v ? (new Date (v)).toISOString () : null)
|
|
}}
|
|
onBlur={onBlur}/>)
|
|
}) satisfies FC<Props>
|