4195-913e802fe9fe81dd8d6e.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[4195],{4195:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>Z});var t=s(73450),p=s(27378),e=s(57318),o=s(75795),c=s(72455),l=s(40167),u=s(33749),i=s(38923),k=s(7178),r=s(74552),d=s(91419),m=s(1937),g=s(51033),h=s(1348),b=s(23476),v=s(39643),y=s(77888),f=s(44525),D=s(24246);function C(n,a){var s=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);a&&(t=t.filter((function(a){return Object.getOwnPropertyDescriptor(n,a).enumerable}))),s.push.apply(s,t)}return s}function w(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?C(Object(s),!0).forEach((function(a){(0,t.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):C(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}var j=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{}),(0,t.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,t.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,t.Z)(this,"onChangeTime",(n=>{this.setState({timeValue:n})})),(0,t.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedDateValue:n})})),(0,t.Z)(this,"onChangeWeek",(n=>{this.setState({weekValue:n})})),(0,t.Z)(this,"onChangeMonth",(n=>{this.setState({monthValue:n})})),(0,t.Z)(this,"onChangeQuarter",(n=>{this.setState({quarterValue:n})})),(0,t.Z)(this,"onChangeYear",(n=>{this.setState({yearValue:n})})),(0,t.Z)(this,"onChangeCombinedTime",(n=>{this.setState({combinedTimeValue:n})})),(0,t.Z)(this,"onChangeTimeRange",(n=>{this.setState({timeRangeValue:n})}))}render(){var n=this.state,a=n.dateValue,s=n.rangeValue,t=n.timeValue,p=n.combinedTimeValue,e=n.timeRangeValue,h=n.combinedDateValue,b=n.weekValue,v=n.monthValue,y=n.quarterValue,f=n.yearValue;return(0,D.jsxs)("div",{className:"zent-datepicker-example",children:[(0,D.jsx)(o.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate}),(0,D.jsx)("br",{}),(0,D.jsx)(c.fl,{className:"zent-datepicker-demo",value:b,onChange:this.onChangeWeek}),(0,D.jsx)("br",{}),(0,D.jsx)(l.l,{className:"zent-datepicker-demo",value:v,onChange:this.onChangeMonth}),(0,D.jsx)("br",{}),(0,D.jsx)(u.n,{className:"zent-datepicker-demo",value:y,onChange:this.onChangeQuarter}),(0,D.jsx)("br",{}),(0,D.jsx)(i.q,{className:"zent-datepicker-demo",value:f,onChange:this.onChangeYear}),(0,D.jsx)("br",{}),(0,D.jsx)(k.j,{className:"zent-datepicker-demo",value:t,secondStep:15,onChange:this.onChangeTime}),(0,D.jsx)("br",{}),(0,D.jsx)(r.i,{className:"zent-datepicker-demo",value:p,secondStep:15,onChange:this.onChangeCombinedTime}),(0,D.jsx)("br",{}),(0,D.jsx)(d.X,{className:"zent-datepicker-demo",value:e,onChange:this.onChangeTimeRange}),(0,D.jsx)("br",{}),(0,D.jsx)(m.D,{className:"zent-datepicker-demo",value:s,onChange:this.onChangeRange,dateSpan:30,canClear:[!1,!0]}),(0,D.jsx)("br",{}),(0,D.jsx)(g.J,{className:"zent-datepicker-demo",value:h,onChange:this.onChangeCombinedDate,dateSpan:60})]})}}return(0,D.jsx)(n,{})},T=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{}),(0,t.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,t.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,t.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})}))}render(){var n=this.state,a=n.dateValue,s=n.rangeValue,t=n.combinedValue;return(0,D.jsxs)("div",{children:[(0,D.jsx)(o.M,{className:"zent-datepicker-demo",showTime:!0,format:"YYYY-MM-DD HH:mm:ss",value:a,onChange:this.onChangeDate}),(0,D.jsx)("br",{}),(0,D.jsx)(m.D,{className:"zent-datepicker-demo",showTime:{format:"HH:mm",defaultTime:["00:00","23:59"]},format:"YYYY-MM-DD HH:mm",value:s,onChange:this.onChangeRange}),(0,D.jsx)("br",{}),(0,D.jsx)(g.J,{className:"zent-datepicker-demo",value:t,showTime:{format:"HH:mm:ss",defaultTime:["12:00:00","23:59:59"]},format:"YYYY-MM-DD HH:mm:ss",onChange:this.onChangeCombinedDate})]})}}return(0,D.jsx)(n,{})},V=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{}),(0,t.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,t.Z)(this,"onChangeDate2",(n=>{this.setState({dateValue2:n})})),(0,t.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,t.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})})),(0,t.Z)(this,"onDisabledRange",((n,a)=>"start"===a&&15===n.getDate())),(0,t.Z)(this,"onDisabledCombinedDate",(n=>n.getDate()<9))}render(){var n=this.state,a=n.dateValue,s=n.dateValue2,t=n.rangeValue,p=n.combinedValue;return(0,D.jsxs)("div",{children:[(0,D.jsx)(o.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate,disabledDate:n=>1===n.getDay()}),(0,D.jsx)("br",{}),(0,D.jsx)(o.M,{value:s,className:"zent-datepicker-demo",onChange:this.onChangeDate2,disabledDate:{min:"2020-6-15"}}),(0,D.jsx)("br",{}),(0,D.jsx)(m.D,{className:"zent-datepicker-demo",value:t,onChange:this.onChangeRange,disabledDate:this.onDisabledRange}),(0,D.jsx)("br",{}),(0,D.jsx)(g.J,{className:"zent-datepicker-demo",value:p,onChange:this.onChangeCombinedDate,disabledDate:this.onDisabledCombinedDate})]})}}return(0,D.jsx)(n,{})},P=function(){var n=n=>Array.from({length:n},((n,a)=>a));class a extends p.Component{constructor(...a){super(...a),(0,t.Z)(this,"state",{}),(0,t.Z)(this,"onChangeTime",(n=>{this.setState({timeValue:n})})),(0,t.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,t.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,t.Z)(this,"onChangeCombinedTime",(n=>{this.setState({combinedTimeValue:n})})),(0,t.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})})),(0,t.Z)(this,"disabledTime1",(()=>({disabledHours:()=>[2]}))),(0,t.Z)(this,"disabledTime2",(a=>{var s=new Date,t=s.getHours(),p=s.getMinutes(),e=s.getSeconds();return(0,y.Z)(a,s)?{disabledHours:()=>n(t),disabledMinutes:a=>a===t?n(p):[],disabledSeconds:(a,s)=>a===t&&s===p?n(e):[]}:{}})),(0,t.Z)(this,"disabledTime3",((n,a)=>"start"===a?{disabledHours:()=>[3,4,5],disabledMinutes:()=>[],disabledSeconds:()=>[]}:{})),(0,t.Z)(this,"disabledProps",(0,v.jA)([new Date,(0,f.Z)(new Date,4)]))}render(){var n=this.state,a=n.timeValue,s=n.dateValue,t=n.rangeValue,p=n.combinedValue,e=n.combinedTimeValue;return(0,D.jsxs)("div",{children:[(0,D.jsx)(k.j,{className:"zent-datepicker-demo",value:a,onChange:this.onChangeTime,disabledTime:this.disabledTime1}),(0,D.jsx)("br",{}),(0,D.jsx)(o.M,{className:"zent-datepicker-demo",showTime:!0,format:"YYYY-MM-DD HH:mm:ss",value:s,disabledDate:{min:new Date},onChange:this.onChangeDate,disabledTime:this.disabledTime2}),(0,D.jsx)("br",{}),(0,D.jsx)(m.D,{className:"zent-datepicker-demo",showTime:{format:"HH:mm",defaultTime:[n=>(0,y.Z)(n,new Date)?"12:30":"00:00","23:59"]},format:"YYYY-MM-DD HH:mm",value:t,onChange:this.onChangeRange,disabledTime:this.disabledTime3}),(0,D.jsx)("br",{}),(0,D.jsx)(r.i,{className:"zent-datepicker-demo",value:e,onChange:this.onChangeCombinedTime,disabledTime:this.disabledTime3}),(0,D.jsx)("br",{}),(0,D.jsx)(g.J,w({className:"zent-datepicker-demo",value:p,onChange:this.onChangeCombinedDate,showTime:{defaultTime:[n=>(0,y.Z)(n,new Date)?"12:30:00":"00:00:00","23:59:59"]},format:"YYYY-MM-DD HH:mm:ss"},this.disabledProps))]})}}return(0,D.jsx)(a,{})},N=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{}),(0,t.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,t.Z)(this,"onChangeDate1",(n=>{this.setState({dateValue1:n})})),(0,t.Z)(this,"onChangeDate2",(n=>{this.setState({dateValue2:n})}))}handleSubmit(n){n.preventDefault()}render(){var n=this.state,a=n.dateValue,s=n.dateValue1,t=n.dateValue2;return(0,D.jsxs)("div",{children:[(0,D.jsx)("div",{className:"zent-datepicker-demo",children:"string:"}),(0,D.jsx)(o.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate}),(0,D.jsx)("br",{}),(0,D.jsx)("div",{className:"zent-datepicker-demo",children:"number:"}),(0,D.jsx)(o.M,{value:s,className:"zent-datepicker-demo",onChange:this.onChangeDate1,valueType:"number"}),(0,D.jsx)("br",{}),(0,D.jsx)("div",{className:"zent-datepicker-demo",children:"date:"}),(0,D.jsx)(o.M,{value:t,className:"zent-datepicker-demo",onChange:this.onChangeDate2,valueType:"date"}),(0,D.jsx)("br",{})]})}}return(0,D.jsx)(n,{})},x=function(){return(0,D.jsxs)("div",{children:[(0,D.jsx)(o.M,{className:"zent-datepicker-demo",value:"2020-01-01",disabled:!0}),(0,D.jsx)("br",{}),(0,D.jsx)(m.D,{className:"zent-datepicker-demo",disabled:[!0,!1]}),(0,D.jsx)("br",{}),(0,D.jsx)(k.j,{className:"zent-datepicker-demo",value:"06:06:06",disabled:!0}),(0,D.jsx)("br",{}),(0,D.jsx)(g.J,{className:"zent-datepicker-demo",disabled:!0}),(0,D.jsx)("br",{}),(0,D.jsx)(h.x,{children:(0,D.jsx)(m.D,{className:"zent-datepicker-demo",disabled:!1})})]})},S=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{}),(0,t.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,t.Z)(this,"onChangeMonth",(n=>{this.setState({monthValue:n})})),(0,t.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,t.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})})),(0,t.Z)(this,"onChangeTime",(n=>{this.setState({timeValue:n})}))}render(){var n=this.state,a=n.dateValue,s=n.monthValue,t=n.rangeValue,p=n.combinedValue,e=n.timeValue;return(0,D.jsxs)("div",{children:[(0,D.jsx)(o.M,{className:"zent-datepicker-demo",value:a,defaultDate:"2008-08-08",onChange:this.onChangeDate}),(0,D.jsx)("br",{}),(0,D.jsx)(l.l,{className:"zent-datepicker-demo",value:s,defaultDate:"2010-07",onChange:this.onChangeMonth}),(0,D.jsx)("br",{}),(0,D.jsx)(m.D,{className:"zent-datepicker-demo",value:t,defaultDate:["2016-01-01","2017-01-01"],onChange:this.onChangeRange}),(0,D.jsx)("br",{}),(0,D.jsx)(g.J,{className:"zent-datepicker-demo",value:p,defaultDate:["2018-01-01","2018-02-01"],onChange:this.onChangeCombinedDate}),(0,D.jsx)("br",{}),(0,D.jsx)(k.j,{className:"zent-datepicker-demo",value:e,defaultTime:"12:12:13",onChange:this.onChangeTime})]})}}return(0,D.jsx)(n,{})},z=function(){class n extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{dateValue:"2020-05-11",dateValue2:"2020-05-11",openPanel:!0}),(0,t.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n,openPanel:!1})})),(0,t.Z)(this,"onChangeDate2",(n=>{}))}render(){var n=this.state,a=n.dateValue,s=n.dateValue2,t=n.openPanel;return(0,D.jsxs)("div",{className:"zent-datepicker-example",children:[(0,D.jsx)(o.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate,openPanel:t,onOpen:()=>{b.g.info("open")},onClose:()=>{b.g.info("close")}}),(0,D.jsx)("br",{}),(0,D.jsx)(o.M,{className:"zent-datepicker-demo",value:s,onChange:this.onChangeDate2,openPanel:!1}),(0,D.jsx)("br",{}),(0,D.jsx)(g.J,{className:"zent-datepicker-demo",onOpen:()=>{b.g.info("open")},onClose:()=>{b.g.info("close")}})]})}}return(0,D.jsx)(n,{})};function Y(n){return(0,D.jsx)(n.tag,w(w({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function R(n){return(0,D.jsx)(Y,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function M(n){return(0,D.jsx)(Y,{tag:"style",html:n.style})}function q(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),q(n.parentNode,a);return a}class H extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,a=this.props,s=a.title,t=a.src,p=a.children;return(0,D.jsxs)("div",{className:"zandoc-react-demo",children:[(0,D.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,D.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,D.jsx)("div",{className:"zandoc-react-demo__title",children:(0,D.jsx)("p",{children:s||""})}),(0,D.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,D.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,D.jsx)(Y,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class Z extends p.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,e.l)(document.documentElement,0,q(a,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(M,{style:".zent-datepicker-demo{\n\t\tmargin-bottom: 10px;\n\t}"}),p.createElement(R,{html:'<h2 class="anchor-heading"><a href="#datepicker">¶</a><a href="javascript:void(0)" id="datepicker" class="anchor-point"></a>DatePicker</h2>\n<p>DateTime pickers, provides basic time choosing functionality.</p>\n<h3 class="anchor-heading"><a href="#guides">¶</a><a href="javascript:void(0)" id="guides" class="anchor-point"></a>Guides</h3>\n<ul>\n<li>Included pickers：<code>DatePicker</code>、<code>WeekPicker</code>、<code>MonthPicker</code>、<code>QuarterPicker</code>、<code>YearPicker</code>、<code>DateRangePicker</code>、<code>CombinedDateRangePicker</code>、<code>TimePicker</code>、<code>TimeRangePicker</code> and <code>CombinedTimeRangePicker</code>.</li>\n<li><code>DatePicker</code> 、<code>CombinedDateRangePicker</code> and <code>DateRangePicker</code> can use <code>showTime</code> to allow time selection.</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>'}),p.createElement(H,{title:"Basic usage of DatePicker, WeekPicker, MonthPicker and RangePicker",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>\n  <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">DateRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">WeekPicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">MonthPicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">YearPicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">TimePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">CombinedTimeRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">CombinedDateRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">QuarterPicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">TimeRangePicker</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">DatePickerBasic</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeDate\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue<span class="token operator">:</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  <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeRange\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      rangeValue<span class="token operator">:</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  <span class="token function-variable function">onChangeTime</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeTime\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      timeValue<span class="token operator">:</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">onChangeCombinedDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeCombinedDate\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      combinedDateValue<span class="token operator">:</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  <span class="token function-variable function">onChangeWeek</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeWeek\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      weekValue<span class="token operator">:</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  <span class="token function-variable function">onChangeMonth</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeMonth\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      monthValue<span class="token operator">:</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  <span class="token function-variable function">onChangeQuarter</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeQuarter\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      quarterValue<span class="token operator">:</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  <span class="token function-variable function">onChangeYear</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeYear\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      yearValue<span class="token operator">:</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  <span class="token function-variable function">onChangeCombinedTime</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeCombinedTime\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      combinedTimeValue<span class="token operator">:</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  <span class="token function-variable function">onChangeTimeRange</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeTimeRange\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      timeRangeValue<span class="token operator">:</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  <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>\n      dateValue<span class="token punctuation">,</span>\n      rangeValue<span class="token punctuation">,</span>\n      timeValue<span class="token punctuation">,</span>\n      combinedTimeValue<span class="token punctuation">,</span>\n      timeRangeValue<span class="token punctuation">,</span>\n      combinedDateValue<span class="token punctuation">,</span>\n      weekValue<span class="token punctuation">,</span>\n      monthValue<span class="token punctuation">,</span>\n      quarterValue<span class="token punctuation">,</span>\n      yearValue<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">WeekPicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeWeek</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MonthPicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeMonth</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">QuarterPicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeQuarter</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">YearPicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>yearValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeYear</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TimePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>timeValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">secondStep</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">15</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeTime</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedTimeRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>combinedTimeValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">secondStep</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">15</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCombinedTime</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TimeRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeTimeRange</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeRange</span><span class="token punctuation">}</span></span>\n                    <span class="token attr-name">dateSpan</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">30</span><span class="token punctuation">}</span></span>\n                    <span class="token attr-name">canClear</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">]</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedDateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>combinedDateValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCombinedDate</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">dateSpan</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">60</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">&lt;/</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<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePickerBasic</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(j)),p.createElement(H,{title:"Set showTime to true to allow time selection",id:"Demoshowtime",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DateRangePicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">CombinedDateRangePicker</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChange\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue<span class="token operator">:</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeRange\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      rangeValue<span class="token operator">:</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">onChangeCombinedDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeCombinedDate\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      combinedValue<span class="token operator">:</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  <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> combinedValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-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 attr-equals">=</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 script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">showTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> format<span class="token operator">:</span> <span class="token string">\'HH:mm\'</span><span class="token punctuation">,</span> defaultTime<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'00:00\'</span><span class="token punctuation">,</span> <span class="token string">\'23:59\'</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 attr-equals">=</span><span class="token punctuation">"</span>YYYY-MM-DD HH:mm<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeRange</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedDateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>combinedValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">showTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n            format<span class="token operator">:</span> <span class="token string">\'HH:mm:ss\'</span><span class="token punctuation">,</span>\n            defaultTime<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">\'12:00:00\'</span><span class="token punctuation">,</span> <span class="token string">\'23:59:59\'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <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 attr-equals">=</span><span class="token punctuation">"</span>YYYY-MM-DD HH:mm:ss<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCombinedDate</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">&lt;/</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<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(T)),p.createElement(H,{title:"Disabled date can be controlled by disabledDate callback",id:"Demodisableddate",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">WeekPicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">CombinedDateRangePicker</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue<span class="token operator">:</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">onChangeDate2</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'onChangeDate2\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue2<span class="token operator">:</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      rangeValue<span class="token operator">:</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">onChangeCombinedDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      combinedValue<span class="token operator">:</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">onDisabledRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">val<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>\n    type <span class="token operator">===</span> <span class="token string">\'start\'</span> <span class="token operator">?</span> val<span class="token punctuation">.</span><span class="token method function property-access">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 operator">:</span> <span class="token boolean">false</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">onDisabledCombinedDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> val<span class="token punctuation">.</span><span class="token method function property-access">getDate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">&lt;</span> <span class="token number">9</span><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> dateValue2<span class="token punctuation">,</span> rangeValue<span class="token punctuation">,</span> combinedValue <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">date</span> <span class="token arrow operator">=></span> date<span class="token punctuation">.</span><span class="token method function property-access">getDay</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>\n        <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue2<span class="token punctuation">}</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate2</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> min<span class="token operator">:</span> <span class="token string">\'2020-6-15\'</span> <span class="token punctuation">}</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeRange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onDisabledRange</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedDateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>combinedValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCombinedDate</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onDisabledCombinedDate</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">&lt;/</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<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(V)),p.createElement(H,{title:"Set showTime to true to allow time selection",id:"Demodisabledtime",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>\n  <span class="token maybe-class-name">TimePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">DateRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">CombinedTimeRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">CombinedDateRangePicker</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>\n  disabledTimeWithMax<span class="token punctuation">,</span>\n  disabledTimeWithRange<span class="token punctuation">,</span>\n  getDisabledDateAndTimeWithRangeProps<span class="token punctuation">,</span>\n<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent/es/date-picker/disabledHelpers\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> isSameDay<span class="token punctuation">,</span> addDays<span class="token punctuation">,</span> parse <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'date-fns\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">initArray</span> <span class="token operator">=</span> <span class="token parameter">targetNum</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token known-class-name class-name">Array</span><span class="token punctuation">.</span><span class="token keyword module">from</span><span class="token punctuation">(</span><span class="token punctuation">{</span> length<span class="token operator">:</span> targetNum <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">_<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> index<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 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">onChangeTime</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeTime\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      timeValue<span class="token operator">:</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  <span class="token function-variable function">onChangeDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeDate\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue<span class="token operator">:</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  <span class="token function-variable function">onChangeRange</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeRange\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      rangeValue<span class="token operator">:</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  <span class="token function-variable function">onChangeCombinedTime</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeCombinedTime\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      combinedTimeValue<span class="token operator">:</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  <span class="token function-variable function">onChangeCombinedDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeCombinedDate\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      combinedValue<span class="token operator">:</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">disabledTime1</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>\n    <span class="token function-variable function">disabledHours</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n  <span class="token function-variable function">disabledTime2</span> <span class="token operator">=</span> <span class="token parameter">date</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">const</span> min <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> hour <span class="token operator">=</span> min<span class="token punctuation">.</span><span class="token method function property-access">getHours</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">const</span> minute <span class="token operator">=</span> min<span class="token punctuation">.</span><span class="token method function property-access">getMinutes</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">const</span> second <span class="token operator">=</span> min<span class="token punctuation">.</span><span class="token method function property-access">getSeconds</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">const</span> isSame <span class="token operator">=</span> <span class="token function">isSameDay</span><span class="token punctuation">(</span>date<span class="token punctuation">,</span> min<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> isSame\n      <span class="token operator">?</span> <span class="token punctuation">{</span>\n          <span class="token function-variable function">disabledHours</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">initArray</span><span class="token punctuation">(</span>hour<span class="token punctuation">)</span><span class="token punctuation">,</span>\n          <span class="token function-variable function">disabledMinutes</span><span class="token operator">:</span> <span class="token parameter">hourValue</span> <span class="token arrow operator">=></span>\n            hourValue <span class="token operator">===</span> hour <span class="token operator">?</span> <span class="token function">initArray</span><span class="token punctuation">(</span>minute<span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <span class="token function-variable function">disabledSeconds</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">hourValue<span class="token punctuation">,</span> minuteValue</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>\n            hourValue <span class="token operator">===</span> hour <span class="token operator">&amp;&amp;</span> minuteValue <span class="token operator">===</span> minute\n              <span class="token operator">?</span> <span class="token function">initArray</span><span class="token punctuation">(</span>second<span class="token punctuation">)</span>\n              <span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span>\n      <span class="token operator">:</span> <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">disabledTime3</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">date<span class="token punctuation">,</span> type</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword control-flow">return</span> type <span class="token operator">===</span> <span class="token string">\'start\'</span>\n      <span class="token operator">?</span> <span class="token punctuation">{</span>\n          <span class="token function-variable function">disabledHours</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">,</span> <span class="token number">4</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <span class="token function-variable function">disabledMinutes</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <span class="token function-variable function">disabledSeconds</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>\n        <span class="token punctuation">}</span>\n      <span class="token operator">:</span> <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  disabledProps <span class="token operator">=</span> <span class="token function">getDisabledDateAndTimeWithRangeProps</span><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 class="token function">addDays</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 class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">]</span><span class="token punctuation">)</span><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>\n      timeValue<span class="token punctuation">,</span>\n      dateValue<span class="token punctuation">,</span>\n      rangeValue<span class="token punctuation">,</span>\n      combinedValue<span class="token punctuation">,</span>\n      combinedTimeValue<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TimePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeTime</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">disabledTime1</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-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 attr-equals">=</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 script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledDate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> min<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><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">disabledTime2</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">showTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> format<span class="token operator">:</span> <span class="token string">\'HH:mm\'</span><span class="token punctuation">,</span> defaultTime<span class="token operator">:</span> <span class="token punctuation">[</span>\n              <span class="token parameter">date</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token function">isSameDay</span><span class="token punctuation">(</span>date<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 class="token operator">?</span> <span class="token string">\'12:30\'</span> <span class="token operator">:</span> <span class="token string">\'00:00\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n              <span class="token string">\'23:59\'</span><span class="token punctuation">,</span>\n            <span class="token punctuation">]</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 attr-equals">=</span><span class="token punctuation">"</span>YYYY-MM-DD HH:mm<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeRange</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">disabledTime3</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedTimeRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>combinedTimeValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCombinedTime</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">disabledTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">disabledTime3</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedDateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>combinedValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCombinedDate</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">showTime</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>\n            defaultTime<span class="token operator">:</span> <span class="token punctuation">[</span>\n              <span class="token parameter">date</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token function">isSameDay</span><span class="token punctuation">(</span>date<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 class="token operator">?</span> <span class="token string">\'12:30:00\'</span> <span class="token operator">:</span> <span class="token string">\'00:00:00\'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>\n              <span class="token string">\'23:59:59\'</span><span class="token punctuation">,</span>\n            <span class="token punctuation">]</span><span class="token punctuation">,</span>\n          <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 attr-equals">=</span><span class="token punctuation">"</span>YYYY-MM-DD HH:mm:ss<span class="token punctuation">"</span></span>\n          <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">disabledProps</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">&lt;/</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<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(P)),p.createElement(H,{title:"valueType defaults to string, but can be date or number, defaults to the type value",id:"Demovaluetype",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">WeekPicker</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'valueType is `string`\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue<span class="token operator">:</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">onChangeDate1</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'valueType is `number`\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue1<span class="token operator">:</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  <span class="token function-variable function">onChangeDate2</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'valueType is `date`\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue2<span class="token operator">:</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">handleSubmit</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'A name was submitted: \'</span><span class="token punctuation">,</span> event<span class="token punctuation">,</span> dateValue<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    event<span class="token punctuation">.</span><span class="token method function property-access">preventDefault</span><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">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> dateValue1<span class="token punctuation">,</span> dateValue2 <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>string<span class="token operator">:</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>number<span class="token operator">:</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue1<span class="token punctuation">}</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate1</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">valueType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>date<span class="token operator">:</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue2<span class="token punctuation">}</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate2</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">valueType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>date<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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</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<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(N)),p.createElement(H,{title:"Disabled input",id:"Demodisabled",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>\n  <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">CombinedDateRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">DateRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">Disabled</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2020-01-01<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DateRangePicker</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n      <span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">]</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TimePicker</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>06:06:06<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedDateRangePicker</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Disabled</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DateRangePicker</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Disabled</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">,</span>\n  mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(x)),p.createElement(H,{title:"Setting default value.",id:"Demodefaultvalue",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>\n  <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">MonthPicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">DateRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">CombinedDateRangePicker</span><span class="token punctuation">,</span>\n  <span class="token maybe-class-name">TimePicker</span><span class="token punctuation">,</span>\n<span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue<span class="token operator">:</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">onChangeMonth</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      monthValue<span class="token operator">:</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> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      rangeValue<span class="token operator">:</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">onChangeCombinedDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      combinedValue<span class="token operator">:</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">onChangeTime</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      timeValue<span class="token operator">:</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  <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>\n      dateValue<span class="token punctuation">,</span>\n      monthValue<span class="token punctuation">,</span>\n      rangeValue<span class="token punctuation">,</span>\n      combinedValue<span class="token punctuation">,</span>\n      timeValue<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">defaultDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2008-08-08<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MonthPicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>monthValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">defaultDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeMonth</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>rangeValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">defaultDate</span><span class="token script language-javascript"><span class="token script-punctuation 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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeRange</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedDateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>combinedValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">defaultDate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">\'2018-01-01\'</span><span class="token punctuation">,</span> <span class="token string">\'2018-02-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 script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeCombinedDate</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">TimePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>timeValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">defaultTime</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12:12:13<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeTime</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">&lt;/</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\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Demo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(S)),p.createElement(H,{title:"Callback of onOpen、onClose, openPanel to control the panel's visible",id:"Demovisiblecontrol",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">DatePicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">CombinedDateRangePicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Notify</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">DatePickerBasic</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    dateValue<span class="token operator">:</span> <span class="token string">\'2020-05-11\'</span><span class="token punctuation">,</span>\n    dateValue2<span class="token operator">:</span> <span class="token string">\'2020-05-11\'</span><span class="token punctuation">,</span>\n    openPanel<span class="token operator">:</span> <span class="token boolean">true</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">onChangeDate</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeDate1\'</span><span class="token punctuation">,</span> val<span class="token punctuation">)</span><span class="token punctuation">;</span>\n    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span>\n      dateValue<span class="token operator">:</span> val<span class="token punctuation">,</span>\n      openPanel<span class="token operator">:</span> <span class="token boolean">false</span><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  <span class="token function-variable function">onChangeDate2</span> <span class="token operator">=</span> <span class="token parameter">val</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n    <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">\'demo onChangeDate2\'</span><span class="token punctuation">,</span> val<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">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>\n      dateValue<span class="token punctuation">,</span>\n      dateValue2<span class="token punctuation">,</span>\n\n      openPanel<span class="token punctuation">,</span>\n    <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">state</span><span class="token punctuation">;</span>\n    <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-example<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue<span class="token punctuation">}</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">openPanel</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>openPanel<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onOpen</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">info</span><span class="token punctuation">(</span><span class="token string">\'open\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">info</span><span class="token punctuation">(</span><span class="token string">\'close\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>dateValue2<span class="token punctuation">}</span></span>\n          <span class="token attr-name">onChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">onChangeDate2</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">openPanel</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">false</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">&lt;</span>br</span> <span class="token punctuation">/></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">CombinedDateRangePicker</span></span>\n          <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-demo<span class="token punctuation">"</span></span>\n          <span class="token attr-name">onOpen</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">info</span><span class="token punctuation">(</span><span class="token string">\'open\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</span><span class="token punctuation">}</span></span>\n          <span class="token attr-name">onClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n            <span class="token maybe-class-name">Notify</span><span class="token punctuation">.</span><span class="token method function property-access">info</span><span class="token punctuation">(</span><span class="token string">\'close\'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n          <span class="token punctuation">}</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">&lt;/</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<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">DatePickerBasic</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(z)),p.createElement(R,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#common-api">¶</a><a href="javascript:void(0)" id="common-api" class="anchor-point"></a>Common API</h4>\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 date</td>\n<td>-</td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected time is changing</td>\n<td>-</td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>valueType</td>\n<td>Set \n<code>onChange</code>\n\'s value type, options:\n<code>\'string\'</code>\n \n|\n \n<code>\'number\'</code>\n \n|\n \n<code>\'date\'</code></td>\n<td><code>string</code></td>\n<td><code>\'string\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>Format string date</td>\n<td><code>string</code></td>\n<td>Different pickers have different values</td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledDate</td>\n<td>Specify the date that cannot be selected</td>\n<td><code>(date: Date) => {}</code>\n \n|\n \n<code>IDisableDateMap</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>defaultDate</td>\n<td>Default date value</td>\n<td><code>string</code>\n \n|\n \n<code>Date</code>\n \n|\n \n<code>number</code></td>\n<td><code>new Date()</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Determine whether the DatePicker is disabled</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>canClear</td>\n<td>Whether the date can be cleared</td>\n<td><code>boolean</code></td>\n<td><code>true</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>openPanel</td>\n<td>The open state of picker</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>onOpen</td>\n<td>Callback when the popup is popped up</td>\n<td><code>function</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>onClose</td>\n<td>Callback when the popup is closed</td>\n<td><code>function</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>width</td>\n<td>To set the width of input</td>\n<td><code>string</code>\n \n|\n \n<code>number</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>className</td>\n<td>Cusotm className</td>\n<td><code>string</code></td>\n<td><code>\'\'</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<pre><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">IDisableDateMap</span> <span class="token punctuation">{</span>\n  min<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> Date <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// The minimium selectable date</span>\n  max<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> Date <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span> <span class="token comment">// The maximum selectable date</span>\n<span class="token punctuation">}</span></code></pre>\n<h4 class="anchor-heading"><a href="#datepicker-api">¶</a><a href="javascript:void(0)" id="datepicker-api" class="anchor-point"></a>DatePicker API</h4>\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 date</td>\n<td><code>string</code>\n \n|\n \n<code>Date</code>\n \n|\n \n<code>number</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected date is changing</td>\n<td><code>(date: string | Date | number) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The placeholder of date input</td>\n<td><code>string</code></td>\n<td><code>\'Please select a date\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>To set the date format</td>\n<td><code>string</code></td>\n<td><code>\'YYYY-MM-DD\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>hideFooter</td>\n<td>Whether to show footer</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>showTime</td>\n<td>To provide an additional time selection</td>\n<td><code>boolean</code>\n \n|\n \n<code>object</code></td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledTime</td>\n<td>To specify the time that cannot be selected</td>\n<td><code>(date?: Date) => IDisabledTimeOption</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Additional</strong></p>\n<ul>\n<li>When return value of <code>showTime</code> is an object, to provide an additional time selection, there are some properties within this object: <code>format</code>、<code>hourStep</code>、<code>minuteStep</code>、<code>secondStep</code>, but redefines the type of <code>defaultTime</code> to be <code>string | (date: Date) => string</code></li>\n<li><code>disabledTime</code> only works with <code>showTime</code>, see the details in <code>TimePicker</code></li>\n<li><code>format</code> should be <code>\'YYYY-MM-DD HH:mm:ss\'</code> when <code>showTime</code> is <code>true</code></li>\n</ul>\n<h4 class="anchor-heading"><a href="#weekpicker-api">¶</a><a href="javascript:void(0)" id="weekpicker-api" class="anchor-point"></a>WeekPicker API</h4>\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 date</td>\n<td><code>Array&#x3C;string | Date | number></code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected date is changing</td>\n<td><code>(date: Array&#x3C;string | Date | number>) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The placeholder of date input</td>\n<td><code>string</code></td>\n<td><code>\'Please select a week\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>weekStartsOn</td>\n<td>To set the start day of a week</td>\n<td><code>WeekStartsOnMap</code></td>\n<td><code>WeekStartsOnMap.Monday</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>To set the date format</td>\n<td><code>string</code></td>\n<td><code>\'YYYY-MM-DD\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>hideFooter</td>\n<td>Whether to show footer</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Additional</strong></p>\n<ul>\n<li><code>value</code> is a range of dates in <code>WeekPicker</code></li>\n<li><code>weekStartsOnMap</code>: <code>Monday</code>、<code>Tuesday</code>、<code>Wednesday</code>、<code>Thursday</code>、<code>Friday</code>、<code>Saturday</code>、<code>Sunday</code></li>\n</ul>\n<h4 class="anchor-heading"><a href="#yearpicker-monthpicker-api">¶</a><a href="javascript:void(0)" id="yearpicker-monthpicker-api" class="anchor-point"></a>YearPicker / MonthPicker API</h4>\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 date</td>\n<td><code>string</code>\n \n|\n \n<code>Date</code>\n \n|\n \n<code>number</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected date is changing</td>\n<td><code>(date: string | Date | number) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The placeholder of date input</td>\n<td>string</td>\n<td><code>\'Please select a year\'</code>\n \n|\n \n<code>\'Please select a month\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>To set the date format</td>\n<td>string</td>\n<td><code>\'YYYY\'</code>\n \n|\n \n<code>\'YYYY-MM\'</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Additional</strong></p>\n<ul>\n<li><code>value</code> is a single date in <code>YearPicker</code> / <code>MonthPicker</code></li>\n</ul>\n<h4 class="anchor-heading"><a href="#quarterpicker-api">¶</a><a href="javascript:void(0)" id="quarterpicker-api" class="anchor-point"></a>QuarterPicker API</h4>\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 date</td>\n<td><code>Array&#x3C;string | Date | number></code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected date is changing</td>\n<td><code>(date: Array&#x3C;string | Date | number>) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The placeholder of date input</td>\n<td><code>string</code></td>\n<td><code>\'Please select a quarter\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>To set the date format</td>\n<td><code>string</code></td>\n<td><code>\'YYYY-MM\'</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Additional</strong></p>\n<ul>\n<li><code>value</code> is a single date in <code>QuarterPicker</code></li>\n</ul>\n<h4 class="anchor-heading"><a href="#timepicker-api">¶</a><a href="javascript:void(0)" id="timepicker-api" class="anchor-point"></a>TimePicker API</h4>\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 time</td>\n<td><code>string</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected time is changing</td>\n<td><code>(date: string ) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>defaultTime</td>\n<td>To set default time</td>\n<td><code>string</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The placeholder of time input</td>\n<td><code>string</code></td>\n<td><code>\'Please select a time\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>format</td>\n<td>To set the time format</td>\n<td><code>string</code></td>\n<td><code>\'HH:mm:ss\'</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>disabledTime</td>\n<td>To specify the time that cannot be selected</td>\n<td><code>() => IDisabledTimeOption</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>hourStep</td>\n<td>Interval between hours in picker</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>minuteStep</td>\n<td>Interval between minutes in picker</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>secondStep</td>\n<td>Interval between seconds in picker</td>\n<td><code>number</code></td>\n<td><code>1</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<pre><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">IDisabledTimeOption</span> <span class="token punctuation">{</span>\n  disabledHours<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n  <span class="token function-variable function">disabledMinutes</span><span class="token operator">:</span> <span class="token punctuation">(</span>hour<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n  disabledSeconds<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>hour<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> minute<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token builtin">number</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span></code></pre>\n<h4 class="anchor-heading"><a href="#daterangepicker-combineddate">¶</a><a href="javascript:void(0)" id="daterangepicker-combineddate" class="anchor-point"></a>DateRangePicker / CombinedDateRangePicker （Base on DatePicker）</h4>\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 date range</td>\n<td><code>Array&#x3C;string | Date | number></code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected date range is changing</td>\n<td><code>(date: Array&#x3C;string | Date | number>) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The placeholder of dates input</td>\n<td><code>[string, string]</code></td>\n<td><code>[\'Start date\',\'End date\']</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>defaultDate</td>\n<td>Default date range</td>\n<td><code>[string, string]</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>dateSpan</td>\n<td>Quick set the time span</td>\n<td><code>number</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Additional</strong></p>\n<ul>\n<li>When return value of <code>showTime</code> is an object, <code>defaultTime</code> should be <code>[string | (date: Date) => string, string | (date: Date) => string]</code>. (default: [\'00:00:00\',\'23:59:59\'])</li>\n<li><code>disabledDate(val, type)</code> or <code>disabledTime(val, type)</code>, the <code>type</code> is <code>\'start\' | \'end\'</code></li>\n<li>Only supports <code>dateSpan</code> for <code>DateRangePicker</code> and <code>CombinedDateRangePicker</code>.</li>\n<li>Definition of <code>disabled</code> and <code>canClear</code> is <code>boolean | boolean[]</code> in <code>DateRangePicker</code>.</li>\n</ul>\n<h4 class="anchor-heading"><a href="#timerangepicker-combinedtime">¶</a><a href="javascript:void(0)" id="timerangepicker-combinedtime" class="anchor-point"></a>TimeRangePicker / CombinedTimeRangePicker API （Base on TimePicker）</h4>\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 time</td>\n<td><code>[string, string]</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when the selected time is changing</td>\n<td><code>(date: [string, string] ) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>defaultTime</td>\n<td>To set default time</td>\n<td><code>[string, string]</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>placeholder</td>\n<td>The placeholder of time input</td>\n<td><code>[string, string]</code></td>\n<td><code>[\'Start time\',\'End time\']</code></td>\n<td>No</td>\n</tr>\n</tbody>\n</table>\n<p><strong>Additional</strong></p>\n<ul>\n<li><code>disabledTime(val, type)</code>, the <code>type</code> is <code>\'start\' | \'end\'</code></li>\n</ul>\n<h4 class="anchor-heading"><a href="#functions">¶</a><a href="javascript:void(0)" id="functions" class="anchor-point"></a>Functions</h4>\n<ul>\n<li>Provide some useful functions: e.g. <code>disabledTimeWithRange</code>、<code>getDisabledDateAndTimeWithRangeProps</code>, that can use in your <code>disabledTime</code> handlers. You need to manually import them from <code>zent/es/date-picker/disabledHelpers</code>. </li>\n</ul>\n<h4 class="anchor-heading"><a href="#format-string">¶</a><a href="javascript:void(0)" id="format-string" class="anchor-point"></a>Format string</h4>\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>'}))}}}}]);