xa-time-picker

时间选择组件,使用方式与 ANTD 一致:

Usage no npm install needed!

<script type="module">
  import xaTimePicker from 'https://cdn.skypack.dev/xa-time-picker';
</script>

README

xa-time-picker

时间选择组件,使用方式与 ANTD 一致:

 //受控组件: 
<TimePicker value={this.state.value} onChange={this.onChange} defaultOpenValue={moment('12:24:48', 'HH:mm:ss')} /> 
 //禁用组件: 
<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />         
 //选择时分: 
<TimePicker defaultValue={moment('12:08', 'HH:mm')} format={'HH:mm'} />         
 //选择步长: 
<TimePicker minuteStep={15} secondStep={10} />         
 //附加组件: 
<TimePicker open={this.state.open}
    onOpenChange={this.handleOpenChange}
    addon={() => (<button onClick={this.handleClose}>关闭</button>)}
    />
 //十二小时: 
<TimePicker use12Hours />
//禁用部分时分秒:
<TimePicker disabledHours={() => [0, 1, 2, 3]}
    disabledMinutes={(selectedHour) => selectedHour === 4 ? [0, 1, 2, 3] : []}
    />
参数 说明 类型 默认值
format 展示的时间格式 string "HH:mm:ss"
value 选中的时间 moment
defaultValue 默认时间 moment
defaultOpenValue 面板打开时默认选中的值 moment moment()
disabled 禁用全部操作 boolean false
disabledHours 禁止选择部分小时选项 ()=>[]
disabledMinutes 禁止选择部分分钟选项 (selectedHour)=>[]
disabledSeconds 禁止选择部分秒选项 (selectedHour, selectedMinute)=>[]
hideDisabledOptions 隐藏禁止选择的选项 boolean false
open 面板是否打开 boolean false
placeholder 没有值的时候显示的内容 string "请选择时间"
use12Hours 使用 12 小时制,为 true 时 format 默认为 h:mm:ss a boolean false
onChange 时间发生变化的回调 (time, timeString)=>{}
onOpenChange 面板打开/关闭时的回调 (isOpen)=>{}
addon 选择框底部显示自定义的内容 ReactElement