DateInput should accept min and max

main
Ashelyn Dawn 4 years ago
parent 3f4f0cd828
commit c73c13a9b0

@ -9,7 +9,7 @@ import styles from './styles.module.css'
// TODO: At some point make the date input better for accessibility
// (currently just skips tab index)
export default function Input({placeholder: _placeholder, label: _label, error, hint, name, value, onChange, onBlur, isValid}){
export default function DateInput({placeholder: _placeholder, label: _label, error, hint, name, value, onChange, onBlur, isValid, minDate, maxDate}){
const label = (_label === undefined) ? name.replace(name[0], name[0].toUpperCase()) : _label
const displayedValue = value ? DateTime.fromISO(value).toFormat('LLLL dd, yyyy') : _placeholder
const inputRef = useRef()
@ -22,7 +22,7 @@ export default function Input({placeholder: _placeholder, label: _label, error,
}
const handleCancel = () => {
setModal(false)
setImmediate(()=>inputRef.current?.blur())
setTimeout(()=>inputRef.current?.blur(), 0)
}
return (
@ -40,7 +40,8 @@ export default function Input({placeholder: _placeholder, label: _label, error,
layout: 'landscape',
showTodayHelper: false
}}
maxDate={new Date()}
minDate={minDate}
maxDate={maxDate}
selected={value ? DateTime.fromISO(value).toJSDate() : undefined}
onSelect={handleDateSelect}
/>

@ -17,7 +17,7 @@ export default function EnterDelivery({uuid}){
<p>Use this to enter delivery information for packages delivered in-person or at a con.</p>
<p>In case we ever have future corespondence with this person, please be sure to describe where, when, and to who you gave the package.</p>
<TextArea label="Description" validate={val => val.length > 0} type="text" name="description" hint="Please describe how and where you delivered the order to them" />
<DateInput label="Delivery Date" placeholder="Today" name="date" />
<DateInput label="Delivery Date" placeholder="Today" name="date" maxDate={new Date()} />
<Button type="submit">Submit</Button>
</FormController>
</>

@ -16,7 +16,7 @@ export default function EnterTracking({uuid}){
<FormController afterSubmit={() => Router.push(`/admin/orders/${uuid}`)} url={`/api/orders/${uuid}/ship/tracking`}>
<p>Use this to enter tracking information for packages shipped by-hand (via USPS)</p>
<Input label="Tracking Code" validate={val => val.length > 0} type="text" name="code" hint="Please enter the USPS Tracking code" />
<DateInput label="Ship Date" placeholder="Today" name="date" />
<DateInput label="Ship Date" placeholder="Today" name="date" maxDate={new Date()} />
<DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
<Button type="submit">Submit</Button>
</FormController>

Loading…
Cancel
Save