@progress/kendo-react-dateinputs/datetimepicker/DateTimeSelector.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 E=require("react"),_=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),p=require("@progress/kendo-react-buttons"),N=require("../calendar/components/Calendar.js"),B=require("../timepicker/TimePart.js"),c=require("../utils.js"),y=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),b=require("../timepicker/utils.js");function V(d){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(s,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return s.default=d,Object.freeze(s)}const n=V(E),D=class D extends n.Component{constructor(s){super(s),this._calendar=null,this._timePart=null,this._cancelButton=null,this._acceptButton=null,this._dateButtonRef=null,this._calendarWrap=null,this.shouldFocusPart=!1,this.focus=e=>{Promise.resolve().then(()=>{this.state.tab==="time"&&this._timePart&&this._timePart.focus(e);const t=this.calendarElement();this.state.tab==="date"&&t&&t.focus(e)})},this.calendarElement=()=>this._calendar&&this._calendar.element||this._calendarWrap&&this._calendarWrap.querySelector(".k-calendar"),this.move=e=>{if(e==="right"&&this.state.tab==="time"||e==="left"&&this.state.tab==="date")return;const t=e==="left"?"date":"time";this.shouldFocusPart=!0,this.setState({tab:t})},this.dateTimeFooter=()=>{const{cancelButton:e,unstyled:t}=this.props,i=t&&t.uDateTimePicker,o=this.localizationService.toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),h=this.localizationService.toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]);return n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeFooter({c:i}))},e&&n.createElement(p.Button,{type:"button",ref:r=>{this._cancelButton=r},className:a.classNames(a.uTime.cancel({c:i})),onClick:this.handleReject,onKeyDown:this.handleCancelKeyDown,title:o,"aria-label":o},o),n.createElement(p.Button,{type:"button",themeColor:"primary",ref:r=>{this._acceptButton=r},className:a.classNames(a.uTime.accept({c:i})),disabled:!this.hasDateValue,onClick:this.handleAccept,onKeyDown:this.handleSetKeyDown,title:h,"aria-label":h},h))},this.handleReject=e=>{this.setState({dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE});const t=this.mergeDate(this.props.value,this.props.value||c.MIDNIGHT_DATE);if(this.props.onReject){const i={nativeEvent:e.nativeEvent,syntheticEvent:e,target:this,value:t};this.props.onReject.call(void 0,i)}},this.handleAccept=(e,t)=>{if(!this.state.dateValue||!this.state.timeValue||!this.hasDateValue)return;const i=this.mergeDate(this.state.dateValue,t||this.state.timeValue);this.props.onChange.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:this})},this.handleNowClick=e=>{this.setState({timeValue:b.getNow()}),this.handleAccept(e,b.getNow())},this.handleCalendarValueChange=e=>{e.syntheticEvent.stopPropagation(),this.setState({dateValue:e.value,tab:"time"}),this.shouldFocusPart=!0},this.handleTimeListContainerChange=e=>{this.setState({timeValue:e})},this.handleDateClick=e=>{e.stopPropagation(),this.move("left")},this.handleTimeClick=e=>{e.stopPropagation(),this.move("right")},this.handleKeyDown=e=>{const{keyCode:t,altKey:i}=e;if(!this.props.disabled)switch(t){case a.Keys.enter:!this.hasActiveButton()&&this.hasDateValue&&this.handleAccept(e);return;case a.Keys.left:if(!i)return;this.move("left");return;case a.Keys.right:if(!i)return;this.move("right");return;default:return}},this.handleCancelKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&!this.hasDateValue&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleSetKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.tab&&this._dateButtonRef&&this._dateButtonRef.element&&(e.preventDefault(),this._dateButtonRef.element.focus())},this.handleDateKeyDown=e=>{var o,h,r,g;const{keyCode:t,shiftKey:i}=e;i&&t===a.Keys.tab&&(e.stopPropagation(),this.hasDateValue?(g=(r=this._acceptButton)==null?void 0:r.element)==null||g.focus():(h=(o=this._cancelButton)==null?void 0:o.element)==null||h.focus()),t===a.Keys.enter&&(e.stopPropagation(),this.move("left"))},this.handleTimeKeyDown=e=>{const{keyCode:t}=e;t===a.Keys.enter&&(e.stopPropagation(),this.move("right"))},this.handleTimePartMount=e=>{this.setState({timeValue:e})},this.state={tab:"date",dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE}}get calendar(){return this._calendar}get timePart(){return this._timePart}get hasDateValue(){return this.state.dateValue!==null}get localizationService(){return _.provideLocalizationService(this)}componentDidUpdate(s,e){var t,i;this.shouldFocusPart&&this.focus({preventScroll:!0}),(((t=s.value)==null?void 0:t.getTime())!==((i=this.props.value)==null?void 0:i.getTime())||this.state.tab!==e.tab&&this.props.value)&&this.setState(o=>({dateValue:s.value&&this.props.value&&y.isEqualDate(s.value,this.props.value)?o.dateValue:this.props.value,timeValue:this.props.value||c.MIDNIGHT_DATE})),this.shouldFocusPart=!1}render(){const{disabled:s,min:e,max:t,weekNumber:i,focusedDate:o,format:h,mobileMode:r,footerActions:g,unstyled:f}=this.props,m=f&&f.uDateTimePicker,k=a.classNames(a.uDateTimePicker.wrap({c:m,date:this.state.tab==="date",time:this.state.tab==="time",disabled:s})),C=this.localizationService.toLanguageString(l.date,l.messages[l.date]),P=this.localizationService.toLanguageString(l.time,l.messages[l.time]),T={min:e,max:t,weekNumber:i,focusedDate:o,disabled:s||this.state.tab!=="date",value:this.state.dateValue,onChange:this.handleCalendarValueChange,navigation:!1,tabIndex:s||this.state.tab!=="date"?-1:void 0,mobileMode:r};return n.createElement("div",{onKeyDown:this.handleKeyDown,className:k,tabIndex:-1},n.createElement("div",{className:a.classNames(a.uDateTimePicker.buttonGroup({c:m}))},n.createElement(p.ButtonGroup,{width:"100%",unstyled:f},n.createElement(p.Button,{ref:u=>this._dateButtonRef=u,type:"button",selected:this.state.tab==="date",togglable:!0,onClick:this.handleDateClick,onKeyDown:this.handleDateKeyDown},C),n.createElement(p.Button,{type:"button",selected:this.state.tab==="time",togglable:!0,onClick:this.handleTimeClick,onKeyDown:this.handleTimeKeyDown},P))),n.createElement("div",{className:a.classNames(a.uDateTimePicker.selector({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.calendarWrap({c:m})),ref:u=>this._calendarWrap=u},this.props.calendar?n.createElement(this.props.calendar,{key:this.state.tab,...T}):n.createElement(N.Calendar,{key:this.state.tab,ref:u=>{this._calendar=u},...T})),n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeWrap({c:m}))},n.createElement("div",{className:a.classNames(a.uDateTimePicker.timeSelector({c:m,mobileMode:r}))},n.createElement(B.TimePart,{key:1,onNowClick:this.handleNowClick,disabled:s||this.state.tab!=="time",ref:u=>{this._timePart=u},min:this.minTime||c.MIN_TIME,max:this.maxTime||c.MAX_TIME,steps:this.props.steps,value:this.state.timeValue,format:h,onChange:this.handleTimeListContainerChange,onMount:this.handleTimePartMount,mobileMode:r,unstyled:f})))),g&&this.dateTimeFooter())}get minTime(){return this.props.minTime!==void 0?this.props.minTime:this.normalizeRange(this.props.min,this.state.dateValue)}get maxTime(){return this.props.maxTime!==void 0?this.props.maxTime:this.normalizeRange(this.props.max,this.state.dateValue)}normalizeRange(s,e){return y.isEqualDate(s,e||c.getToday())?s:null}hasActiveButton(){if(!this._acceptButton)return!1;const s=a.getActiveElement(document);return this._acceptButton&&s===this._acceptButton.element||this._cancelButton&&s===this._cancelButton.element}mergeTime(s,e){return s&&e?c.setTime(e,s):e}mergeDate(s,e){return s?c.setTime(s||c.getToday(),e):e}};D.defaultProps={footerActions:!0};let v=D;_.registerForLocalization(v);exports.DateTimeSelector=v;