-
Notifications
You must be signed in to change notification settings - Fork 0
/
55-bc4eac5649ec72ccd951.js
1 lines (1 loc) · 112 KB
/
55-bc4eac5649ec72ccd951.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[55],{632: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),l=s.n(c),u=s(25),k=s.n(u),i=s(26),r=s.n(i),d=s(32),m=s.n(d),g=s(27),h=s.n(g),v=s(28),f=s.n(v),b=s(0),y=s.n(b),w=s(111),D=s(82),C=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return s=k()(this,(n=r()(a)).call.apply(n,[this].concat(p))),f()(m()(s),"state",{}),f()(m()(s),"onChangeTime",function(n){s.setState({timeValue:n})}),f()(m()(s),"onChangeTimeRange",function(n){s.setState({timeRangeValue:n})}),f()(m()(s),"onChangeQuarter",function(n){s.setState({quarterValue:n})}),f()(m()(s),"onChangeDate",function(n){s.setState({dateValue:n})}),f()(m()(s),"onChangeWeek",function(n){s.setState({weekValue:n})}),f()(m()(s),"onChangeMonth",function(n){s.setState({monthValue:n})}),f()(m()(s),"onChangeRange",function(n){s.setState({rangeValue:n})}),f()(m()(s),"onChangeYear",function(n){s.setState({yearValue:n})}),s}return h()(a,n),l()(a,[{key:"render",value:function(){var n=this.state,a=n.timeValue,s=n.timeRangeValue,t=n.dateValue,p=n.monthValue,e=n.rangeValue,o=n.weekValue,c=n.yearValue,l=n.quarterValue,u=new Date;return y.a.createElement("div",null,y.a.createElement(D.Cb,{className:"zent-picker-demo",value:a,onChange:this.onChangeTime,minuteStep:5}),y.a.createElement("br",null),y.a.createElement(D.Db,{className:"zent-picker-demo",value:s,onChange:this.onChangeTimeRange,showSecond:!0}),y.a.createElement("br",null),y.a.createElement(D.r,{className:"zent-picker-demo",value:t,max:"2020-01-01",onChange:this.onChangeDate}),y.a.createElement("br",null),y.a.createElement(D.Kb,{startDay:1,popPosition:"right",className:"zent-picker-demo",value:o,onChange:this.onChangeWeek}),y.a.createElement("br",null),y.a.createElement(D.bb,{className:"zent-picker-demo",value:p,max:u,onChange:this.onChangeMonth}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",value:e,onChange:this.onChangeRange}),y.a.createElement("br",null),y.a.createElement(D.Lb,{className:"zent-picker-demo",value:c,max:2020,onChange:this.onChangeYear}),y.a.createElement("br",null),y.a.createElement(D.mb,{valueType:"date",max:new Date,value:l,onChange:this.onChangeQuarter}))}}]),a}(b.Component);return y.a.createElement(n,null)},V=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return s=k()(this,(n=r()(a)).call.apply(n,[this].concat(p))),f()(m()(s),"state",{}),f()(m()(s),"onChangeDate",function(n){s.setState({dateValue:n})}),f()(m()(s),"onChangeMonth",function(n){s.setState({monthValue:n})}),f()(m()(s),"onChangeRange",function(n){s.setState({rangeValue:n})}),s}return h()(a,n),l()(a,[{key:"render",value:function(){var n=this.state,a=n.dateValue,s=n.monthValue,t=n.rangeValue;n.max;return y.a.createElement("div",null,y.a.createElement(D.r,{className:"zent-picker-demo",value:a,defaultValue:"1990-01-01",onChange:this.onChangeDate}),y.a.createElement("br",null),y.a.createElement(D.bb,{className:"zent-picker-demo",value:s,defaultValue:"2010-07",onChange:this.onChangeMonth}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",value:t,defaultValue:["2016-01-01","2017-01-01"],onChange:this.onChangeRange}))}}]),a}(b.Component);return y.a.createElement(n,null)},E=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return s=k()(this,(n=r()(a)).call.apply(n,[this].concat(p))),f()(m()(s),"state",{}),f()(m()(s),"onChangeDate",function(n){s.setState({dateValue:n})}),f()(m()(s),"onChangeMonth",function(n){s.setState({monthValue:n})}),f()(m()(s),"onChangeRange",function(n){s.setState({rangeValue:n})}),f()(m()(s),"onChangeRangeSplit",function(n){s.setState({rangeValue:n})}),s}return h()(a,n),l()(a,[{key:"render",value:function(){var n=this.state,a=n.dateValue,s=n.monthValue,t=n.rangeValue;return y.a.createElement("div",null,y.a.createElement(D.r,{className:"zent-picker-demo",format:"YYYY/MM/DD",value:a,onChange:this.onChangeDate}),y.a.createElement("br",null),y.a.createElement(D.bb,{className:"zent-picker-demo",format:"YYYY/MM",value:s,onChange:this.onChangeMonth}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",format:"YYYY-MM-DD",value:t,onChange:this.onChangeRangeSplit}))}}]),a}(b.Component);return y.a.createElement(n,null)},N=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return s=k()(this,(n=r()(a)).call.apply(n,[this].concat(p))),f()(m()(s),"state",{}),f()(m()(s),"onChangeDate",function(n){s.setState({dateValue:n})}),f()(m()(s),"onChangeRange",function(n){s.setState({rangeValue:n})}),s}return h()(a,n),l()(a,[{key:"render",value:function(){var n=this.state,a=n.dateValue,s=n.rangeValue;return y.a.createElement("div",null,y.a.createElement(D.r,{className:"zent-picker-demo",showTime:!0,format:"YYYY-MM-DD HH:mm:ss",min:new Date,value:a,onChange:this.onChangeDate}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",showTime:!0,min:new Date,format:"YYYY-MM-DD HH:mm:ss",value:s,onChange:this.onChangeRange}))}}]),a}(b.Component);return y.a.createElement(n,null)},M=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return s=k()(this,(n=r()(a)).call.apply(n,[this].concat(p))),f()(m()(s),"state",{}),f()(m()(s),"onChangeDate",function(n){s.setState({dateValue:n})}),f()(m()(s),"onChangeRange",function(n){s.setState({rangeValue:n})}),s}return h()(a,n),l()(a,[{key:"render",value:function(){var n=this.state,a=n.dateValue,s=n.rangeValue;return y.a.createElement("div",null,y.a.createElement("p",{className:"demo-subtitle"},"返回时间戳"),y.a.createElement(D.r,{className:"zent-picker-demo",valueType:"number",value:a,onChange:this.onChangeDate}),y.a.createElement("br",null),y.a.createElement("p",{className:"demo-subtitle"},"返回 Date 对象"),y.a.createElement(D.s,{className:"zent-picker-demo",valueType:"date",value:s,onChange:this.onChangeRange}))}}]),a}(b.Component);return y.a.createElement(n,null)},R=function(){return y.a.createElement("div",null,y.a.createElement(D.r,{className:"zent-picker-demo",value:"2017-01-01",disabled:!0}),y.a.createElement("br",null),y.a.createElement(D.bb,{className:"zent-picker-demo",disabled:!0}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",disabled:!0}))},P=function(){var n=new Date,a=function(a){function s(){var n,a;o()(this,s);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return a=k()(this,(n=r()(s)).call.apply(n,[this].concat(p))),f()(m()(a),"state",{}),f()(m()(a),"onChangeDate",function(n){a.setState({dateValue:n})}),f()(m()(a),"onChangeRange",function(n){a.setState({rangeValue:n})}),f()(m()(a),"onChangeWeek",function(n){a.setState({weekValue:n})}),a}return h()(s,a),l()(s,[{key:"disabledDate",value:function(n){return n.getDate()<15}},{key:"disabledRangeDate",value:function(n){return n.getMonth()%2==0}},{key:"disabledWeek",value:function(n){var a=new Date,s=new Date(a.getFullYear(),a.getMonth()-1,a.getDate()-2),t=new Date(a.getFullYear(),a.getMonth()+1,3,23,59,59,999);return n<s||n>t}},{key:"disabledRangeTime",value:function(n){return{disabledHour:function(a){return"start"===n?a<12:a>12},disabledMinute:function(n){return n>30},disabledSecond:function(a){return"start"===n?a<20:a>40}}}},{key:"render",value:function(){var a=this.state,s=a.dateValue,t=a.rangeValue,p=a.weekValue;return y.a.createElement("div",null,y.a.createElement(D.r,{className:"zent-picker-demo",max:n.getTime()+6048e5,min:n.getTime()-6048e5}),y.a.createElement("br",null),y.a.createElement(D.r,{className:"zent-picker-demo",disabledDate:this.disabledDate,value:s,onChange:this.onChangeDate}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",disabledDate:this.disabledRangeDate,value:t,onChange:this.onChangeRange}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",showTime:!0,format:"YYYY-MM-DD HH:mm:ss",disabledDate:this.disabledRangeDate,disabledTime:this.disabledRangeTime,value:t,onChange:this.onChangeRange}),y.a.createElement("br",null),y.a.createElement(D.Kb,{startDay:1,popPosition:"right",className:"zent-picker-demo",value:p,onChange:this.onChangeWeek,disabledDate:this.disabledWeek}))}}]),s}(b.Component);return y.a.createElement(a,null)},S=function(){new Date;var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return s=k()(this,(n=r()(a)).call.apply(n,[this].concat(p))),f()(m()(s),"state",{}),f()(m()(s),"onChange",function(n){s.setState({value:n})}),f()(m()(s),"onRangeChange",function(n){s.setState({rangeValue:n})}),s}return h()(a,n),l()(a,[{key:"disabledTime",value:function(){return{disabledHour:function(n){return n%2==0},disabledMinute:function(n){return n>30},disabledSecond:function(n){return n%30==0}}}},{key:"disabledRangeTime",value:function(n){return{disabledHour:function(a){return"start"===n?a>12:a<12},disabledMinute:function(a){return"start"===n?a>30:a<30},disabledSecond:function(a){return"start"===n?a>40:a<40}}}},{key:"render",value:function(){var n=this.state,a=n.value,s=n.rangeValue;return y.a.createElement("div",null,y.a.createElement(D.Cb,{className:"zent-picker-demo",value:a,showSecond:!0,disabledTime:this.disabledTime,onChange:this.onChange}),y.a.createElement("br",null),y.a.createElement(D.Db,{className:"zent-picker-demo",value:s,showSecond:!0,onChange:this.onRangeChange,disabledTime:this.disabledRangeTime}))}}]),a}(b.Component);return y.a.createElement(n,null)};function z(n){return y.a.createElement(n.tag,p()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function j(n){return y.a.createElement(z,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function Y(n){return y.a.createElement(z,{tag:"style",html:n.style})}var T=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,p=new Array(t),e=0;e<t;e++)p[e]=arguments[e];return s=k()(this,(n=r()(a)).call.apply(n,[this].concat(p))),f()(m()(s),"state",{showCode:!1}),f()(m()(s),"toggle",function(){s.setState({showCode:!s.state.showCode})}),s}return h()(a,n),l()(a,[{key:"render",value:function(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return y.a.createElement("div",{className:"zandoc-react-demo"},y.a.createElement("div",{className:"zandoc-react-demo__preview"},p),y.a.createElement("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle},y.a.createElement("div",{className:"zandoc-react-demo__title"},y.a.createElement("p",null,s||"")),y.a.createElement("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})),n&&y.a.createElement("pre",{className:"zandoc-react-demo__code"},y.a.createElement(z,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(b.Component),x=function(n){function a(){return o()(this,a),k()(this,r()(a).apply(this,arguments))}return h()(a,n),l()(a,[{key:"componentDidMount",value:function(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&Object(w.a)(document.documentElement,0,function n(a,s){for(;a;)return a.offsetTop&&"static"!==getComputedStyle(a).position&&(s+=a.offsetTop),n(a.parentNode,s);return s}(a,-9))}}},{key:"render",value:function(){return y.a.createElement("div",{className:"zandoc-react-container",key:null},y.a.createElement(Y,{style:".zent-picker-demo{\n\t\tmargin-bottom: 10px;\n\t\tmargin-right: 10px;\n\t}\n\t.demo-subtitle{\n\t\tmargin-bottom: 5px;\n\t\tfont-size: 12px;\n\t\tcolor: #666;\n\t}"}),y.a.createElement(j,{html:'<h2 class="anchor-heading"><a href="#datepicker-shi-jian-xuan-ze">¶</a><a href="javascript:void(0)" id="datepicker-shi-jian-xuan-ze" class="anchor-point"></a>DatePicker 时间选择</h2>\n<p>时间选择组件, 提供基础的时间、日期筛选功能。</p>\n<h3 class="anchor-heading"><a href="#shi-yong-zhi-nan">¶</a><a href="javascript:void(0)" id="shi-yong-zhi-nan" class="anchor-point"></a>使用指南</h3>\n<ul>\n<li>包含以下组件：<code>DatePicker</code>、<code>QuarterPicker</code>、<code>MonthPicker</code>、<code>WeekPicker</code>、<code>DateRangePicker</code>、<code>TimePicker</code>、<code>TimeRangePicker</code>。</li>\n<li><code>DatePicker</code> 和 <code>DateRangePicker</code> 可以通过 <code>showTime</code> 属性来支持时间的选择。</li>\n<li>通过 <code>format</code> 属性自定义日期字符串的格式，<code>format</code> 的详细说明见页面最后的表格。</li>\n</ul>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),y.a.createElement(T,{title:"基础的日期、自然周、月份、时间段选择",id:"Demobasic",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> TimePicker<span class="token punctuation">,</span> TimeRangePicker<span class="token punctuation">,</span> DatePicker<span class="token punctuation">,</span> MonthPicker<span class="token punctuation">,</span> QuarterPicker<span class="token punctuation">,</span> DateRangePicker<span class="token punctuation">,</span> WeekPicker<span class="token punctuation">,</span> YearPicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChangeTime</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n timeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeTimeRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n timeRangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeQuarter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n quarterValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n dateValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeWeek</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n weekValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeMonth</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n monthValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeYear</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n yearValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> timeValue<span class="token punctuation">,</span> timeRangeValue<span class="token punctuation">,</span> dateValue<span class="token punctuation">,</span> monthValue<span class="token punctuation">,</span> rangeValue<span class="token punctuation">,</span> weekValue<span class="token punctuation">,</span> yearValue<span class="token punctuation">,</span> quarterValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">const</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TimePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>timeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeTime<span class="token punctuation">}</span></span>\n <span class="token attr-name">minuteStep</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">5</span><span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TimeRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>timeRangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeTimeRange<span class="token punctuation">}</span></span>\n <span class="token attr-name">showSecond</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2020-01-01<span class="token punctuation">"</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeDate<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WeekPicker</span>\n <span class="token attr-name">startDay</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popPosition</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>weekValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeWeek<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonthPicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>monthValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>now<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeMonth<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeRange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>YearPicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>yearValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">2020</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeYear<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>QuarterPicker</span>\n <span class="token attr-name">valueType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span>\n <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>quarterValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeQuarter<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span>'},y.a.createElement(C)),y.a.createElement(T,{title:"通过 defaultValue 来控制面板弹出时默认显示的日期。",id:"Demodefaultvalue",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> MonthPicker<span class="token punctuation">,</span> DateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n dateValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeMonth</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n monthValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> dateValue<span class="token punctuation">,</span> monthValue<span class="token punctuation">,</span> rangeValue<span class="token punctuation">,</span> max <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1990-01-01<span class="token punctuation">"</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeDate<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonthPicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>monthValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2010-07<span class="token punctuation">"</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeMonth<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">defaultValue</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"2016-01-01"</span><span class="token punctuation">,</span> <span class="token string">"2017-01-01"</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeRange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span>'},y.a.createElement(V)),y.a.createElement(T,{title:"使用 format 属性来设置日期的显示格式",id:"Demoformat",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> MonthPicker<span class="token punctuation">,</span> DateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n dateValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeMonth</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n monthValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeRangeSplit</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> dateValue<span class="token punctuation">,</span> monthValue<span class="token punctuation">,</span> rangeValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY/MM/DD<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeDate<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonthPicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY/MM<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>monthValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeMonth<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY-MM-DD<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeRangeSplit<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span>'},y.a.createElement(E)),y.a.createElement(T,{title:"传入 showTime 同时选择时间和日期",id:"Demoshowtime",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> MonthPicker<span class="token punctuation">,</span> DateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n dateValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> dateValue<span class="token punctuation">,</span> rangeValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">showTime</span>\n <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY-MM-DD HH:mm:ss<span class="token punctuation">"</span></span>\n <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeDate<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">showTime</span>\n <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY-MM-DD HH:mm:ss<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeRange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span>'},y.a.createElement(N)),y.a.createElement(T,{title:"通过设置 valueType 来指定返回值的类型，默认为 string，支持 string | date | number，默认和传入的 value 类型一致",id:"Demovaluetype",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> MonthPicker<span class="token punctuation">,</span> DateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span><span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n dateValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> dateValue<span class="token punctuation">,</span> rangeValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-subtitle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>返回时间戳<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">valueType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeDate<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>demo-subtitle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>返回 Date 对象<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">valueType</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>date<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeRange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span>\n mountNode\n<span class="token punctuation">)</span>'},y.a.createElement(M)),y.a.createElement(T,{title:"传入 disabled 使输入框处于禁用状态",id:"Demodisabled",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> MonthPicker<span class="token punctuation">,</span> DateRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2017-01-01<span class="token punctuation">"</span></span>\n <span class="token attr-name">disabled</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>MonthPicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">disabled</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">disabled</span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span>'},y.a.createElement(R)),y.a.createElement(T,{title:"禁用部分日期，可以通过传入 disabledDate 函数来实现，返回 true 表示禁用。另外，DatePicker 支持传入 min/max 属性来实现简单禁用逻辑。",id:"Demodisableddate",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> DatePicker<span class="token punctuation">,</span> MonthPicker<span class="token punctuation">,</span> DateRangePicker<span class="token punctuation">,</span> WeekPicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> oneDay <span class="token operator">=</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChangeDate</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n dateValue<span class="token punctuation">:</span> val<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChangeWeek</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n weekValue<span class="token punctuation">:</span> val<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function">disabledDate</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> val<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator"><</span> <span class="token number">15</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">disabledRangeDate</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> val<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">disabledWeek</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> today <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> start <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>today<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> today<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">1</span><span class="token punctuation">,</span> today<span class="token punctuation">.</span><span class="token function">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> end <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>today<span class="token punctuation">.</span><span class="token function">getFullYear</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> today<span class="token punctuation">.</span><span class="token function">getMonth</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">23</span><span class="token punctuation">,</span> <span class="token number">59</span><span class="token punctuation">,</span> <span class="token number">59</span><span class="token punctuation">,</span> <span class="token number">999</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> val <span class="token operator"><</span> start <span class="token operator">||</span> val <span class="token operator">></span> end<span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">disabledRangeTime</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledHour</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> type <span class="token operator">===</span> <span class="token string">\'start\'</span> <span class="token operator">?</span> val <span class="token operator"><</span> <span class="token number">12</span> <span class="token punctuation">:</span> val <span class="token operator">></span> <span class="token number">12</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledMinute</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> type <span class="token operator">===</span> <span class="token string">\'start\'</span> <span class="token operator">?</span> val <span class="token operator">></span> <span class="token number">30</span> <span class="token punctuation">:</span> val <span class="token operator">></span> <span class="token number">30</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledSecond</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> type <span class="token operator">===</span> <span class="token string">\'start\'</span> <span class="token operator">?</span> val <span class="token operator"><</span> <span class="token number">20</span> <span class="token punctuation">:</span> val <span class="token operator">></span> <span class="token number">40</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n disabledHour<span class="token punctuation">,</span>\n disabledMinute<span class="token punctuation">,</span>\n disabledSecond<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> dateValue<span class="token punctuation">,</span> rangeValue<span class="token punctuation">,</span> weekValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">max</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>now<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">7</span> <span class="token operator">*</span> oneDay<span class="token punctuation">}</span></span>\n <span class="token attr-name">min</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>now<span class="token punctuation">.</span><span class="token function">getTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">-</span> <span class="token number">7</span> <span class="token operator">*</span> oneDay<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DatePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>disabledDate<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeDate<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>disabledRangeDate<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeRange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>DateRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">showTime</span>\n <span class="token attr-name">format</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>YYYY-MM-DD HH:mm:ss<span class="token punctuation">"</span></span>\n <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>disabledRangeDate<span class="token punctuation">}</span></span>\n <span class="token attr-name">disabledTime</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>disabledRangeTime<span class="token punctuation">}</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeRange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>WeekPicker</span>\n <span class="token attr-name">startDay</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token number">1</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">popPosition</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>right<span class="token punctuation">"</span></span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>weekValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChangeWeek<span class="token punctuation">}</span></span>\n <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>disabledWeek<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.a.createElement(P)),y.a.createElement(T,{title:"禁用部分时间，可以通过传入 disabledTime 函数来实现，返回 true 表示禁用。",id:"Demodisabledtime",src:'<span class="token keyword">import</span> <span class="token punctuation">{</span> TimePicker<span class="token punctuation">,</span> TimeRangePicker <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> oneDay <span class="token operator">=</span> <span class="token number">24</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">60</span> <span class="token operator">*</span> <span class="token number">1000</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">Demo</span> <span class="token keyword">extends</span> <span class="token class-name">Component</span> <span class="token punctuation">{</span>\n state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n <span class="token function-variable function">onChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n value<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function-variable function">onRangeChange</span> <span class="token operator">=</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n rangeValue<span class="token punctuation">:</span> val\n <span class="token punctuation">}</span><span class="token punctuation">)</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">disabledTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledHour</span> <span class="token operator">=</span> val <span class="token operator">=></span> val <span class="token operator">%</span> <span class="token number">2</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledMinute</span> <span class="token operator">=</span> val <span class="token operator">=></span> val <span class="token operator">></span> <span class="token number">30</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledSecond</span> <span class="token operator">=</span> val <span class="token operator">=></span> val <span class="token operator">%</span> <span class="token number">30</span> <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">;</span>\n\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n disabledHour<span class="token punctuation">,</span>\n disabledMinute<span class="token punctuation">,</span>\n disabledSecond<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">disabledRangeTime</span><span class="token punctuation">(</span>type<span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledHour</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> type <span class="token operator">===</span> <span class="token string">\'start\'</span> <span class="token operator">?</span> val <span class="token operator">></span> <span class="token number">12</span> <span class="token punctuation">:</span> val <span class="token operator"><</span> <span class="token number">12</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledMinute</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> type <span class="token operator">===</span> <span class="token string">\'start\'</span> <span class="token operator">?</span> val <span class="token operator">></span> <span class="token number">30</span> <span class="token punctuation">:</span> val <span class="token operator"><</span> <span class="token number">30</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token keyword">const</span> <span class="token function-variable function">disabledSecond</span> <span class="token operator">=</span> val <span class="token operator">=></span> <span class="token punctuation">{</span>\n <span class="token keyword">return</span> type <span class="token operator">===</span> <span class="token string">\'start\'</span> <span class="token operator">?</span> val <span class="token operator">></span> <span class="token number">40</span> <span class="token punctuation">:</span> val <span class="token operator"><</span> <span class="token number">40</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">{</span>\n disabledHour<span class="token punctuation">,</span>\n disabledMinute<span class="token punctuation">,</span>\n disabledSecond<span class="token punctuation">,</span>\n <span class="token punctuation">}</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n\n <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n <span class="token keyword">const</span> <span class="token punctuation">{</span> value<span class="token punctuation">,</span> rangeValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>state<span class="token punctuation">;</span>\n <span class="token keyword">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TimePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>value<span class="token punctuation">}</span></span>\n <span class="token attr-name">showSecond</span>\n <span class="token attr-name">disabledTime</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>disabledTime<span class="token punctuation">}</span></span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onChange<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>TimeRangePicker</span>\n <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>zent-picker-demo<span class="token punctuation">"</span></span>\n <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n <span class="token attr-name">showSecond</span>\n <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>onRangeChange<span class="token punctuation">}</span></span>\n <span class="token attr-name">disabledTime</span><span class="token script language-javascript"><span class="token punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>disabledRangeTime<span class="token punctuation">}</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n\nReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>Demo</span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},y.a.createElement(S)),y.a.createElement(j,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#gong-tong-de-api">¶</a><a href="javascript:void(0)" id="gong-tong-de-api" class="anchor-point"></a>共同的 API</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onChange</td>\n<td>选择日期回调函数，受控组件，value 和 onChange 必须同时提供</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>是</td>\n</tr>\n<tr>\n<td>value</td>\n<td>默认选择日期</td>\n<td>string \n|\n Date</td>\n<td></td>\n<td>是</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>默认面板显示日期</td>\n<td>string \n|\n Date</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>用户点击选择日期的回调</td>\n<td>func</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>openPanel</td>\n<td>面板是否打开</td>\n<td>boolean</td>\n<td>false</td>\n<td>否</td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>面板弹出的回调</td>\n<td>func</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>面板关闭的回调</td>\n<td>func</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否处于 disabled 状态</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>format</td>\n<td>返回日期字符串格式</td>\n<td>string</td>\n<td>不同的picker默认值不同，下详</td>\n<td>否</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>提示文案</td>\n<td>string</td>\n<td>不同的picker默认值不同，下详</td>\n<td>否</td>\n</tr>\n<tr>\n<td>className</td>\n<td>额外的 css 类</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>width</td>\n<td>宽度</td>\n<td>string \n|\n number</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>自定义前缀</td>\n<td>string</td>\n<td><code>\'zent\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>confirmText</td>\n<td>确定按钮文字</td>\n<td>string</td>\n<td>\'确定\'</td>\n<td>否</td>\n</tr>\n<tr>\n<td>popPosition</td>\n<td>pop 弹出层 align 方向</td>\n<td>oneOf(\n[\n\'left\', \'right\'\n]\n)</td>\n<td>\'left\'</td>\n<td>否</td>\n</tr>\n<tr>\n<td>onBeforeClear</td>\n<td>用户点击清除icon前的回调函数，返回 true 表示可以清除，false 表示不能清除</td>\n<td>func</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>canClear</td>\n<td>用户是否可以清除选中的值</td>\n<td>bool</td>\n<td>true</td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#datepicker">¶</a><a href="javascript:void(0)" id="datepicker" class="anchor-point"></a>DatePicker</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showTime</td>\n<td>是否显示时间筛选</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabledTime</td>\n<td>时间禁用函数</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>判断日期是否可选函数</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>format</td>\n<td>返回日期字符串格式</td>\n<td>string</td>\n<td><code>YYYY-MM-DD</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>min</td>\n<td>可选日期的最小值</td>\n<td>string/Date</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>max</td>\n<td>可选日期的最大值</td>\n<td>string/Date</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>设置 onChange 的返回值，可选值为 \n<code>string</code>\n/\n<code>number</code>\n/\n<code>date</code></td>\n<td>string</td>\n<td>\'\'</td>\n<td>否</td>\n</tr>\n<tr>\n<td>name</td>\n<td>input 的 name 属性</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>提示文案</td>\n<td>string</td>\n<td><code>请选择日期</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>defaultTime</td>\n<td>自定义时间的默认值</td>\n<td>string/Date</td>\n<td><code>\'00:00:00\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>onBeforeConfirm</td>\n<td>用户点击确认前的回调函数，返回 true 表示可以确认，false 表示不能确认</td>\n<td>func</td>\n<td></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<p><strong>注意：</strong></p>\n<ul>\n<li><code>disabledDate</code> 函数调用时会传入一个 date 对象作为参数，用户可以自定义这个 date 是否处于禁用区间，返回 true/false，需要特殊的禁用规则时可以通过这个函数来实现，一般情况下使用 <code>max</code> 和 <code>min</code> 就可以满足需求。</li>\n<li><code>max/min</code> 和 <code>disabledDate</code> 会存在冲突，同时存在的时候以 <code>disabledDate</code> 的返回值为准，大于<strong>等于</strong> min 小于 max 可选。</li>\n<li><code>disabledTime</code> 函数应该返回一个对象，对象中包含 <code>disabledHour</code>,<code>disabledMinute</code>,<code>disabledSecond</code> 三个函数。</li>\n<li><code>format</code> 只需要传日期部分，时间部分当 <code>showTime</code> 为 <code>true</code> 时会自动拼接， 同 <code>RangePicker</code>。</li>\n</ul>\n<p>更详细用法请看示例。</p>\n<h4 class="anchor-heading"><a href="#weekpicker">¶</a><a href="javascript:void(0)" id="weekpicker" class="anchor-point"></a>WeekPicker</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>startDay</td>\n<td>一周的开始日期</td>\n<td>number</td>\n<td>1</td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>判断日期是否可选函数</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>format</td>\n<td>返回日期字符串格式</td>\n<td>string</td>\n<td><code>YYYY-MM-DD</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>min</td>\n<td>可选日期的最小值</td>\n<td>string/Date</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>max</td>\n<td>可选日期的最大值</td>\n<td>string/Date</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>设置 onChange 的返回值，可选值为 \n<code>string</code>\n/\n<code>number</code>\n/\n<code>date</code></td>\n<td>string</td>\n<td>\'\'</td>\n<td>否</td>\n</tr>\n<tr>\n<td>name</td>\n<td>input 的 name 属性</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>提示文案</td>\n<td>string</td>\n<td><code>请选择周</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#monthpicker">¶</a><a href="javascript:void(0)" id="monthpicker" class="anchor-point"></a>MonthPicker</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>选中的月份</td>\n<td>string/Date</td>\n<td><code>new Date()</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>format</td>\n<td>返回月份字符串格式</td>\n<td>string</td>\n<td><code>\'YYYY-MM\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否处于disabled 状态</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>name</td>\n<td>input 的 name 属性</td>\n<td>string</td>\n<td></td>\n<td>否</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>提示文案</td>\n<td>string</td>\n<td><code>请选择月份</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#rangepicker">¶</a><a href="javascript:void(0)" id="rangepicker" class="anchor-point"></a>RangePicker</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>是否必须</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showTime</td>\n<td>是否显示时间筛选</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>value</td>\n<td>默认选择日期</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>format</td>\n<td>返回日期字符串格式</td>\n<td>string</td>\n<td><code>\'YYYY-MM-DD\'</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>判断日期是否可选函数</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabledTime</td>\n<td>时间禁用函数</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>min</td>\n<td>可选日期的最小值</td>\n<td>string/Date</td>\n<td><code></code>\n | 否</td>\n<td></td>\n</tr>\n<tr>\n<td>max</td>\n<td>可选日期的最大值</td>\n<td>string/Date</td>\n<td><code></code>\n | 否</td>\n<td></td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>设置 onChange 的返回值，可选值为 \n<code>string</code>\n/\n<code>number</code>\n/\n<code>date</code></td>\n<td><code>string</code></td>\n<td>\'\'</td>\n<td>否</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>提示文案</td>\n<td>arrayOf(string)</td>\n<td><code>[\'开始日期\',\'结束日期\']</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>defaultTime</td>\n<td>自定义时间的默认值</td>\n<td>arrayOf(string/Date)</td>\n<td><code>[\'00:00:00\', \'00:00:00\']</code></td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\n<p><strong>注意：</strong></p>\n<ul>\n<li><code>showTime</code> 的时候，传入的 <code>min</code> 或 <code>max</code> 如果为字符串，必须有 time 部分，即 <code>2017-01-01 11:11:11</code> 种格式。</li>\n<li><code>disabledTime</code> 和 <code>DatePicker</code> 的类似，区别在于被调用时会传入一个 <code>type</code> 参数，值为 <code>start/end</code>，参照上面的 <code>disabledTime</code> 函数。</li>\n<li><code>onClick</code> 调用时会传入被点击的日期值和点击的类型（start/end) 作为参数，即 <code>onClick(val, type)</code>。</li>\n</ul>\n<h3 class="anchor-heading"><a href="#timepicker">¶</a><a href="javascript:void(0)" id="timepicker" class="anchor-point"></a>TimePicker</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showSecond</td>\n<td>是否显示秒的选择</td>\n<td>boolean</td>\n<td>false</td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>输入和返回值格式</td>\n<td>string</td>\n<td><code>HH:mm:ss</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>min</td>\n<td>可选时间的最小值</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>max</td>\n<td>可选时间的最大值</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>设置 onChange 的返回值，可选值为 \n<code>string</code>\n/\n<code>number</code>\n/\n<code>date</code></td>\n<td>string</td>\n<td>\'\'</td>\n<td>No</td>\n</tr>\n<tr>\n<td>hourStep</td>\n<td>显示的小时步长</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>minuteStep</td>\n<td>显示的分钟步长</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>secondStep</td>\n<td>显示的秒步长</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>name</td>\n<td>input 的 name 属性</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>提示文案</td>\n<td>string</td>\n<td><code>请选择时间</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>onBeforeConfirm</td>\n<td>用户点击确认前的回调函数，返回 true 表示可以确认，false 表示不能确认</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>如果用户没有更改 <code>format</code> , 实际使用的格式会根据 <code>showSecond</code> 改变，当 <code>showSecond</code> 是 false 时，实际使用 <code>HH:mm</code>. 如果传入了不同的 <code>format</code>，那么以用户传入的为准.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#timerangepicker">¶</a><a href="javascript:void(0)" id="timerangepicker" class="anchor-point"></a>TimeRangePicker</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>showSecond</td>\n<td>是否显示秒的选择</td>\n<td>boolean</td>\n<td>false</td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>输入和返回值格式</td>\n<td>string</td>\n<td><code>HH:mm:ss</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>value</td>\n<td>已选中的时间范围</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>min</td>\n<td>可选时间的最小值</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>max</td>\n<td>可选时间的最大值</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>设置 onChange 的返回值，可选值为 \n<code>string</code>\n/\n<code>number</code>\n/\n<code>date</code></td>\n<td>string</td>\n<td>\'\'</td>\n<td>No</td>\n</tr>\n<tr>\n<td>hourStep</td>\n<td>显示的小时步长</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>minuteStep</td>\n<td>显示的分钟步长</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>secondStep</td>\n<td>显示的秒步长</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>如果用户没有更改 <code>format</code> , 实际使用的格式会根据 <code>showSecond</code> 改变，当 <code>showSecond</code> 是 false 时，实际使用 <code>HH:mm</code>. 如果传入了不同的 <code>format</code>，那么以用户传入的为准.</li>\n</ul>\n<h4 class="anchor-heading"><a href="#ge-shi-hua-zi-fu-biao">¶</a><a href="javascript:void(0)" id="ge-shi-hua-zi-fu-biao" class="anchor-point"></a>格式化字符表</h4>\n<table class="table">\n<thead>\n<tr>\n<th></th>\n<th>字符</th>\n<th>输出</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><strong>Year</strong></td>\n<td>YY</td>\n<td>70 71 ... 29 30</td>\n</tr>\n<tr>\n<td></td>\n<td>YYYY</td>\n<td>1970 1971 ... 2029 2030</td>\n</tr>\n<tr>\n<td><strong>Month</strong></td>\n<td>M</td>\n<td>1 2 ... 11 1</td>\n</tr>\n<tr>\n<td></td>\n<td>MM</td>\n<td>01 02 ... 11 12</td>\n</tr>\n<tr>\n<td></td>\n<td>MMM</td>\n<td>1月, 2月 ... 11月, 12月</td>\n</tr>\n<tr>\n<td></td>\n<td>MMMM</td>\n<td>一月, 二月 ... 十一月, 十二月</td>\n</tr>\n<tr>\n<td><strong>Date</strong></td>\n<td>D</td>\n<td>1 2 ... 30 31</td>\n</tr>\n<tr>\n<td></td>\n<td>DD</td>\n<td>01 02 ... 30 31</td>\n</tr>\n<tr>\n<td></td>\n<td>d</td>\n<td>0 1 ... 5 6</td>\n</tr>\n<tr>\n<td></td>\n<td>ddd</td>\n<td>周日, 周一 ... 周五, 周六</td>\n</tr>\n<tr>\n<td></td>\n<td>dddd</td>\n<td>星期日, 星期一 ... 星期五, 星期六</td>\n</tr>\n</tbody>\n</table>'}))}}]),a}(b.Component)}}]);