@progress/kendo-react-dateinputs/datepicker/DatePicker.js

React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const lt=require("react"),e=require("prop-types"),ut=require("@progress/kendo-react-popup"),W=require("@progress/kendo-date-math"),i=require("@progress/kendo-react-common"),it=require("@progress/kendo-svg-icons"),st=require("../dateinput/DateInput.js"),ct=require("../calendar/components/Calendar.js"),a=require("../utils.js"),j=require("../messages/index.js"),dt=require("@progress/kendo-react-intl"),ft=require("./ToggleButton.js"),mt=require("../hooks/usePickerFloatingLabel.js"),pt=require("@progress/kendo-react-layout"),gt=require("../common/AdaptiveMode.js");function bt(n){const v=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const m in n)if(m!=="default"){const M=Object.getOwnPropertyDescriptor(n,m);Object.defineProperty(v,m,M.get?M:{enumerable:!0,get:()=>n[m]})}}return v.default=n,Object.freeze(v)}const o=bt(lt),U=o.forwardRef((n,v)=>{const m=i.useId(n.id),M=dt.useLocalization(),w=i.useAdaptiveModeContext(),{defaultShow:fe=l.defaultShow,defaultValue:me=l.defaultValue,dateInput:pe=l.dateInput,calendar:ge=l.calendar,toggleButton:be=l.toggleButton,popup:he=l.popup,disabled:y=l.disabled,format:ve=l.format,max:I=l.max,min:T=l.min,popupSettings:D=l.popupSettings,tabIndex:we=l.tabIndex,weekNumber:ye=l.weekNumber,validityStyles:H=l.validityStyles,size:B=l.size,rounded:E=l.rounded,fillMode:x=l.fillMode,autoFocus:De=l.autoFocus,show:Y,autoSwitchParts:Ce,autoSwitchKeys:ke,twoDigitYearMax:Oe,ariaLabel:Pe,adaptive:ht,adaptiveTitle:Me=n.label||void 0,adaptiveSubtitle:Re,formatPlaceholder:Se,inputAttributes:_e,validationMessage:$,visited:vt,value:q,touched:wt,modified:yt,_adaptiveMode:Dt=w,valid:X,focusedDate:Ie,id:Te,ariaLabelledBy:Be,ariaDescribedBy:Ee,placeholder:xe,onChange:Z,onOpen:G,onClose:J,...Q}=i.usePropsContext(de,n),A=()=>{if(i.canUseDOM)return k.current&&k.current.ownerDocument||window.document},s=()=>!!(h.windowWidth&&w&&h.windowWidth<=(w==null?void 0:w.medium)&&n.adaptive),p=()=>{const t=R.current!==void 0?R.current:q!==void 0?q:h.value;return t!==null?W.cloneDate(t):null},u=()=>S.current!==void 0?S.current:Y!==void 0?Y:h.show,qe=()=>pe||l.dateInput,Ae=()=>be||l.toggleButton,Ne=()=>ge||l.calendar,Fe=()=>he||l.popup,ee=()=>n.required!==void 0?n.required:!1,N=()=>{const t=p()||q||null,r=T,c=I,_=a.isInDateRange(t,r,c),z=$!==void 0,L=(!ee()||t!=null)&&_,K=X!==void 0?X:L;return{customError:z,rangeOverflow:t&&c.getTime()<t.getTime()||!1,rangeUnderflow:t&&t.getTime()<r.getTime()||!1,valid:K,valueMissing:t===null}},Ve=t=>{for(const r of t)P({windowWidth:r.target.clientWidth})},ze=()=>{d.current&&d.current.focus()},te=t=>{f.current=t},g=t=>{u()!==t&&(P({show:t}),t&&G&&G({target:C.current}),!t&&J&&J({target:C.current}))},Le=t=>{const r=p();return r&&t?a.setTime(t,r):t},Ke=t=>{D!=null&&D.onMouseDownOutside&&D.onMouseDownOutside(t)},ne=(t,r)=>{P({value:W.cloneDate(t||void 0)}),R.current=t,S.current=!1,s()||(b.current=!0),Z&&Z({syntheticEvent:r.syntheticEvent,nativeEvent:r.nativeEvent,value:p(),show:u(),target:C.current}),R.current=void 0,S.current=void 0,g(!1)},We=t=>{const r=Le(t.value);ne(r,t)},oe=()=>{const{popupClass:t,...r}=D,c=u(),_=p(),z=_&&W.getDate(_),L=i.classNames(t),K={popupClass:"k-datepicker-popup",show:c,anchor:k.current,className:L,id:re,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...r,onMouseDownOutside:Ke},se={disabled:y,value:z,min:T,max:I,weekNumber:ye,focusedDate:Ie,className:s()?"k-calendar-lg":"",navigation:!s(),onChange:We},ce=Ne(),rt=Fe();return s()?o.createElement(ce,{_ref:te,...se}):o.createElement(rt,{...K},o.createElement(ce,{_ref:te,...se}))},ae=()=>{P({focused:!1}),g(!1)},je=()=>{const{windowWidth:t=0}=h,r={expand:u(),onClose:ae,title:Me,subTitle:Re,windowWidth:t};return o.createElement(gt.AdaptiveMode,{...r},o.createElement(pt.ActionSheetContent,null,oe()))},Ue=t=>{ne(t.value,t)},He=()=>{P({focused:!0})},Ye=()=>{g(!u())},F=()=>{y||(b.current=!0,g(!u()))},$e=t=>{t.preventDefault()},Xe=t=>{const{altKey:r,keyCode:c}=t;if(c===i.Keys.esc&&u()){b.current=!0,g(!1);return}r&&(c===i.Keys.up||c===i.Keys.down)&&(t.preventDefault(),t.stopPropagation(),b.current=c===i.Keys.up,g(c===i.Keys.down))},C=o.useRef(null),k=o.useRef(null),d=o.useRef(null),f=o.useRef(null);o.useImperativeHandle(C,()=>({props:n,get element(){return k.current},get calendar(){return f.current},get dateInput(){return d.current},get name(){return n.name},get show(){return u()},get validity(){return N()},get value(){return p()},get mobileMode(){return s()},togglePopup:Ye,focus:ze})),o.useImperativeHandle(v,()=>C.current);const R=o.useRef(void 0),S=o.useRef(void 0),Ze=o.useRef(null),b=o.useRef(!1),V=o.useRef(!1),O=o.useRef(null),[h,Ge]=o.useState({value:me,show:fe,focused:!1}),[,Je]=o.useReducer(t=>t,!0),P=t=>{Ge(r=>({...r,...t}))};o.useEffect(()=>{f.current&&f.current.element&&u()&&!V.current&&f.current.element.focus({preventScroll:!0}),s()&&u()&&!V.current&&setTimeout(()=>{f.current&&f.current.element&&f.current.element.focus({preventScroll:!0})},300),d.current&&d.current.element&&!u()&&b.current&&d.current.element.focus({preventScroll:!0}),V.current=u(),b.current=!1}),o.useEffect(()=>{var t;return O.current=i.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(r=>Ve(r)),u()&&Je(),(t=A())!=null&&t.body&&O.current&&O.current.observe(A().body),()=>{var r;clearTimeout(Ze.current),(r=A())!=null&&r.body&&O.current&&O.current.disconnect()}},[]);const re=m+"-popup-id",Qe=oe(),et=qe(),tt=p(),nt=Ae(),ot=je(),le=!H||N().valid,ue=M.toLanguageString(j.toggleCalendar,j.messages[j.toggleCalendar]),at={disabled:y,format:ve,formatPlaceholder:Se,id:Te,ariaLabelledBy:Be,ariaDescribedBy:Ee,ariaLabel:Pe,max:I,min:T,name:n.name,onChange:Ue,required:n.required,_ref:d,tabIndex:u()?-1:we,title:n.title,valid:N().valid,validationMessage:$,validityStyles:H,value:tt,label:void 0,placeholder:h.focused?null:xe,ariaExpanded:u(),size:null,fillMode:null,rounded:null,autoFill:n.autoFill,twoDigitYearMax:Oe,enableMouseWheel:n.enableMouseWheel,autoCorrectParts:n.autoCorrectParts,autoSwitchParts:Ce,autoSwitchKeys:ke,allowCaretMode:n.allowCaretMode,inputAttributes:_e},ie=o.createElement(i.AsyncFocusBlur,{onFocus:He,onBlur:s()?void 0:ae,onSyncBlur:n.onBlur,onSyncFocus:n.onFocus},t=>o.createElement(o.Fragment,null,o.createElement("span",{...n.label?{}:Q,ref:k,className:i.classNames("k-input","k-datepicker",{[`k-input-${i.kendoThemeMaps.sizeMap[B]||B}`]:B,[`k-rounded-${i.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-input-${x}`]:x,"k-invalid":!le,"k-required":ee(),"k-disabled":y},n.className),onKeyDown:Xe,style:{width:n.width},onFocus:s()?F:t.onFocus,onBlur:t.onBlur,onClick:s()?F:void 0},o.createElement(et,{_ref:d,ariaRole:"combobox",ariaExpanded:u(),ariaControls:re,autoFocus:De,...at}),o.createElement(nt,{type:"button",icon:"calendar",svgIcon:it.calendarIcon,title:ue,className:"k-input-button",rounded:null,onClick:s()?void 0:F,"aria-label":ue,fillMode:x,onMouseDown:$e}),!s()&&Qe),s()&&ot));return n.label?o.createElement(mt.PickerFloatingLabel,{dateInput:d,label:n.label,editorId:m,editorValid:le,editorDisabled:y,children:ie,style:{width:n.width},...Q}):ie});U.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:a.nullable(e.string),pattern:a.nullable(e.string),date:a.nullable(e.oneOf(["short","medium","long","full"])),time:a.nullable(e.oneOf(["short","medium","long","full"])),datetime:a.nullable(e.oneOf(["short","medium","long","full"])),era:a.nullable(e.oneOf(["narrow","short","long"])),year:a.nullable(e.oneOf(["numeric","2-digit"])),month:a.nullable(e.oneOf(["numeric","2-digit","narrow","short","long"])),day:a.nullable(e.oneOf(["numeric","2-digit"])),weekday:a.nullable(e.oneOf(["narrow","short","long"])),hour:a.nullable(e.oneOf(["numeric","2-digit"])),hour12:a.nullable(e.bool),minute:a.nullable(e.oneOf(["numeric","2-digit"])),second:a.nullable(e.oneOf(["numeric","2-digit"])),timeZoneName:a.nullable(e.oneOf(["short","long"]))})]),formatPlaceholder:e.oneOfType([a.nullable(e.oneOf(["wide","narrow","short","formatPattern"])),e.shape({year:a.nullable(e.string),month:a.nullable(e.string),day:a.nullable(e.string),hour:a.nullable(e.string),minute:a.nullable(e.string),second:a.nullable(e.string)})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:a.nullable(e.bool),appendTo:a.nullable(e.any),popupClass:a.nullable(e.string)}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string,adaptiveSubtitle:e.string,autoFocus:e.bool,inputAttributes:e.object};const l={defaultShow:!1,defaultValue:null,dateInput:st.DateInput,calendar:ct.Calendar,toggleButton:ft.ToggleButton,popup:ut.Popup,disabled:!1,format:"d",max:a.MAX_DATE,min:a.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1},de=i.createPropsContext();U.displayName="KendoReactDatePicker";exports.DatePicker=U;exports.DatePickerPropsContext=de;exports.datePickerDefaultProps=l;