@10xjs/date-input-controller

A helper component for creating datetime inputs in React.

importDateInputControllerfrom'@10xjs/date-input-controller';constrange=(start,end)=>{returnArray(...Array(1+end-start)).map((_,i)=>start+i);}constDateInput=({value, min, max, onChange})=>(<DateInputControllervalue={value}min={min}max={max}onChange={onChange}>{(props)=>(<div>
year{" "}<selectvalue={props.year}onChange={(e)=>props.setYear(e.target.value)}>{range(props.yearMin,props.yearMax).map((value)=>(<optionkey={value}value={value}>{value}</option>))}</select>{" "}
month{" "}<selectvalue={props.month}onChange={(e)=>props.setMonth(e.target.value)}>{range(props.monthMin,props.monthMax).map((value)=>(<optionkey={value}value={value}>{newDate(1970,value,1).toLocaleString('en-US',{month: "long"})}</option>))}</select>{" "}
day{" "}<selectvalue={props.day}onChange={(e)=>props.setDay(e.target.value)}>{range(props.dayMin,props.dayMax).map((value)=>(<optionkey={value}value={value}>{value}</option>))}</select>{" "}<br/>
time{" "}<selectvalue={props.hour}onChange={(e)=>props.setHour(e.target.value)}>{range(props.hourMin,props.hourMax).map((value)=>(<optionkey={value}value={value}>{value.toLocaleString('en-US',{minimumIntegerDigits: 2})}</option>))}</select>
:
<selectvalue={props.minute}onChange={(e)=>props.setMinute(e.props.target.value)}>{range(props.minuteMin,props.minuteMax).map((value)=>(<optionkey={value}value={value}>{value.toLocaleString('en-US',{minimumIntegerDigits: 2})}</option>))}</select>
:
<selectvalue={props.second}onChange={(e)=>props.setSecond(e.target.value)}>{range(props.secondMin,props.secondMax).map((value)=>(<optionkey={value}value={value}>{value.toLocaleString('en-US',{minimumIntegerDigits: 2})}</option>))}</select></div>)}<DateInputController>
);