(window.webpackJsonp=window.webpackJsonp||[]).push([[53],{631:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return x});var t=s(580),p=s.n(t),e=s(23),o=s.n(e),c=s(24),u=s.n(c),l=s(25),i=s.n(l),k=s(26),r=s.n(k),d=s(32),h=s.n(d),m=s(27),g=s.n(m),v=s(28),y=s.n(v),f=s(0),D=s.n(f),Y=s(111),C=s(82),w=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;eDateRangeQuickPicker\n

简单的时间范围选择组件, 提供前7天和前30天的快速选项.

\n

使用场景

\n

列表页 filter 区域快速选择日期使用

\n

代码演示

'}),D.a.createElement(S,{title:"基础用法",id:"Demobasic",src:'import { DateRangeQuickPicker, Notify } from \'zent\';\n\nclass Simple extends Component {\n state = {\n };\n\n handleChange = (value, chooseDays) => {\n Notify.success(JSON.stringify({ value, chooseDays }));\n this.setState({\n value,\n chooseDays\n });\n };\n\n handleChange1 = (value, chooseDays) => {\n Notify.success(JSON.stringify({ value, chooseDays }));\n this.setState({\n value1: value,\n chooseDays1: chooseDays\n });\n }\n\n render() {\n const { value, chooseDays, value1, chooseDays1 } = this.state;\n\n return (\n <div>\n <DateRangeQuickPicker\n onChange={this.handleChange}\n value={value}\n format="YYYY-MM-DD HH:mm:ss"\n valueType="number"\n chooseDays={chooseDays}\n />\n <br />\n <DateRangeQuickPicker\n onChange={this.handleChange1}\n value={value1}\n format="YYYY-MM-DD HH:mm:ss"\n chooseDays={chooseDays1}\n preset={[{\n text: \'今\',\n value: 0\n }, {\n text: \'昨\',\n value: 1\n }, {\n text: \'近7天\',\n value: 7\n }, {\n text: \'近30天\',\n value: 30\n }]}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},D.a.createElement(w)),D.a.createElement(S,{title:"快速选择时间范围",id:"Demopreset",src:'import { DateRangeQuickPicker, Notify } from \'zent\';\n\nclass Simple extends Component {\n state = {\n };\n\n handleChange = (value, chooseDays) => {\n Notify.success(JSON.stringify({ value, chooseDays }));\n this.setState({\n value,\n chooseDays\n });\n };\n\n handleChange1 = (value, chooseDays) => {\n Notify.success(JSON.stringify({ value, chooseDays }));\n this.setState({\n value1: value,\n chooseDays1: chooseDays\n });\n }\n\n render() {\n const { value, chooseDays, value1, chooseDays1 } = this.state;\n\n return (\n <div>\n <DateRangeQuickPicker\n onChange={this.handleChange}\n value={value}\n format="YYYY-MM-DD HH:mm:ss"\n valueType="number"\n chooseDays={chooseDays}\n />\n <br />\n <DateRangeQuickPicker\n onChange={this.handleChange1}\n value={value1}\n format="YYYY-MM-DD HH:mm:ss"\n chooseDays={chooseDays1}\n preset={[{\n text: \'上一周期\',\n value: [\'2019-01-01\', \'2019-01-02\']\n }, {\n text: \'一月\',\n value: [\'2019-01-01\', \'2019-01-31\']\n }]}\n />\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Simple />\n , mountNode\n);'},D.a.createElement(b)),D.a.createElement(N,{html:"

API

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值备选值
prefix自定义前缀string'zent'
className自定义类名string''
preset自定义快捷选项array[{text: '最近7天', value: 7}, {text: '最近30天', value: 30}]
onChange时间变更回调函数func
value起始、结束时间array[]
valueType设置 onChange 的返回值string'''date'\n, \n'number'\n, \n'string'
format返回日期字符串格式string'YYYY-MM-DD'\n 或 \n'YYYY-MM-DD HH:mm:ss'
chooseDays选择天数number\n|\narray
min可选日期的最小值string\n|\nDate''
max可选日期的最大值string\n|\nDate''
"}))}}]),a}(f.Component)}}]);