用于选择或输入日期
提供几个固定的时间点供用户选择
使用 TimeSelect
标签,分别通过star
、end
和step
指定可选的起始时间、结束时间和步长
constructor(props) {
super(props)
this.state = {
value: new Date(2016, 9, 10, 8, 30),
}
}
handleUpdate(value) {
console.debug("time-select update: ", value)
}
render() {
return (
<TimeSelect
start="08:30"
step="00:15"
end="18:30"
maxTime="12:30"
onChange={this.handleUpdate.bind(this)}
value={this.state.value}
placeholder="选择时间"
/>
)
}
可以选择任意时间
使用 TimePicker
标签,分别通过star
、end
和step
指定可选的起始时间、结束时间和步长
constructor(props) {
super(props)
this.state = {
value: new Date(2016, 9, 10, 18, 40)
}
}
handleUpdate(value) {
console.debug("time-picker update: ", value)
}
render() {
return (
<TimePicker
onChange={this.handleUpdate.bind(this)}
selectableRange="18:30:00 - 20:30:00"
placeholder="选择时间"
value={this.state.value}
/>
)
}
若先选择开始时间,则结束时间内备选项的状态会随之改变
constructor(props) {
super(props)
this.state = {
startDate: new Date(2016, 9, 10, 14, 30),
endDate: new Date(2016, 9, 10, 15, 30)
}
}
handleStartUpdate(startDate) {
console.debug("time-select startDate update: ", startDate)
this.setState({startDate})
}
handleEndUpdate(endDate){
console.debug("time-select endDate update: ", endDate)
this.setState({endDate})
}
render() {
return (
<div>
<TimeSelect
start="08:30"
step="00:15"
end="18:30"
onChange={this.handleStartUpdate.bind(this)}
value={this.state.startDate}
placeholder="选择时间"
/>
<TimeSelect
start="08:30"
step="00:15"
end="18:30"
onChange={this.handleEndUpdate.bind(this)}
value={this.state.endDate}
minTime={this.state.startDate}
placeholder="选择时间"
/>
</div>
)
}
可选择任意的时间范围
blah
constructor(props) {
super(props)
this.state = {
value: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
}
}
handleUpdate(value) {
console.debug("time-picker update: ", value)
}
render() {
return (
<TimeRangePicker
pickerWidth={300}
onChange={this.handleUpdate.bind(this)}
placeholder="选择时间"
value={this.state.value}
/>
)
}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
align | 对齐方式 | string | left, center, right | left |
placeholder | 占位内容 | string | — | — |
isShowTrigger | 是否显示图标 | bool | - | - |
isReadOnly | 只读 | boolean | — | false |
isDisabled | 是否禁用 | boolean | — | false |
onFocus | onFocus | func:(TimeSelectReactComponent)=>() | — | - |
onBlur | onBlur | func:(TimeSelectReactComponent)=>() | — | - |
onChange | onChange | func:(value)=>() | — | - |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 值 | date/null | — | - |
start | 开始时间 | string | — | 09:00 |
end | 结束时间 | string | — | 18:00 |
step | 间隔时间 | string | — | 00:30 |
minTime | 最小时间 | date | — | - |
maxTime | 最大时间 | date | — | - |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 值 | date/null | — | - |
selectableRange | 可选时间段,例如 "18:30:00 - 20:30:00" 或者传入数组 ["09:30:00 - 12:00:00", "14:30:00 - 18:30:00"] |
string/string[] | — | — |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 值 | date[]/null | — | - |
selectableRange | 可选时间段,例如 "18:30:00 - 20:30:00" 或者传入数组 ["09:30:00 - 12:00:00", "14:30:00 - 18:30:00"] |
string/string[] | — | — |
rangeSeparator | 选择范围时的分隔符 | string | - | " - " |
Popover 弹出框基础用法Popover 的属性与 Tooltip 很类似,它们都是基于Vue-popper开发的,因此对于重复属性,请参考 Tooltip 的...
Bootstrap4上提供了不同样式的按钮,这些按钮支持一系列上下文变量、尺寸、状态等设置。按钮样式:!DOCTYPE htmlhtmlheadtitleBo...
title.textStyle | *title.textStyle.color |Color[ default: '#333' ]主标题文字的颜色。title.textStyle.fontStyle | ...
Echarts 实现异步数据加载我们在入门第一课中是在初始化后的 setOption 中直接填入数据的,但大部分的时候我们需要将数据异步加...
Highcharts 3D柱形图Highcharts 3D图以下实例演示了3D柱形图。我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我...