| | |
| | | import { useState } from 'react'; |
| | | import { DatePicker } from '@wordpress/components'; |
| | | |
| | | const DateField = ({field, value, onChange}) => { |
| | | const [ date, setDate ] = useState( new Date() ); |
| | | // const [ date, setDate ] = useState( new Date() ); |
| | | |
| | | return ( |
| | | <div className="components-base-control" id={field.name}> |
| | | <label className="components-base-control__label"> |
| | | { field.label } |
| | | </label> |
| | | <DatePicker |
| | | currentDate={ date } |
| | | currentDate={ toLocalDate(value) } |
| | | onChange={ onChange } |
| | | help={ field.description } |
| | | value={value??''} |
| | | /> |
| | | { getDescription(field) } |
| | | </div> |
| | | ); |
| | | }; |
| | | |
| | | const toLocalDate = (value) => { |
| | | if (!value) return null; |
| | | const [year, month, day] = value.split('-').map(Number); |
| | | if (!year || !month || !day) return null; |
| | | return new Date(year, month - 1, day); |
| | | }; |
| | | |
| | | const getDescription = (field) => { |
| | | if (!field.description || field.description.length === 0) return; |
| | | return ( |