@progress/kendo-react-dateinputs/dateinput/DateInput.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 Ve=require("react"),e=require("prop-types"),I=require("@progress/kendo-date-math"),$=require("@progress/kendo-react-buttons"),G=require("@progress/kendo-svg-icons"),Z=require("@progress/kendo-react-intl"),i=require("@progress/kendo-react-common"),Le=require("@progress/kendo-react-labels"),Ne=require("@progress/kendo-dateinputs-common"),q=require("./utils.js"),u=require("../utils.js"),c=require("../messages/index.js"),pe=require("../timepicker/utils.js"),Ae=require("../common/ClearButton.js"),_e=require("./dateInputIntl.js");function Be(t){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const m in t)if(m!=="default"){const O=Object.getOwnPropertyDescriptor(t,m);Object.defineProperty(b,m,O.get?O:{enumerable:!0,get:()=>t[m]})}}return b.default=t,Object.freeze(b)}const a=Be(Ve),je="Please enter a valid value!",L=a.forwardRef((t,b)=>{var Y;const m=i.useId(t.id),O=Z.useInternationalization(),E=Z.useLocalization(),Q=i.useUnstyled(),N=i.usePropsContext(V,t).unstyled||Q,{format:R=r.format,size:ee=r.size,rounded:te=r.rounded,fillMode:ne=r.fillMode,formatPlaceholder:ae=r.formatPlaceholder,spinners:re=r.spinners,disabled:C=r.disabled,min:le=r.min,max:ue=r.max,minTime:ie=r.minTime,maxTime:oe=r.maxTime,validityStyles:se=r.validityStyles,validationMessage:p=r.validationMessage,placeholder:y=r.placeholder,enableMouseWheel:ce=r.enableMouseWheel,autoCorrectParts:de=r.autoCorrectParts,autoSwitchParts:fe=r.autoSwitchParts,allowCaretMode:me=r.allowCaretMode,twoDigitYearMax:ge=r.twoDigitYearMax,ariaHasPopup:ve=r.ariaHasPopup,autoFocus:be=r.autoFocus}=i.usePropsContext(V,t),g=()=>M.current!==void 0?M.current:o.current&&o.current.value,A=()=>{const n=o.current&&o.current.currentText||"",l=g();return y!=null&&!Re.focused&&!l?y:n},_=()=>t.required!==void 0?t.required:!1,P=()=>{const n=g()||t.value,l=le,X=ue,Te=q.isInRange(n,l,X)&&pe.isInTimeRange(n,ie,oe),Se=p!==void 0,ke=(!_()||n!=null)&&Te,qe=t.valid!==void 0?t.valid:ke;return{customError:Se,rangeOverflow:n&&X.getTime()<n.getTime()||!1,rangeUnderflow:n&&n.getTime()<l.getTime()||!1,valid:qe,valueMissing:n===null}},ye=()=>{s.current&&s.current.focus()},B=()=>new _e.DateInputIntl(O),x=()=>{const n=g();return{format:R,steps:t.steps,formatPlaceholder:ae,placeholder:y,selectPreviousSegmentOnBackspace:!0,value:t.value||n,intlService:B(),autoFill:t.autoFill!==void 0?t.autoFill:!1,enableMouseWheel:ce,autoCorrectParts:de,autoSwitchParts:fe,autoSwitchKeys:t.autoSwitchKeys||[],twoDigitYearMax:ge,allowCaretMode:me}},he=n=>{d.current&&d.current.classList.add("k-focus"),U({focused:!0})},De=n=>{d.current&&d.current.classList.remove("k-focus"),U({focused:!1})},Ie=(n,l)=>typeof n!=typeof l?!0:typeof n=="string"&&typeof l=="string"?n!==l:typeof n=="object"&&typeof l=="object"?JSON.stringify(n)!==JSON.stringify(l):!1,Oe=n=>typeof n=="string"?n:{inputFormat:n,displayFormat:n},j=n=>{M.current=g(),Pe(),v.current=n,M.current=void 0},F=n=>{t.onChange&&t.onChange(n)},H=n=>{i.getActiveElement(document)===s.current&&n.preventDefault()},Ee=()=>new Ne.DateInput(s.current,{...x(),format:Oe(x().format),events:{focus:he,blur:De,valueChange:j,click:F}}),z=()=>{s.current&&s.current.setCustomValidity&&s.current.setCustomValidity(P().valid?"":p||r.validationMessage)},Ce=n=>{!s.current||!o.current||j(n)},xe=n=>{n.preventDefault();const l=i.getActiveElement(document);s.current&&l!==s.current&&s.current.focus({preventScroll:!0})},f=n=>{const l=g();v.current&&t.onChange&&!I.isEqual(v.current.oldValue,l)&&t.onChange.call(void 0,{syntheticEvent:n,nativeEvent:v.current.event,value:v.current.value,target:w.current}),v.current=null},we=n=>{var l;(l=o.current)==null||l.modifyDateSegmentValue(1),f(n)},Me=n=>{var l;(l=o.current)==null||l.modifyDateSegmentValue(-1),f(n)},w=a.useRef(null),s=a.useRef(null),d=a.useRef(null);a.useImperativeHandle(w,()=>({props:t,get options(){return x()},get text(){return A()},get element(){return s.current},get name(){return t.name},get value(){return g()},get validity(){return P()},focus:ye,updateOnPaste:Ce})),a.useImperativeHandle(b,()=>w.current);const o=a.useRef(null),T=a.useRef(null),S=a.useRef(!1),M=a.useRef(null),v=a.useRef(null),h=a.useRef(t),[Re,U]=a.useState({focused:!1}),[,Pe]=a.useReducer(n=>n+1,0);a.useLayoutEffect(()=>{S.current||(o.current=Ee(),T.current=o.current.dateObject,S.current=!0)},[]),a.useEffect(()=>(z(),S.current||d.current&&d.current.addEventListener("wheel",H,{passive:!1}),()=>{d.current&&d.current.removeEventListener("wheel",H)}),[]),a.useEffect(()=>{z(),o.current&&((Ie(h.current.format,R)||h.current.readonly!==t.readonly||JSON.stringify(h.current.steps)!==JSON.stringify(t.steps)||B().locale!==o.current.options.intlService.locale)&&o.current.setOptions(x(),!0),h.current.value!==t.value&&(T.current.getValue()!==null||t.value!==null)&&T.current.setValue(t.value),t.ariaExpanded!==void 0&&t.ariaExpanded&&(o.current.options.placeholder=null),t.ariaExpanded!==void 0&&!t.ariaExpanded&&(o.current.options.placeholder=y),o.current.refreshElementValue(),h.current={format:R,readonly:t.readonly,ariaExpanded:t.ariaExpanded,steps:t.steps,value:t.value})});const W=t.id||m+"-accessibility-id",D=N&&N.uDateInput,K=A(),k=!se||P().valid;a.useImperativeHandle(t._ref,()=>w.current);const J=a.createElement("span",{ref:n=>d.current=n,style:t.label?void 0:{width:t.width},dir:t.dir,className:i.classNames(i.uDateInput.wrapper({c:D,size:ee,fillMode:ne,rounded:te,disabled:C,required:_(),invalid:!k}),t.className)},a.createElement("input",{ref:n=>s.current=n,role:t.ariaRole||"textbox",readOnly:t.readonly,tabIndex:t.tabIndex||0,disabled:C,title:t.title!==void 0?t.title:K,type:"text",spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:be,className:i.classNames(i.uDateInput.inputInner({c:D})),id:W,value:K,"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledBy,"aria-describedby":t.ariaDescribedBy,"aria-haspopup":ve,"aria-disabled":C,"aria-expanded":t.ariaExpanded,"aria-controls":t.ariaControls,"aria-required":t.required,"aria-invalid":!k,onKeyDown:f,onChange:f,onWheel:f,onInput:f,onClick:f,name:t.name,...t.inputAttributes}),t.children,t.clearButton&&t.value&&a.createElement(Ae,{onClick:F,key:"clearbutton"}),re&&a.createElement("span",{className:i.classNames(i.uDateInput.inputSpinner({c:D})),onMouseDown:xe},a.createElement($.Button,{tabIndex:-1,type:"button",rounded:null,className:i.classNames(i.uDateInput.spinnerIncrease({c:D})),icon:"caret-alt-up",svgIcon:G.caretAltUpIcon,"aria-label":E.toLanguageString(c.increaseValue,c.messages[c.increaseValue]),title:E.toLanguageString(c.increaseValue,c.messages[c.increaseValue]),onClick:we}),a.createElement($.Button,{tabIndex:-1,type:"button",rounded:null,className:i.classNames(i.uDateInput.spinnerDecrease({c:D})),icon:"caret-alt-down",svgIcon:G.caretAltDownIcon,"aria-label":E.toLanguageString(c.decreaseValue,c.messages[c.decreaseValue]),title:E.toLanguageString(c.decreaseValue,c.messages[c.decreaseValue]),onClick:Me})));return t.label?a.createElement(Le.FloatingLabel,{label:t.label,editorId:W,editorValue:(Y=s.current)==null?void 0:Y.value,editorValid:k,editorDisabled:C,children:J,style:{width:t.width}}):J});L.propTypes={value:e.instanceOf(Date),format:e.oneOfType([u.nullable(e.string),e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([u.nullable(e.oneOf(["wide","narrow","short","formatPattern"])),e.shape({year:u.nullable(e.string),month:u.nullable(e.string),day:u.nullable(e.string),hour:u.nullable(e.string),minute:u.nullable(e.string),second:u.nullable(e.string)})]),width:e.oneOfType([e.string,e.number]),tabIndex:e.number,title:e.string,steps:e.shape({year:u.nullable(e.number),month:u.nullable(e.number),day:u.nullable(e.number),hour:u.nullable(e.number),minute:u.nullable(e.number),second:u.nullable(e.number)}),min:e.instanceOf(Date),max:e.instanceOf(Date),disabled:e.bool,spinners:e.bool,name:e.string,dir:e.string,label:e.string,id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,ariaRole:e.string,ariaHasPopup:e.oneOfType([e.bool,e.oneOf(["grid","dialog"])]),ariaExpanded:e.oneOfType([e.bool]),onChange:e.func,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"]),autoFocus:e.bool,inputAttributes:e.object};const r={format:q.DEFAULT_FORMAT,size:"medium",rounded:"medium",fillMode:"solid",formatPlaceholder:q.DEFAULT_FORMAT_PLACEHOLDER,spinners:!1,disabled:!1,max:I.cloneDate(u.MAX_DATE),min:I.cloneDate(u.MIN_DATE),minTime:I.cloneDate(u.MIN_TIME),maxTime:I.cloneDate(u.MAX_TIME),validityStyles:!0,validationMessage:je,placeholder:null,enableMouseWheel:!0,autoCorrectParts:!0,autoSwitchParts:!0,allowCaretMode:!1,twoDigitYearMax:68,ariaHasPopup:"grid",autoFocus:!1},V=i.createPropsContext();L.displayName="KendoReactDateInput";exports.DateInput=L;exports.DateInputPropsContext=V;exports.dateInputDefaultProps=r;