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