-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path54-bc4eac5649ec72ccd951.js
1 lines (1 loc) · 111 KB
/
54-bc4eac5649ec72ccd951.js
1
(window.webpackJsonp=window.webpackJsonp||[]).push([[54],{703:function(n,a,s){"use strict";s.r(a),s.d(a,"default",function(){return x});var t=s(580),e=s.n(t),p=s(23),o=s.n(p),c=s(24),l=s.n(c),u=s(25),i=s.n(u),k=s(26),r=s.n(k),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,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),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,e=n.monthValue,p=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:e,max:u,onChange:this.onChangeMonth}),y.a.createElement("br",null),y.a.createElement(D.s,{className:"zent-picker-demo",value:p,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)},N=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),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)},V=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),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)},P=function(){var n=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),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,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),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"},"Returns timestamp"),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"},"Returns Date object"),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)},T=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}))},R=function(){var n=new Date,a=function(a){function s(){var n,a;o()(this,s);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return a=i()(this,(n=r()(s)).call.apply(n,[this].concat(e))),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,e=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:e,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,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),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 E(n){return y.a.createElement(n.tag,e()({},n.attributes,{dangerouslySetInnerHTML:{__html:n.html}}))}function Y(n){return y.a.createElement(E,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function j(n){return y.a.createElement(E,{tag:"style",html:n.style})}var z=function(n){function a(){var n,s;o()(this,a);for(var t=arguments.length,e=new Array(t),p=0;p<t;p++)e[p]=arguments[p];return s=i()(this,(n=r()(a)).call.apply(n,[this].concat(e))),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,e=a.children;return y.a.createElement("div",{className:"zandoc-react-demo"},y.a.createElement("div",{className:"zandoc-react-demo__preview"},e),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(E,{tag:"code",html:t,attributes:{className:"language-jsx"}})))}}]),a}(b.Component),x=function(n){function a(){return o()(this,a),i()(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(j,{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(Y,{html:'<h2 class="anchor-heading"><a href="#datepicker">¶</a><a href="javascript:void(0)" id="datepicker" class="anchor-point"></a>DatePicker</h2>\n<p>Time pickers, provides basic time choosing functionality.</p>\n<h2 class="anchor-heading"><a href="#guides">¶</a><a href="javascript:void(0)" id="guides" class="anchor-point"></a>Guides</h2>\n<ul>\n<li>Included pickers：<code>DatePicker</code>, <code>YearPicker</code>, <code>QuarterPicker</code>, <code>MonthPicker</code>, <code>WeekPicker</code>, <code>DateRangePicker</code>, <code>TimePicker</code> and <code>TimeRangePicker</code>.</li>\n<li><code>DatePicker</code> and <code>DateRangePicker</code> can use <code>showTime</code> to allow time selection.</li>\n<li>Date formats can be customized using <code>format</code>, you can find formating details at the end of this page.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#demos">¶</a><a href="javascript:void(0)" id="demos" class="anchor-point"></a>Demos</h3>'}),y.a.createElement(z,{title:"Basic usage of DatePicker, WeekPicker, MonthPicker and RangePicker",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(z,{title:"Setting default value.",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(N)),y.a.createElement(z,{title:"Use format prop to control date formating",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(V)),y.a.createElement(z,{title:"Set showTime to true to allow time selection",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(P)),y.a.createElement(z,{title:"valueType defaults to string, but can be date or number, defaults to the type 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>Returns timestamp<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>Returns Date object<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(z,{title:"Disabled input",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(T)),y.a.createElement(z,{title:"Disabled date can be controlled by disabledDate callback, return true to disable the specific date. You can use min/max to achieve simple disable logic.",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(R)),y.a.createElement(z,{title:"Disabled date can be controlled by disabledTime callback, return true to disable the specific date. You can use min/max to achieve simple disable logic.",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(Y,{html:'<h2 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h2>\n<h3 class="anchor-heading"><a href="#common-api">¶</a><a href="javascript:void(0)" id="common-api" class="anchor-point"></a>Common API</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>onChange</td>\n<td>Callback when value changes</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Selected value</td>\n<td>string \n|\n Date</td>\n<td></td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Default value</td>\n<td>string \n|\n Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Callback when click on a value</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>openPanel</td>\n<td>Is picker visible</td>\n<td>boolean</td>\n<td>false</td>\n<td>No</td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>Callback when picker is opened</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback when picker is closed</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disable picker</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date format string</td>\n<td>string</td>\n<td>Different pickers have different values</td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder text</td>\n<td>string</td>\n<td>Differenet pickers have different values</td>\n<td>No</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Cusotm class name</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>width</td>\n<td>width</td>\n<td>string \n|\n number</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>prefix</td>\n<td>Custom prefix</td>\n<td>string</td>\n<td><code>\'zent\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>confirmText</td>\n<td>Confirm button text</td>\n<td>string</td>\n<td><code>\'Confirm\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>popPosition</td>\n<td>Popup align position</td>\n<td>oneOf(\n[\n\'left\', \'right\'\n]\n)</td>\n<td>\'left\'</td>\n<td>No</td>\n</tr>\n<tr>\n<td>canClear</td>\n<td>can use clear the selected value</td>\n<td>bool</td>\n<td>true</td>\n<td>No</td>\n</tr>\n<tr>\n<td>onBeforeClear</td>\n<td>Clear callback, return \n<code>true</code>\n to allow, \n<code>false</code>\n to abort</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#datepicker">¶</a><a href="javascript:void(0)" id="datepicker" class="anchor-point"></a>DatePicker</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>showTime</td>\n<td>Show or hide time selection</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledTime</td>\n<td>Callback to check if specific time is disabled</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Callback to check if specific date is disabled</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date formating string</td>\n<td>string</td>\n<td><code>YYYY-MM-DD</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>min</td>\n<td>The minimium selectable date</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>max</td>\n<td>The maximum selectable date</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>Set \n<code>onChange</code>\n\'s value type, one of \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>name</td>\n<td>Name attribute of the input node</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder text</td>\n<td>string</td>\n<td><code>Please select a date</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>defaultTime</td>\n<td>Default time value</td>\n<td>string</td>\n<td><code>\'00:00:00\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>onBeforeConfirm</td>\n<td>Confirm callback, return \n<code>true</code>\n to allow, \n<code>false</code>\n to abort</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li><code>disabledDate</code> will be passed a date object as argument, return true if the date should be disabled. Using <code>max</code> and <code>min</code> can cover most use cases.</li>\n<li>If both <code>min</code>/<code>max</code> and <code>disabledDate</code> are present, <code>disabledDate</code> takes precedence.</li>\n<li>Return value of <code>disabledDate</code> is an object, there are three functions within this object: <code>disabledHour</code>, <code>disabledMinute</code> and <code>disabledSecond</code>.</li>\n<li>Only date format is allowed in <code>format</code>, time format will be appended when <code>showTime</code> is <code>true</code>.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#weekpicker">¶</a><a href="javascript:void(0)" id="weekpicker" class="anchor-point"></a>WeekPicker</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>startDay</td>\n<td>Start day of a week</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Callback to check if date is disabled</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Date format string</td>\n<td>string</td>\n<td><code>YYYY-MM-DD</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>min</td>\n<td>Minimum selectable date</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>max</td>\n<td>Maximum seletable date</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>Value type in \n<code>onChange</code>\n, one of \n<code>string</code>\n \n|\n \n<code>number</code>\n \n|\n \n<code>date</code></td>\n<td>string</td>\n<td>\'\'</td>\n<td>No</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name attribute of input node</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder text</td>\n<td>string</td>\n<td><code>Please select a week</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#monthpicker">¶</a><a href="javascript:void(0)" id="monthpicker" class="anchor-point"></a>MonthPicker</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>value</td>\n<td>Selected month</td>\n<td>string/Date</td>\n<td><code>new Date()</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Format string</td>\n<td>string</td>\n<td><code>\'YYYY-MM\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Is disabled</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name attribute of input node</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder text</td>\n<td>string</td>\n<td><code>Please select the month</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#rangepicker">¶</a><a href="javascript:void(0)" id="rangepicker" class="anchor-point"></a>RangePicker</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>showTime</td>\n<td>Show time selection</td>\n<td>bool</td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Selected value</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Format string</td>\n<td>string</td>\n<td><code>\'YYYY-MM-DD\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Callback to check date is selectable</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledTime</td>\n<td>Callback to check time is selectable</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>min</td>\n<td>Minimum selectable date</td>\n<td>string/instanceOf(Date)</td>\n<td><code></code>\n | No</td>\n<td></td>\n</tr>\n<tr>\n<td>max</td>\n<td>Maximum selectable date</td>\n<td>string/instanceOf(Date)</td>\n<td><code></code>\n | No</td>\n<td></td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>Value type of \n<code>onChange</code>\n, one of \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>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder text</td>\n<td>arrayOf(string)</td>\n<td><code>[\'start-date\',\'end-date\']</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>defaultTime</td>\n<td>Default time value</td>\n<td>arrayOf(string/Date)</td>\n<td><code>[\'00:00:00\', \'00:00:00\']</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>When <code>showTime</code> is <code>true</code>, the <code>min</code> and <code>max</code> string must have time part, e.g. <code>2017-01-01 11:11:11</code>.</li>\n<li><code>disabledTime</code> has an additional argument <code>type</code> like in <code>DatePicker</code>, its value is <code>start</code> or <code>end</code>.</li>\n<li><code>onClick(val, type)</code>, the <code>type</code> is the same as <code>disabledTime</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>disabledTime</td>\n<td>Callback to check if specific time is disabled</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>showSecond</td>\n<td>Whether to show second selector to not.</td>\n<td>boolean</td>\n<td>false</td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Time formatting string</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>The minimum selectable time</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>max</td>\n<td>The maximum selectable time</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>Set \n<code>onChange</code>\n\'s value type, one of \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>The hour step of the hours displayed.</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>minuteStep</td>\n<td>The minute step of the minutes displayed.</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>secondStep</td>\n<td>The second step of the seconds displayed.</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name attribute of the input node</td>\n<td>string</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>Placeholder text</td>\n<td>string</td>\n<td><code>Please select a date</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>onBeforeConfirm</td>\n<td>Confirm callback, return \n<code>true</code>\n to allow, \n<code>false</code>\n to abort</td>\n<td>func</td>\n<td></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>If <code>format</code> is not changed, the actual format used will be <code>HH:mm</code> when <code>showSecond</code> is false. Otherwise, the user defined format will be used.</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>disabledTime</td>\n<td>Callback to check if specific time is disabled</td>\n<td>func</td>\n<td><code>noop</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>showSecond</td>\n<td>Whether to show second selector to not.</td>\n<td>boolean</td>\n<td>false</td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Time formatting string</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>Selected value</td>\n<td>array</td>\n<td><code>[]</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>min</td>\n<td>The minimum selectable time</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>max</td>\n<td>The maximum selectable time</td>\n<td>string/Date</td>\n<td></td>\n<td>No</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>Set \n<code>onChange</code>\n\'s value type, one of \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>The hour step of the hours displayed.</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>minuteStep</td>\n<td>The minute step of the minutes displayed.</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n<tr>\n<td>secondStep</td>\n<td>The second step of the seconds displayed.</td>\n<td>number</td>\n<td>1</td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<ul>\n<li>If <code>format</code> is not changed, the actual format used will be \'HH:mm\' when <code>showSecond</code> is false. Otherwise, the user defined format will be used.</li>\n</ul>\n<h3 class="anchor-heading"><a href="#format-string">¶</a><a href="javascript:void(0)" id="format-string" class="anchor-point"></a>Format string</h3>\n<table class="table">\n<thead>\n<tr>\n<th></th>\n<th>Format character</th>\n<th>Output</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>Jan, Feb ... Nov, Dec</td>\n</tr>\n<tr>\n<td></td>\n<td>MMMM</td>\n<td>January, February ... November, December</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>Sun, Mon ... Fri, Sat</td>\n</tr>\n<tr>\n<td></td>\n<td>dddd</td>\n<td>Sunday, Monday ... Friday, Saturday</td>\n</tr>\n</tbody>\n</table>'}))}}]),a}(b.Component)}}]);