在同一个选择器里选择日期和时间
通过设置isShowTime
,即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。
constructor(props) {
super(props)
this.state = {}
}
render() {
const {value1, value2} = this.state
return (
<div className="source">
<div className="block">
<span className="demonstration">默认</span>
<DatePicker
value={value1}
isShowTime={true}
placeholder="选择日期"
onChange={date=>{
console.debug("DatePicker1 changed: ", date)
this.setState({value1: date})
}}
disabledDate={time=>time.getTime() < Date.now() - 8.64e7}
/>
</div>
<div className="block">
<span className="demonstration">带快捷选项</span>
<DatePicker
ref={e=>this.datepicker2 = e}
isShowTime={true}
value={value2}
align="right"
placeholder="选择日期"
onChange={date=>{
console.debug("DatePicker2 changed: ", date)
this.setState({value2: date})
}}
shortcuts={[{
text: "今天",
onClick: (picker)=> {
this.setState({value2: new Date()})
this.datepicker2.togglePickerVisible()
}
}, {
text: "昨天",
onClick: (picker)=> {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
this.setState({value2: date})
this.datepicker2.togglePickerVisible()
}
}, {
text: "一周前",
onClick: (picker)=> {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
this.setState({value2: date})
this.datepicker2.togglePickerVisible()
}
}]}
/>
</div>
</div>
)
}
可在一个选择器中便捷地选择一个时间范围
constructor(props) {
super(props)
this.state = {value1: null, value2: null}
}
render() {
const {value1, value2} = this.state
return (
<div className="source">
<div className="block">
<span className="demonstration">默认</span>
<DateRangePicker
value={value1}
placeholder="选择日期范围"
isShowTime={true}
onChange={date=>{
console.debug("DateRangePicker1 changed: ", date)
this.setState({value1: date})
}}
/>
</div>
<div className="block">
<span className="demonstration">带快捷选项</span>
<DateRangePicker
value={value2}
isShowTime={true}
placeholder="选择日期范围"
align="right"
ref={e=>this.daterangepicker2 = e}
onChange={date=>{
console.debug("DateRangePicker2 changed: ", date)
this.setState({value2: date})
}}
shortcuts={[{
text: "最近一周",
onClick: ()=> {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
this.setState({value2: [start, end]})
this.daterangepicker2.togglePickerVisible()
}
}, {
text: "最近一个月",
onClick: ()=> {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
this.setState({value2: [start, end]})
this.daterangepicker2.togglePickerVisible()
}
}, {
text: "最近三个月",
onClick: ()=> {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
this.setState({value2: [start, end]})
this.daterangepicker2.togglePickerVisible()
}
}]}
/>
</div>
</div>
)
}
和 DatePicker 相同
Checkbox 多选框一组备选项中进行多选基础用法单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍...
通过拖动滑块在一个固定区间内进行选择基础用法在拖动滑块时,显示当前值通过设置绑定值自定义滑块的初始值templatediv class="b...
Progress 进度条用于展示操作进度,告知用户当前状态和预期。线形进度条Progress 组件设置percentage属性即可,表示进度条对应的...
使用tooltip设置该主题河流图特定的提示框浮层,本节介绍了此提示框浮层的一些属性。主题河流图提示框浮层属性position注意:ser...
ECharts 中提示框组件可以在多种地方使用,如:可以设置在全局,即tooltip可以设置在坐标系中,即grid.tooltip、polar.tooltip、...
graphic.elements[i]-ringECharts 圆环图形元素配置。graphic.elements[i]-ring.type |string[ default: ring ]用 setOption 首...
Highcharts 反向条形图Highcharts 条形图以下实例演示了使用负值的,反向条形图。实例文件名:highcharts_bar_negative.htmhtmlh...
AngularJS ng-blur 指令 AngularJS 参考手册AngularJS 实例当输入框失去焦点(onblur)时执行表达式:input ng-blur="count = count...