antd的TimePicker时间选择框不能定义超过 23时、59分及59秒
对于普通的时间选择足以应付,但如果对于赛事相关的时间选择就很不方便,赛事通常以90分钟这种量级计算,那么TimePicker就不能满足我们的需求了
所以我使用select组件重新制作了一下,效果如下
虽然很不完善,不过大体算满足了需求,实现起来也很简单,把四个select组件拼接一下就ok了
<div className={styles.timePicker}>
<Select
showArrow={false}
placeholder='分'
>
{optionsM}
</Select>
<span>:</span>
<Select
showArrow={false}
placeholder='秒'
>
{optionsS}
</Select>
<span>~</span>
<Select
showArrow={false}
placeholder='分'
>
{optionsM}
</Select>
<span>:</span>
<Select
showArrow={false}
placeholder='秒'
>
{optionsS}
</Select>
</div>
render中的循环创建option
let optionsM = [],optionsS = [];
for(let i=0; i<=99; i++){
let m;
i < 10 ? m = '0'+i : m = i;
optionsM.push(<Option key={m}>{m}</Option>)
}
for(let i=0; i<=59; i++){
let s;
i < 10 ? s = '0'+i : s = i;
optionsS.push(<Option key={s}>{s}</Option>)
}
样式就根据个人喜好自己制作吧