@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>
);
更多
你可能也喜欢
- @01ht/ht-account-settings 中文文档教程
- @134dd3v/uniswap-v3-core-0.8-support 中文文档教程
- @4-us-4-others/are.na 中文文档教程
- @a8k/plugin-typescript-template 中文文档教程
- @abramstyle/redux-api 中文文档教程
- @acarat/vue-grouped-table 中文文档教程
- @accessible/link 中文文档教程
- @acoustic-content-sdk/ng-logger 中文文档教程
- @acst11/etcher-sdk 中文文档教程
- @acte-de-presence/vfs-driver-memory 中文文档教程