@progress/kendo-react-scheduler/components/header/navigation/NavigationDatePicker.js

React Scheduler brings the functionality of Outlook's Calendar to a single UI component. KendoReact Scheduler 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 j=require("react"),_=require("@progress/kendo-react-dateinputs"),A=require("@progress/kendo-react-intl"),U=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-date-math"),V=require("@progress/kendo-react-popup"),x=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),i=require("../../../context/SchedulerContext.js"),Z=require("../../../utils/index.js");function H(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>t[n]})}}return r.default=t,Object.freeze(r)}const e=H(j),z=e.forwardRef((t,r)=>{var p;const n=e.useRef(null),a=e.useRef(null);e.useImperativeHandle(r,()=>n.current);const{timezone:h}=i.useSchedulerPropsContext(),q=m.ZonedDate.fromLocalDate(t.value,h),E=m.getDate(q),g=i.useSchedulerElementContext(),s=x.useWindow(g),[M,P]=e.useState("desktop"),[u,k]=e.useState(!1),[b,D]=e.useState(!1),S=A.useInternationalization(),{dateFormat:w,shortDateFormat:y}=i.useSchedulerDateFormatContext(),o=i.useSchedulerDateRangeContext(),[d]=i.useSchedulerDateContext(),f=o.end.getTime()-o.start.getTime()>m.MS_PER_DAY*27,F=S.format(w,f?d:o.zonedStart,f?d:o.zonedEnd.addDays(-1)),O=S.format(y,f?d:o.zonedStart,f?d:o.zonedEnd.addDays(-1)),T=e.useCallback(()=>{k(!u)},[u]),I=e.useCallback(()=>{D(!0)},[]),B=e.useCallback(()=>{k(!1),D(!1)},[]),N=e.useCallback(c=>{if(t.onChange){const l=m.ZonedDate.fromUTCDate(Z.toUTCDateTime(c.value),h);t.onChange.call(void 0,{...c,value:l})}k(!1)},[t.onChange,h]),C=e.useCallback(()=>{s().matchMedia&&P(s().matchMedia("(min-width: 1024px)").matches?"desktop":"mobile")},[s]);e.useEffect(()=>{C();const c=s().ResizeObserver,l=c&&new c(C);return l&&l.observe(g.current),()=>{c&&l.disconnect()}},[C,g,s]),e.useEffect(()=>{u&&b&&a.current&&a.current.focus()},[b,u]);const{onFocus:v,onBlur:R}=x.useAsyncFocusBlur({onFocus:I,onBlur:B});return e.createElement(e.Fragment,null,e.createElement(U.Button,{ref:n,onFocus:v,onBlur:R,fillMode:"flat",className:"k-nav-current",icon:"calendar",svgIcon:W.calendarIcon,"aria-live":"polite",tabIndex:-1,onClick:T},M==="desktop"?F:O),e.createElement(V.Popup,{anchor:(p=n.current)==null?void 0:p.element,show:u},e.createElement(_.Calendar,{ref:a,onFocus:v,onBlur:R,onChange:N,value:E})))});z.displayName="KendoReactSchedulerNavigationDatePicker";exports.NavigationDatePicker=z;