@10xjs/date-input-controller 中文文档教程
@10xjs/date-input-controller
用于在 React 中创建日期时间输入的辅助组件。
import DateInputController from '@10xjs/date-input-controller';
const range = (start, end) => {
return Array(...Array(1 + end - start)).map((_, i) => start + i);
}
const DateInput = ({value, min, max, onChange}) => (
<DateInputController value={value} min={min} max={max} onChange={onChange}>
{(props) => (
<div>
year{" "}
<select value={props.year} onChange={(e) => props.setYear(e.target.value)}>
{range(props.yearMin, props.yearMax).map((value) => (
<option key={value} value={value}>{value}</option>
))}
</select>{" "}
month{" "}
<select value={props.month} onChange={(e) => props.setMonth(e.target.value)}>
{range(props.monthMin, props.monthMax).map((value) => (
<option key={value} value={value}>
{new Date(1970, value, 1).toLocaleString(
'en-US',
{ month: "long" }
)}
</option>
))}
</select>{" "}
day{" "}
<select value={props.day} onChange={(e) => props.setDay(e.target.value)}>
{range(props.dayMin, props.dayMax).map((value) => (
<option key={value} value={value}>{value}</option>
))}
</select>{" "}
<br/>
time{" "}
<select value={props.hour} onChange={(e) => props.setHour(e.target.value)}>
{range(props.hourMin, props.hourMax).map((value) => (
<option key={value} value={value}>
{value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
</option>
))}
</select>
:
<select value={props.minute} onChange={(e) => props.setMinute(e.props.target.value)}>
{range(props.minuteMin, props.minuteMax).map((value) => (
<option key={value} value={value}>
{value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
</option>
))}
</select>
:
<select value={props.second} onChange={(e) => props.setSecond(e.target.value)}>
{range(props.secondMin, props.secondMax).map((value) => (
<option key={value} value={value}>
{value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
</option>
))}
</select>
</div>
)}
<DateInputController>
);
@10xjs/date-input-controller
A helper component for creating datetime inputs in React.
import DateInputController from '@10xjs/date-input-controller';
const range = (start, end) => {
return Array(...Array(1 + end - start)).map((_, i) => start + i);
}
const DateInput = ({value, min, max, onChange}) => (
<DateInputController value={value} min={min} max={max} onChange={onChange}>
{(props) => (
<div>
year{" "}
<select value={props.year} onChange={(e) => props.setYear(e.target.value)}>
{range(props.yearMin, props.yearMax).map((value) => (
<option key={value} value={value}>{value}</option>
))}
</select>{" "}
month{" "}
<select value={props.month} onChange={(e) => props.setMonth(e.target.value)}>
{range(props.monthMin, props.monthMax).map((value) => (
<option key={value} value={value}>
{new Date(1970, value, 1).toLocaleString(
'en-US',
{ month: "long" }
)}
</option>
))}
</select>{" "}
day{" "}
<select value={props.day} onChange={(e) => props.setDay(e.target.value)}>
{range(props.dayMin, props.dayMax).map((value) => (
<option key={value} value={value}>{value}</option>
))}
</select>{" "}
<br/>
time{" "}
<select value={props.hour} onChange={(e) => props.setHour(e.target.value)}>
{range(props.hourMin, props.hourMax).map((value) => (
<option key={value} value={value}>
{value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
</option>
))}
</select>
:
<select value={props.minute} onChange={(e) => props.setMinute(e.props.target.value)}>
{range(props.minuteMin, props.minuteMax).map((value) => (
<option key={value} value={value}>
{value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
</option>
))}
</select>
:
<select value={props.second} onChange={(e) => props.setSecond(e.target.value)}>
{range(props.secondMin, props.secondMax).map((value) => (
<option key={value} value={value}>
{value.toLocaleString('en-US', {minimumIntegerDigits: 2})}
</option>
))}
</select>
</div>
)}
<DateInputController>
);