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 // TODO: At some point make the date input better for accessibility
// (currently just skips tab index) // (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 label = (_label === undefined) ? name.replace(name[0], name[0].toUpperCase()) : _label
const displayedValue = value ? DateTime.fromISO(value).toFormat('LLLL dd, yyyy') : _placeholder const displayedValue = value ? DateTime.fromISO(value).toFormat('LLLL dd, yyyy') : _placeholder
const inputRef = useRef() const inputRef = useRef()
@ -22,7 +22,7 @@ export default function Input({placeholder: _placeholder, label: _label, error,
} }
const handleCancel = () => { const handleCancel = () => {
setModal(false) setModal(false)
setImmediate(()=>inputRef.current?.blur()) setTimeout(()=>inputRef.current?.blur(), 0)
} }
return ( return (
@ -40,7 +40,8 @@ export default function Input({placeholder: _placeholder, label: _label, error,
layout: 'landscape', layout: 'landscape',
showTodayHelper: false showTodayHelper: false
}} }}
maxDate={new Date()} minDate={minDate}
maxDate={maxDate}
selected={value ? DateTime.fromISO(value).toJSDate() : undefined} selected={value ? DateTime.fromISO(value).toJSDate() : undefined}
onSelect={handleDateSelect} 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>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> <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" /> <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> <Button type="submit">Submit</Button>
</FormController> </FormController>
</> </>

@ -16,7 +16,7 @@ export default function EnterTracking({uuid}){
<FormController afterSubmit={() => Router.push(`/admin/orders/${uuid}`)} url={`/api/orders/${uuid}/ship/tracking`}> <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> <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" /> <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)} /> <DecimalInput label="Price" name="price_cents" prefix="$" numDecimals={2} transform={float => Math.floor(float * 100)} />
<Button type="submit">Submit</Button> <Button type="submit">Submit</Button>
</FormController> </FormController>

Loading…
Cancel
Save