-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path4195-07a76f068f509ec9b7de.js
1 lines (1 loc) · 189 KB
/
4195-07a76f068f509ec9b7de.js
1
(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[4195],{4195:(n,a,s)=>{"use strict";s.r(a),s.d(a,{default:()=>_});var t=s(73118),p=s(73450),e=s(27378),o=s(57318),c=s(75795),l=s(72455),u=s(40167),i=s(33749),k=s(38923),r=s(7178),d=s(74552),m=s(91419),g=s(39311),h=s(29018),y=s(1348),b=s(23476),v=s(71990),f=s(17703),D=s(39643),C=s(77888),w=s(44525),j=s(84614),P=s(56540),T=s(24246);function N(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 V(n){for(var a=1;a<arguments.length;a++){var s=null!=arguments[a]?arguments[a]:{};a%2?N(Object(s),!0).forEach((function(a){(0,p.Z)(n,a,s[a])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(s)):N(Object(s)).forEach((function(a){Object.defineProperty(n,a,Object.getOwnPropertyDescriptor(s,a))}))}return n}var S=function(){class n extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{}),(0,p.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,p.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,p.Z)(this,"onChangeTime",(n=>{this.setState({timeValue:n})})),(0,p.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedDateValue:n})})),(0,p.Z)(this,"onChangeWeek",(n=>{this.setState({weekValue:n})})),(0,p.Z)(this,"onChangeMonth",(n=>{this.setState({monthValue:n})})),(0,p.Z)(this,"onChangeQuarter",(n=>{this.setState({quarterValue:n})})),(0,p.Z)(this,"onChangeYear",(n=>{this.setState({yearValue:n})})),(0,p.Z)(this,"onChangeCombinedTime",(n=>{this.setState({combinedTimeValue:n})})),(0,p.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,o=n.combinedDateValue,y=n.weekValue,b=n.monthValue,v=n.quarterValue,f=n.yearValue;return(0,T.jsxs)("div",{className:"zent-datepicker-example",children:[(0,T.jsx)(c.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate}),(0,T.jsx)("br",{}),(0,T.jsx)(l.fl,{className:"zent-datepicker-demo",value:y,onChange:this.onChangeWeek}),(0,T.jsx)("br",{}),(0,T.jsx)(u.l,{className:"zent-datepicker-demo",value:b,onChange:this.onChangeMonth}),(0,T.jsx)("br",{}),(0,T.jsx)(i.n,{className:"zent-datepicker-demo",value:v,onChange:this.onChangeQuarter}),(0,T.jsx)("br",{}),(0,T.jsx)(k.q,{className:"zent-datepicker-demo",value:f,onChange:this.onChangeYear}),(0,T.jsx)("br",{}),(0,T.jsx)(r.j,{className:"zent-datepicker-demo",value:t,secondStep:15,onChange:this.onChangeTime}),(0,T.jsx)("br",{}),(0,T.jsx)(d.i,{className:"zent-datepicker-demo",value:p,secondStep:15,onChange:this.onChangeCombinedTime}),(0,T.jsx)("br",{}),(0,T.jsx)(m.X,{className:"zent-datepicker-demo",value:e,onChange:this.onChangeTimeRange}),(0,T.jsx)("br",{}),(0,T.jsx)(g.D,{className:"zent-datepicker-demo",value:s,onChange:this.onChangeRange,dateSpan:30}),(0,T.jsx)("br",{}),(0,T.jsx)(h.J,{className:"zent-datepicker-demo",value:o,onChange:this.onChangeCombinedDate,dateSpan:60})]})}}return(0,T.jsx)(n,{})},x=function(){class n extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{}),(0,p.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,p.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,p.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})}))}render(){var n=this.state,a=n.dateValue,s=n.rangeValue,t=n.combinedValue;return(0,T.jsxs)("div",{children:[(0,T.jsx)(c.M,{className:"zent-datepicker-demo",showTime:!0,format:"YYYY-MM-DD HH:mm:ss",value:a,onChange:this.onChangeDate}),(0,T.jsx)("br",{}),(0,T.jsx)(g.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,T.jsx)("br",{}),(0,T.jsx)(h.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,T.jsx)(n,{})},z=function(){class n extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{}),(0,p.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,p.Z)(this,"onChangeDate2",(n=>{this.setState({dateValue2:n})})),(0,p.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,p.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})})),(0,p.Z)(this,"onDisabledRange",((n,a)=>"start"===a&&15===n.getDate())),(0,p.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,T.jsxs)("div",{children:[(0,T.jsx)(c.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate,disabledDate:n=>1===n.getDay()}),(0,T.jsx)("br",{}),(0,T.jsx)(c.M,{value:s,className:"zent-datepicker-demo",onChange:this.onChangeDate2,disabledDate:{min:"2020-6-15"}}),(0,T.jsx)("br",{}),(0,T.jsx)(g.D,{className:"zent-datepicker-demo",value:t,onChange:this.onChangeRange,disabledDate:this.onDisabledRange}),(0,T.jsx)("br",{}),(0,T.jsx)(h.J,{className:"zent-datepicker-demo",value:p,onChange:this.onChangeCombinedDate,disabledDate:this.onDisabledCombinedDate})]})}}return(0,T.jsx)(n,{})},R=function(){var n=n=>Array.from({length:n},((n,a)=>a));class a extends e.Component{constructor(...a){super(...a),(0,p.Z)(this,"state",{}),(0,p.Z)(this,"onChangeTime",(n=>{this.setState({timeValue:n})})),(0,p.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,p.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,p.Z)(this,"onChangeCombinedTime",(n=>{this.setState({combinedTimeValue:n})})),(0,p.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})})),(0,p.Z)(this,"disabledTime1",(()=>({disabledHours:()=>[2]}))),(0,p.Z)(this,"disabledTime2",(a=>{var s=new Date,t=s.getHours(),p=s.getMinutes(),e=s.getSeconds();return(0,C.Z)(a,s)?{disabledHours:()=>n(t),disabledMinutes:a=>a===t?n(p):[],disabledSeconds:(a,s)=>a===t&&s===p?n(e):[]}:{}})),(0,p.Z)(this,"disabledTime3",((n,a)=>"start"===a?{disabledHours:()=>[3,4,5],disabledMinutes:()=>[],disabledSeconds:()=>[]}:{})),(0,p.Z)(this,"disabledProps",(0,D.jA)([new Date,(0,w.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,T.jsxs)("div",{children:[(0,T.jsx)(r.j,{className:"zent-datepicker-demo",value:a,onChange:this.onChangeTime,disabledTime:this.disabledTime1}),(0,T.jsx)("br",{}),(0,T.jsx)(c.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,T.jsx)("br",{}),(0,T.jsx)(g.D,{className:"zent-datepicker-demo",showTime:{format:"HH:mm",defaultTime:[n=>(0,C.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,T.jsx)("br",{}),(0,T.jsx)(d.i,{className:"zent-datepicker-demo",value:e,onChange:this.onChangeCombinedTime,disabledTime:this.disabledTime3}),(0,T.jsx)("br",{}),(0,T.jsx)(h.J,V({className:"zent-datepicker-demo",value:p,onChange:this.onChangeCombinedDate,showTime:{defaultTime:[n=>(0,C.Z)(n,new Date)?"12:30:00":"00:00:00","23:59:59"]},format:"YYYY-MM-DD HH:mm:ss"},this.disabledProps))]})}}return(0,T.jsx)(a,{})},Y=function(){class n extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{}),(0,p.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,p.Z)(this,"onChangeDate1",(n=>{this.setState({dateValue1:n})})),(0,p.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,T.jsxs)("div",{children:[(0,T.jsx)("div",{className:"zent-datepicker-demo",children:"string:"}),(0,T.jsx)(c.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate}),(0,T.jsx)("br",{}),(0,T.jsx)("div",{className:"zent-datepicker-demo",children:"number:"}),(0,T.jsx)(c.M,{value:s,className:"zent-datepicker-demo",onChange:this.onChangeDate1,valueType:"number"}),(0,T.jsx)("br",{}),(0,T.jsx)("div",{className:"zent-datepicker-demo",children:"date:"}),(0,T.jsx)(c.M,{value:t,className:"zent-datepicker-demo",onChange:this.onChangeDate2,valueType:"date"}),(0,T.jsx)("br",{})]})}}return(0,T.jsx)(n,{})},M=function(){return(0,T.jsxs)("div",{children:[(0,T.jsx)(c.M,{className:"zent-datepicker-demo",value:"2020-01-01",disabled:!0}),(0,T.jsx)("br",{}),(0,T.jsx)(g.D,{className:"zent-datepicker-demo",disabled:[!0,!1]}),(0,T.jsx)("br",{}),(0,T.jsx)(r.j,{className:"zent-datepicker-demo",value:"06:06:06",disabled:!0}),(0,T.jsx)("br",{}),(0,T.jsx)(h.J,{className:"zent-datepicker-demo",disabled:!0}),(0,T.jsx)("br",{}),(0,T.jsx)(y.x,{children:(0,T.jsx)(g.D,{className:"zent-datepicker-demo",disabled:!1})})]})},q=function(){class n extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{}),(0,p.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n})})),(0,p.Z)(this,"onChangeMonth",(n=>{this.setState({monthValue:n})})),(0,p.Z)(this,"onChangeRange",(n=>{this.setState({rangeValue:n})})),(0,p.Z)(this,"onChangeCombinedDate",(n=>{this.setState({combinedValue:n})})),(0,p.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,T.jsxs)("div",{children:[(0,T.jsx)(c.M,{className:"zent-datepicker-demo",value:a,defaultDate:"2008-08-08",onChange:this.onChangeDate}),(0,T.jsx)("br",{}),(0,T.jsx)(u.l,{className:"zent-datepicker-demo",value:s,defaultDate:"2010-07",onChange:this.onChangeMonth}),(0,T.jsx)("br",{}),(0,T.jsx)(g.D,{className:"zent-datepicker-demo",value:t,defaultDate:["2016-01-01","2017-01-01"],onChange:this.onChangeRange}),(0,T.jsx)("br",{}),(0,T.jsx)(h.J,{className:"zent-datepicker-demo",value:p,defaultDate:["2018-01-01","2018-02-01"],onChange:this.onChangeCombinedDate}),(0,T.jsx)("br",{}),(0,T.jsx)(r.j,{className:"zent-datepicker-demo",value:e,defaultTime:"12:12:13",onChange:this.onChangeTime})]})}}return(0,T.jsx)(n,{})},Z=function(){class n extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{dateValue:"2020-05-11",dateValue2:"2020-05-11",openPanel:!0}),(0,p.Z)(this,"onChangeDate",(n=>{this.setState({dateValue:n,openPanel:!1})})),(0,p.Z)(this,"onChangeDate2",(n=>{}))}render(){var n=this.state,a=n.dateValue,s=n.dateValue2,t=n.openPanel;return(0,T.jsxs)("div",{className:"zent-datepicker-example",children:[(0,T.jsx)(c.M,{value:a,className:"zent-datepicker-demo",onChange:this.onChangeDate,openPanel:t,onOpen:()=>{b.g.info("open")},onClose:()=>{b.g.info("close")}}),(0,T.jsx)("br",{}),(0,T.jsx)(c.M,{className:"zent-datepicker-demo",value:s,onChange:this.onChangeDate2,openPanel:!1}),(0,T.jsx)("br",{}),(0,T.jsx)(h.J,{className:"zent-datepicker-demo",onOpen:()=>{b.g.info("open")},onClose:()=>{b.g.info("close")}})]})}}return(0,T.jsx)(n,{})},H=function(){var n=new Date,a=()=>{var a=(0,e.useState)([n,(0,j.Z)(n,1)]),s=(0,t.Z)(a,2),p=s[0],o=s[1],c=(0,e.useState)(null),l=(0,t.Z)(c,2),u=l[0],i=l[1];return(0,T.jsxs)("div",{children:[(0,T.jsx)("div",{className:"zent-datepicker-calendar-demo-wrapper",children:(0,T.jsx)("div",{children:(0,T.jsx)(v.Z,{selected:u,defaultPanelDate:n,onSelected:(n,a)=>{i(n)},disabledPanelDate:()=>!1})})}),(0,T.jsx)("div",{className:"zent-datepicker-calendar-demo-wrapper",children:(0,T.jsx)(f.i,{value:p,onChange:(n,a)=>{o(n)},showTime:!0,hideConfirm:!0,valueType:"string",format:"YYYY-MM-DD HH:mm:ss",disabledDate:()=>!1,leftClassName:"zent-datepicker-calendar-demo-left",rightClassName:"zent-datepicker-calendar-demo-right",footerClassName:"zent-datepicker-calendar-demo-footer"})})]})};return(0,T.jsx)(a,{})},O=function(){class n extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{}),(0,p.Z)(this,"lunarValueFormatter",(n=>P.q7.fromDate(n).toString())),(0,p.Z)(this,"handleDateChange",(n=>{this.setState({date:n})}))}render(){var n=this.state.date;return(0,T.jsx)(c.M,{showLunarDate:!0,lunarValueFormatter:this.lunarValueFormatter,value:n,onChange:this.handleDateChange})}}return(0,T.jsx)(n,{})};function A(n){return(0,T.jsx)(n.tag,V(V({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function W(n){return(0,T.jsx)(A,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function E(n){return(0,T.jsx)(A,{tag:"style",html:n.style})}function F(n,a){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(a+=n.offsetTop),F(n.parentNode,a);return a}class I extends e.Component{constructor(...n){super(...n),(0,p.Z)(this,"state",{showCode:!1}),(0,p.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,T.jsxs)("div",{className:"zandoc-react-demo",children:[(0,T.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,T.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,T.jsx)("div",{className:"zandoc-react-demo__title",children:(0,T.jsx)("p",{children:s||""})}),(0,T.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,T.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,T.jsx)(A,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class _ extends e.Component{componentDidMount(){var n=location.hash;if(n){var a=document.querySelector('a[href="'.concat(n,'"]'));a&&(0,o.l)(document.documentElement,0,F(a,-9))}}render(){return e.createElement("div",{className:"zandoc-react-container"},e.createElement(E,{style:".zent-datepicker-demo{\n\t\tmargin-bottom: 10px;\n\t}\n\n.zent-datepicker-calendar-demo-wrapper{\n\t\tdisplay:flex;\n\t\tmargin-bottom:20px;\n\t}\n\n.zent-datepicker-calendar-demo-wrapper .zent-datepicker-calendar-demo-footer{\n\t\t\tborder:none;\n\t\t}\n\t.zent-datepicker-calendar-demo-left{\n\t\tmargin-right:10px;\n\t\tborder-right:1px solid #ccc;\n\t}\n\t.zent-datepicker-calendar-demo-right{\n\t\tmargin-left:10px\n\t}"}),e.createElement(W,{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> , <code>CombinedTimeRangePicker</code> ,<code>SingleCalendarDatePanelPicker</code> and <code>CombinedPanelRangePicker</code></li>\n<li><code>DatePicker</code> ,<code>CombinedDateRangePicker</code> , <code>DateRangePicker</code> , <code>SingleCalendarDatePanelPicker</code> and <code>CombinedPanelRangePicker</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>'}),e.createElement(I,{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 <span class="token literal-property property">dateValue</span><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 <span class="token literal-property property">rangeValue</span><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 <span class="token literal-property property">timeValue</span><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 <span class="token literal-property property">combinedDateValue</span><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 <span class="token literal-property property">weekValue</span><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 <span class="token literal-property property">monthValue</span><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 <span class="token literal-property property">quarterValue</span><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 <span class="token literal-property property">yearValue</span><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 <span class="token literal-property property">combinedTimeValue</span><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 <span class="token literal-property property">timeRangeValue</span><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"><</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"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><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"></</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"><</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>'},e.createElement(S)),e.createElement(I,{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 <span class="token literal-property property">dateValue</span><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 <span class="token literal-property property">rangeValue</span><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 <span class="token literal-property property">combinedValue</span><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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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> <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">\'HH:mm\'</span><span class="token punctuation">,</span> <span class="token literal-property property">defaultTime</span><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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">\'HH:mm:ss\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">defaultTime</span><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"></</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"><</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>'},e.createElement(x)),e.createElement(I,{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 <span class="token literal-property property">dateValue</span><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 <span class="token literal-property property">dateValue2</span><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 <span class="token literal-property property">rangeValue</span><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 <span class="token literal-property property">combinedValue</span><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"><</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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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> <span class="token literal-property property">min</span><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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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>'},e.createElement(z)),e.createElement(I,{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> <span class="token literal-property property">length</span><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 <span class="token literal-property property">timeValue</span><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 <span class="token literal-property property">dateValue</span><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 <span class="token literal-property property">rangeValue</span><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 <span class="token literal-property property">combinedTimeValue</span><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 <span class="token literal-property property">combinedValue</span><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">&&</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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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> <span class="token literal-property property">min</span><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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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> <span class="token literal-property property">format</span><span class="token operator">:</span> <span class="token string">\'HH:mm\'</span><span class="token punctuation">,</span> <span class="token literal-property property">defaultTime</span><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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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 <span class="token literal-property property">defaultTime</span><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"></</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"><</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>'},e.createElement(R)),e.createElement(I,{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 <span class="token literal-property property">dateValue</span><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 <span class="token literal-property property">dateValue1</span><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 <span class="token literal-property property">dateValue2</span><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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token 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><span class="token literal-property property">string</span><span class="token operator">:</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token 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><span class="token literal-property property">number</span><span class="token operator">:</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token 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><span class="token literal-property property">date</span><span class="token operator">:</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token punctuation">}</span>\n<span class="token punctuation">}</span>\n<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"><</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>'},e.createElement(Y)),e.createElement(I,{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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</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"></</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"></</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>'},e.createElement(M)),e.createElement(I,{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 <span class="token literal-property property">dateValue</span><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 <span class="token literal-property property">monthValue</span><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 <span class="token literal-property property">rangeValue</span><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 <span class="token literal-property property">combinedValue</span><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 <span class="token literal-property property">timeValue</span><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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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>'},e.createElement(q)),e.createElement(I,{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 <span class="token literal-property property">dateValue</span><span class="token operator">:</span> <span class="token string">\'2020-05-11\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">dateValue2</span><span class="token operator">:</span> <span class="token string">\'2020-05-11\'</span><span class="token punctuation">,</span>\n <span class="token literal-property property">openPanel</span><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 <span class="token literal-property property">dateValue</span><span class="token operator">:</span> val<span class="token punctuation">,</span>\n <span class="token literal-property property">openPanel</span><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"><</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"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"><</span>br</span> <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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"></</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"><</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>'},e.createElement(Z)),e.createElement(I,{title:"use basic components such as CombinedPanelRangePicker and DatePanel",id:"Democalendar",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">CombinedPanelRangePicker</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SingleCalendarDatePanelPicker</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<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> addMonths<span class="token punctuation">,</span> addDays <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> now <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Demo</span></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>\n <span class="token comment">// merged from props value</span>\n <span class="token keyword">const</span> <span class="token punctuation">[</span>selectedRange<span class="token punctuation">,</span> setSelectedRange<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token punctuation">[</span>now<span class="token punctuation">,</span> <span class="token function">addMonths</span><span class="token punctuation">(</span>now<span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</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>selectedDate<span class="token punctuation">,</span> setSelectedDate<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>\n\n <span class="token keyword">const</span> <span class="token function-variable function">onSelectedRange</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> finished</span><span class="token punctuation">)</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">\'this is onSelectedRange\'</span><span class="token punctuation">,</span> value<span class="token punctuation">,</span> finished<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setSelectedRange</span><span class="token punctuation">(</span>value<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">const</span> <span class="token function-variable function">onSelectedDate</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">value<span class="token punctuation">,</span> finished</span><span class="token punctuation">)</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">\'this is onSelectedDate\'</span><span class="token punctuation">,</span> value<span class="token punctuation">,</span> finished<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token function">setSelectedDate</span><span class="token punctuation">(</span>value<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 control-flow">return</span> <span class="token punctuation">(</span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>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-calendar-demo-wrapper<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"><</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SingleCalendarDatePanelPicker</span></span>\n <span class="token attr-name">selected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>selectedDate<span class="token punctuation">}</span></span>\n <span class="token attr-name">defaultPanelDate</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>now<span class="token punctuation">}</span></span>\n <span class="token attr-name">onSelected</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onSelectedDate<span class="token punctuation">}</span></span>\n <span class="token attr-name">disabledPanelDate</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 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"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"><</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-calendar-demo-wrapper<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"><</span><span class="token class-name">CombinedPanelRangePicker</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>selectedRange<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>onSelectedRange<span class="token punctuation">}</span></span>\n <span class="token attr-name">showTime</span>\n <span class="token attr-name">hideConfirm</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</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>string<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">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><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token boolean">false</span><span class="token punctuation">}</span></span>\n <span class="token attr-name">leftClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-calendar-demo-left<span class="token punctuation">"</span></span>\n <span class="token attr-name">rightClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-calendar-demo-right<span class="token punctuation">"</span></span>\n <span class="token attr-name">footerClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-datepicker-calendar-demo-footer<span class="token punctuation">"</span></span>\n <span class="token punctuation">/></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>\n <span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><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"><</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>'},e.createElement(H)),e.createElement(I,{title:"Lunar date picker",id:"Demolunar",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> <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> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'react\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Lunar</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'pure-lunar-typescript\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">class</span> <span class="token class-name">LunarDatePickerDemo</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">lunarValueFormatter</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> d <span class="token operator">=</span> <span class="token maybe-class-name">Lunar</span><span class="token punctuation">.</span><span class="token method function property-access">fromDate</span><span class="token punctuation">(</span>date<span class="token punctuation">)</span><span class="token punctuation">;</span>\n <span class="token keyword control-flow">return</span> d<span class="token punctuation">.</span><span class="token method function property-access">toString</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">handleDateChange</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 <span class="token literal-property property">date</span><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">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> date <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"><</span><span class="token class-name">DatePicker</span></span>\n <span class="token attr-name">showLunarDate</span>\n <span class="token attr-name">lunarValueFormatter</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">lunarValueFormatter</span><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>date<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">handleDateChange</span><span class="token punctuation">}</span></span>\n <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"><</span><span class="token class-name">LunarDatePickerDemo</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},e.createElement(O)),e.createElement(W,{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<tr>\n<td>showLunarDate</td>\n<td>Whether to display lunar date</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>lunarValueFormatter</td>\n<td>Format lunar date backfill value</td>\n<td><code>(date: Date) => string</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<li><code>lunarValueFormatter</code> only works with <code>showLunarDate</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<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<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<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<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<h3 class="anchor-heading"><a href="#singlecalendardatepanelpicker">¶</a><a href="javascript:void(0)" id="singlecalendardatepanelpicker" class="anchor-point"></a>SingleCalendarDatePanelPicker API</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>selected</td>\n<td>Selected date</td>\n<td><code>Date\\|null</code></td>\n<td>-</td>\n<td>是</td>\n</tr>\n<tr>\n<td>onSelected</td>\n<td>Callback when the selected date is changing</td>\n<td><code>(date: Date ) => {}</code></td>\n<td>-</td>\n<td>是</td>\n</tr>\n<tr>\n<td>defaultPanelDate</td>\n<td>The default Date of panel</td>\n<td><code>Date</code></td>\n<td>-</td>\n<td>否</td>\n</tr>\n<tr>\n<td>disabledPanelDate</td>\n<td>The disabled Date</td>\n<td><code>(date:Date) => boolean</code></td>\n<td>-</td>\n<td>是</td>\n</tr>\n<tr>\n<td>onChangePanel</td>\n<td>The callback function of the type of switch panel</td>\n<td><code>(type:IPickerType) => {}</code></td>\n<td>-</td>\n<td>否</td>\n</tr>\n<tr>\n<td>onPanelDateChange</td>\n<td>Callback function for the value of the toggle panel</td>\n<td><code>(date:Date) => {}</code></td>\n<td>-</td>\n<td>否</td>\n</tr>\n<tr>\n<td>hideFooter</td>\n<td>Should hide the footer of panel</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>否</td>\n</tr>\n<tr>\n<td>showTime</td>\n<td>To provide an additional time</td>\n<td><code>boolean</code>\n \n|\n \n<code>object</code></td>\n<td><code>false</code></td>\n<td>否</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>否</td>\n</tr>\n<tr>\n<td>popText</td>\n<td>The content when selected a date cell</td>\n<td><code>string</code></td>\n<td>-</td>\n<td>否</td>\n</tr>\n<tr>\n<td>footerText</td>\n<td>The content on the footer to dump to now</td>\n<td><code>string</code></td>\n<td>-</td>\n<td>否</td>\n</tr>\n<tr>\n<td>combinedLeft</td>\n<td>Whether it is the left calendar of the combined calendar panel, if yes, hide the next month/year icon at the top right of this component</td>\n<td><code>boolean</code></td>\n<td>false</td>\n<td>否</td>\n</tr>\n<tr>\n<td>combinedRight</td>\n<td>Whether it is the right calendar of the combined calendar panel, if yes, hide the next month/year icon at the top left of this component</td>\n<td><code>boolean</code></td>\n<td>false</td>\n<td>否</td>\n</tr>\n<tr>\n<td>hoverRangeDate</td>\n<td>The date range for hover</td>\n<td><code>[Date,Date]\\|null</code></td>\n<td>-</td>\n<td>否</td>\n</tr>\n<tr>\n<td>rangeDate</td>\n<td>The date range has been selected</td>\n<td><code>[Date,Date]\\|null</code></td>\n<td>-</td>\n<td>否</td>\n</tr>\n</tbody>\n</table>\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<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<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<h3 class="anchor-heading"><a href="#combinedpanelrangepicker-ji-yu-d">¶</a><a href="javascript:void(0)" id="combinedpanelrangepicker-ji-yu-d" class="anchor-point"></a>CombinedPanelRangePicker （基于 DateRangePicker 和 TimePicker ）</h3>\n<table class="table">\n<thead>\n<tr>\n<th>Property</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>value</td>\n<td>Selected date range</td>\n<td><code>Array<string \\| Date \\| number>\\| null</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<string \\| Date\\| number>) => {}</code></td>\n<td>-</td>\n<td>Yes</td>\n</tr>\n<tr>\n<td>defaultDate</td>\n<td>Default date value</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<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</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>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>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>hideConfirm</td>\n<td>hide confirm button in additional time selection</td>\n<td><code>boolean</code></td>\n<td><code>false</code></td>\n<td>No</td>\n</tr>\n<tr>\n<td>className</td>\n<td>the class of this component</td>\n<td><code>string</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>leftClassName</td>\n<td>the class of the left calendar</td>\n<td><code>string</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>rightClassName</td>\n<td>the class of the right calendar</td>\n<td><code>string</code></td>\n<td>-</td>\n<td>No</td>\n</tr>\n<tr>\n<td>footerClassName</td>\n<td>the class of the additional time selection</td>\n<td><code>string</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</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>'}))}}}}]);