UNPKG

react-datepicker-lite

Version:

A lightweight, accessible, and customizable React date picker component with TypeScript support

3 lines (2 loc) 14.6 kB
!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?a(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],a):a((e="undefined"!=typeof globalThis?globalThis:e||self).ReactDatePickerLite={},e.React.jsxRuntime,e.React)}(this,function(e,a,t){"use strict";class r{format(e,a){if(!this.isValid(e))return"";try{const t=["January","February","March","April","May","June","July","August","September","October","November","December"],r=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],n=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];let s=a;const l={EEEE:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"][e.getDay()]||"",EEE:n[e.getDay()]||"",MMMM:t[e.getMonth()]||"",MMM:r[e.getMonth()]||"",yyyy:e.getFullYear().toString(),YYYY:e.getFullYear().toString(),MM:(e.getMonth()+1).toString().padStart(2,"0"),dd:e.getDate().toString().padStart(2,"0"),DD:e.getDate().toString().padStart(2,"0"),HH:e.getHours().toString().padStart(2,"0"),mm:e.getMinutes().toString().padStart(2,"0"),ss:e.getSeconds().toString().padStart(2,"0"),YY:e.getFullYear().toString().slice(-2),M:(e.getMonth()+1).toString(),D:e.getDate().toString(),H:e.getHours().toString(),m:e.getMinutes().toString(),s:e.getSeconds().toString()},d=["EEEE","EEE","MMMM","MMM","yyyy","YYYY","MM","dd","DD","HH","mm","ss","YY","M","D","H","m","s"];for(const e of d){const a=l[e];void 0!==a&&(s=1===e.length?s.replace(new RegExp(`\\b${e}\\b`,"g"),a):s.replace(new RegExp(e,"g"),a))}return s}catch{return""}}parse(e,a){if(!e)return null;try{if("MM/dd/yyyy"===a){const a=e.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);if(a&&a[1]&&a[2]&&a[3]){const e=parseInt(a[1]),t=parseInt(a[2]),r=parseInt(a[3]);if(e<1||e>12||t<1||t>31||r<1)return null;const n=new Date(r,e-1,t);return n.getFullYear()===r&&n.getMonth()===e-1&&n.getDate()===t?n:null}}else if("dd/MM/yyyy"===a){const a=e.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);if(a&&a[1]&&a[2]&&a[3]){const e=parseInt(a[1]),t=parseInt(a[2]),r=parseInt(a[3]),n=new Date(r,t-1,e);if(n.getFullYear()===r&&n.getMonth()===t-1&&n.getDate()===e)return n}}else if("yyyy-MM-dd"===a){const a=e.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);if(a&&a[1]&&a[2]&&a[3]){const e=parseInt(a[1]),t=parseInt(a[2]),r=parseInt(a[3]),n=new Date(e,t-1,r);if(n.getFullYear()===e&&n.getMonth()===t-1&&n.getDate()===r)return n}}else if("MMM dd, yyyy"===a){const a=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],t=e.match(/^([A-Za-z]{3})\s+(\d{1,2}),\s+(\d{4})$/);if(t&&t[1]&&t[2]&&t[3]){const e=t[1],r=parseInt(t[2]),n=parseInt(t[3]),s=a.indexOf(e);if(-1!==s){const e=new Date(n,s,r);if(e.getFullYear()===n&&e.getMonth()===s&&e.getDate()===r)return e}}}const t=new Date(e);return this.isValid(t)?t:null}catch{return null}}isValid(e){return e instanceof Date&&!isNaN(e.getTime())}addDays(e,a){const t=new Date(e);return t.setDate(t.getDate()+a),t}addMonths(e,a){const t=new Date(e),r=t.getDate();return t.setMonth(t.getMonth()+a),t.getDate()!==r&&t.setDate(0),t}addYears(e,a){const t=new Date(e),r=t.getMonth();return t.setFullYear(t.getFullYear()+a),t.getMonth()!==r&&t.setDate(0),t}startOfDay(e){const a=new Date(e);return a.setHours(0,0,0,0),a}startOfMonth(e){const a=new Date(e);return a.setDate(1),a.setHours(0,0,0,0),a}startOfYear(e){const a=new Date(e);return a.setMonth(0,1),a.setHours(0,0,0,0),a}endOfDay(e){const a=new Date(e);return a.setHours(23,59,59,999),a}endOfMonth(e){const a=new Date(e);return a.setMonth(a.getMonth()+1,0),a.setHours(23,59,59,999),a}endOfYear(e){const a=new Date(e);return a.setMonth(11,31),a.setHours(23,59,59,999),a}isSameDay(e,a){return!(!this.isValid(e)||!this.isValid(a))&&(e.getFullYear()===a.getFullYear()&&e.getMonth()===a.getMonth()&&e.getDate()===a.getDate())}isSameMonth(e,a){return!(!this.isValid(e)||!this.isValid(a))&&(e.getFullYear()===a.getFullYear()&&e.getMonth()===a.getMonth())}isSameYear(e,a){return!(!this.isValid(e)||!this.isValid(a))&&e.getFullYear()===a.getFullYear()}isAfter(e,a){return!(!this.isValid(e)||!this.isValid(a))&&e.getTime()>a.getTime()}isBefore(e,a){return!(!this.isValid(e)||!this.isValid(a))&&e.getTime()<a.getTime()}getDay(e){return e.getDay()}getMonth(e){return e.getMonth()}getYear(e){return e.getFullYear()}getDaysInMonth(e){return new Date(e.getFullYear(),e.getMonth()+1,0).getDate()}today(){return new Date}}const n=new r,s={code:"en-US",name:"English (US)",months:["January","February","March","April","May","June","July","August","September","October","November","December"],monthsShort:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],weekdays:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],weekdaysShort:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],weekdaysMin:["Su","Mo","Tu","We","Th","Fr","Sa"],firstDayOfWeek:0,rtl:!1,dateFormat:"MM/DD/YYYY",timeFormat:"HH:mm",dateTimeFormat:"MM/DD/YYYY HH:mm"},l=s;const d=t.forwardRef(({value:e,defaultValue:r,onChange:s,dateAdapter:d=n,format:o,placeholder:i="Select date",disabled:c=!1,readOnly:u=!1,autoFocus:h=!1,className:g="",locale:y=l,minDate:m,maxDate:D,disabledDates:f,onFocus:p,onBlur:b,onKeyDown:M,onCalendarToggle:S,isCalendarOpen:v=!1,"aria-label":k,"aria-describedby":w,id:x,...F},Y)=>{const[j,C]=t.useState(()=>e&&d.isValid(e)?d.format(e,o||y.dateFormat):r&&d.isValid(r)?d.format(r,o||y.dateFormat):""),[N,A]=t.useState(!1),E=t.useCallback(e=>{const a=e.target.value;if(C(a),""===a)return void(null==s||s(null));const t=d.parse(a,o||y.dateFormat);t&&d.isValid(t)&&(null==s||s(t))},[d,o,y.dateFormat,s]),O=t.useCallback(e=>{A(!0),null==p||p(e),null==S||S(!0)},[p,S]),V=t.useCallback(a=>{if(A(!1),null==b||b(a),j&&e&&d.isValid(e)){const a=d.format(e,o||y.dateFormat);C(a)}},[b,j,e,d,o,y.dateFormat]),T=t.useCallback(e=>{null==M||M(e),"Escape"===e.key?null==S||S(!1):"Enter"!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),null==S||S(!0))},[M,S]);t.useEffect(()=>{if(e&&d.isValid(e)){const a=d.format(e,o||y.dateFormat);C(a)}else null==e&&C("")},[e,d,o,y.dateFormat]);const H=["rdl-date-input",N&&"rdl-date-input--focused",c&&"rdl-date-input--disabled",u&&"rdl-date-input--readonly",v&&"rdl-date-input--calendar-open",g].filter(Boolean).join(" ");return a.jsxs("div",{className:"rdl-date-input-wrapper",children:[a.jsx("input",{ref:Y,type:"text",value:j,onChange:E,onFocus:O,onBlur:V,onKeyDown:T,placeholder:i,disabled:c,readOnly:u,autoFocus:h,className:H,"aria-label":k||"Date input","aria-describedby":w,"aria-expanded":v,"aria-haspopup":"dialog","aria-controls":v?`${x||"datepicker"}-calendar`:void 0,role:"combobox",id:x,...F}),a.jsx("button",{type:"button",className:"rdl-date-input-toggle",onClick:()=>null==S?void 0:S(!v),disabled:c,"aria-label":"Open calendar",tabIndex:-1,children:a.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor","aria-hidden":"true",children:a.jsx("path",{d:"M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zM1 5v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5H1z"})})})]})});d.displayName="DateInput";const o=({currentDate:e,onCurrentDateChange:r,selectedDate:s,selectedRange:d,onDateSelect:o,dateAdapter:i=n,minDate:c,maxDate:u,disabledDates:h,locale:g=l,showWeekNumbers:y=!1,className:m="",isRangeSelection:D=!1,rangeHoverDate:f,onRangeHover:p})=>{const b=t.useMemo(()=>{const a=i.startOfMonth(e),t=i.addDays(a,-(i.getDay(a)-g.firstDayOfWeek+7)%7),r=i.addDays(t,41),n=[];let l=t;for(;i.isBefore(l,r);){const a=i.isSameDay(l,i.today()),t=!!s&&i.isSameDay(l,s),r=!i.isSameMonth(l,e),o=0===i.getDay(l)||6===i.getDay(l);let g=!1;c&&i.isBefore(l,i.startOfDay(c))&&(g=!0),u&&i.isAfter(l,i.startOfDay(u))&&(g=!0),h&&!g&&(g=Array.isArray(h)?h.some(e=>i.isSameDay(l,e)):h(l));let y=!1,m=!1,p=!1;if(D&&d){const{start:e,end:a}=d;if(e&&a)y=(i.isAfter(l,e)||i.isSameDay(l,e))&&(i.isBefore(l,a)||i.isSameDay(l,a)),m=i.isSameDay(l,e),p=i.isSameDay(l,a);else if(e&&f){const a=i.isBefore(e,f)?e:f,t=i.isAfter(e,f)?e:f;y=(i.isAfter(l,a)||i.isSameDay(l,a))&&(i.isBefore(l,t)||i.isSameDay(l,t))}}n.push({date:l,isToday:a,isSelected:t,isInRange:y,isRangeStart:m,isRangeEnd:p,isDisabled:g,isOutsideMonth:r,isWeekend:o}),l=i.addDays(l,1)}return n},[e,s,d,i,g.firstDayOfWeek,c,u,h,D,f]),M=t.useCallback(()=>{r(i.addMonths(e,-1))},[e,i,r]),S=t.useCallback(()=>{r(i.addMonths(e,1))},[e,i,r]),v=t.useCallback(e=>{e.isDisabled||o(e.date)},[o]),k=t.useCallback(e=>{D&&p&&!e.isDisabled&&p(e.date)},[D,p]),w=t.useCallback(()=>{D&&p&&p(null)},[D,p]),x=t.useCallback(a=>{a.shiftKey?r(i.addYears(e,-1)):r(i.addYears(e,1))},[e,i,r]),F=t.useCallback((a,t)=>{if(t.isDisabled)return;const n=b.findIndex(e=>i.isSameDay(e.date,t.date));let s=n;switch(a.key){case"Enter":case" ":a.preventDefault(),o(t.date);break;case"ArrowRight":a.preventDefault(),s=Math.min(n+1,b.length-1);break;case"ArrowLeft":a.preventDefault(),s=Math.max(n-1,0);break;case"ArrowDown":a.preventDefault(),s=Math.min(n+7,b.length-1);break;case"ArrowUp":a.preventDefault(),s=Math.max(n-7,0);break;case"Home":a.preventDefault(),s=n-n%7;break;case"End":a.preventDefault(),s=n+(6-n%7);break;case"PageUp":a.preventDefault(),r(i.addMonths(e,-1));break;case"PageDown":a.preventDefault(),r(i.addMonths(e,1));break;default:return}if(s!==n&&s>=0&&s<b.length){const e=b[s];if(e&&!e.isDisabled){const e=document.querySelectorAll(".rdl-calendar-day")[s];e&&e.focus()}}},[b,i,o,r,e]),Y=t.useMemo(()=>{const e=[];for(let a=0;a<7;a++){const t=(g.firstDayOfWeek+a)%7;e.push(g.weekdaysMin[t])}return e},[g]),j=["rdl-calendar",y&&"rdl-calendar--with-week-numbers",D&&"rdl-calendar--range-selection",m].filter(Boolean).join(" ");return a.jsxs("div",{className:j,children:[a.jsxs("div",{className:"rdl-calendar-header",children:[a.jsx("button",{type:"button",className:"rdl-calendar-nav rdl-calendar-nav--prev",onClick:M,"aria-label":"Previous month",children:a.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor",children:a.jsx("path",{d:"M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"})})}),a.jsxs("button",{type:"button",className:"rdl-calendar-title",onClick:x,"aria-label":`${g.months[i.getMonth(e)]} ${i.getYear(e)}, click to navigate years`,children:[a.jsx("span",{className:"rdl-calendar-month",children:g.months[i.getMonth(e)]}),a.jsx("span",{className:"rdl-calendar-year",children:i.getYear(e)})]}),a.jsx("button",{type:"button",className:"rdl-calendar-nav rdl-calendar-nav--next",onClick:S,"aria-label":"Next month",children:a.jsx("svg",{width:"16",height:"16",viewBox:"0 0 16 16",fill:"currentColor",children:a.jsx("path",{d:"M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"})})})]}),a.jsxs("div",{className:"rdl-calendar-grid",role:"grid","aria-label":`Calendar for ${g.months[i.getMonth(e)]} ${i.getYear(e)}`,children:[a.jsxs("div",{className:"rdl-calendar-weekdays",role:"row",children:[y&&a.jsx("div",{className:"rdl-calendar-weekday rdl-calendar-week-number-header",role:"columnheader",children:"Wk"}),Y.map((e,t)=>a.jsx("div",{className:"rdl-calendar-weekday",role:"columnheader",children:e},t))]}),a.jsx("div",{className:"rdl-calendar-days",children:Array.from({length:6},(e,t)=>a.jsxs("div",{className:"rdl-calendar-week",role:"row",children:[y&&a.jsx("div",{className:"rdl-calendar-week-number",role:"rowheader",children:t+1}),b.slice(7*t,7*(t+1)).map((e,t)=>{const r=["rdl-calendar-day",e.isToday&&"rdl-calendar-day--today",e.isSelected&&"rdl-calendar-day--selected",e.isInRange&&"rdl-calendar-day--in-range",e.isRangeStart&&"rdl-calendar-day--range-start",e.isRangeEnd&&"rdl-calendar-day--range-end",e.isDisabled&&"rdl-calendar-day--disabled",e.isOutsideMonth&&"rdl-calendar-day--outside-month",e.isWeekend&&"rdl-calendar-day--weekend"].filter(Boolean).join(" ");return a.jsx("div",{role:"gridcell",children:a.jsx("button",{type:"button",className:r,onClick:()=>v(e),onMouseEnter:()=>k(e),onMouseLeave:w,onKeyDown:a=>F(a,e),disabled:e.isDisabled,"aria-label":i.format(e.date,g.dateFormat),"aria-pressed":e.isSelected,"aria-disabled":e.isDisabled,tabIndex:e.isSelected?0:-1,children:i.format(e.date,"D")})},t)})]},t))})]})]})};e.Calendar=o,e.DateInput=d,e.DatePicker=({value:e,defaultValue:r,onChange:s,dateAdapter:i=n,format:c,placeholder:u,disabled:h=!1,readOnly:g=!1,autoFocus:y=!1,className:m="",locale:D=l,minDate:f,maxDate:p,disabledDates:b,showWeekNumbers:M=!1,showToday:S=!0,closeOnSelect:v=!0,onFocus:k,onBlur:w,onKeyDown:x,"aria-label":F,"aria-describedby":Y,id:j})=>{const[C,N]=t.useState(!1),[A,E]=t.useState(()=>e&&i.isValid(e)?e:r&&i.isValid(r)?r:i.today()),O=t.useRef(null),V=t.useRef(null),[T,H]=t.useState(()=>r||null),I=void 0!==e?e:T,R=void 0!==e,B=t.useCallback(a=>{void 0===e&&H(a),null==s||s(a)},[e,s]),J=t.useCallback(e=>{h||g||N(e)},[h,g]),W=t.useCallback(e=>{B(e),E(e),v&&(N(!1),requestAnimationFrame(()=>{var e;null==(e=V.current)||e.focus()}))},[B,v]),$=t.useCallback(e=>{E(e)},[]);t.useEffect(()=>{const e=e=>{O.current&&!O.current.contains(e.target)&&N(!1)};if(C)return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[C]);const L=t.useCallback(e=>{null==x||x(e),"Escape"===e.key&&C&&(N(!1),e.preventDefault())},[x,C]);t.useEffect(()=>{I&&i.isValid(I)&&E(I)},[I,i]);const z=["rdl-date-picker",C&&"rdl-date-picker--open",h&&"rdl-date-picker--disabled",m].filter(Boolean).join(" "),K={ref:V,onChange:B,dateAdapter:i,disabled:h,readOnly:g,autoFocus:y,locale:D,onCalendarToggle:J,isCalendarOpen:C,onKeyDown:L,...u&&{placeholder:u},...c&&{format:c},...void 0!==f&&{minDate:f},...void 0!==p&&{maxDate:p},...b&&{disabledDates:b},...k&&{onFocus:k},...w&&{onBlur:w},...F&&{"aria-label":F},...Y&&{"aria-describedby":Y},...j&&{id:j}};K.value=R?e:T;const P={currentDate:A,onCurrentDateChange:$,selectedDate:I,onDateSelect:W,dateAdapter:i,locale:D,showWeekNumbers:M,...void 0!==f&&{minDate:f},...void 0!==p&&{maxDate:p},...b&&{disabledDates:b}};return a.jsxs("div",{ref:O,className:z,children:[a.jsx(d,{...K}),C&&a.jsxs("div",{className:"rdl-date-picker-dropdown",children:[a.jsx(o,{...P}),S&&a.jsx("div",{className:"rdl-date-picker-footer",children:a.jsx("button",{type:"button",className:"rdl-date-picker-today-button",onClick:()=>W(i.today()),children:"Today"})})]})]})},e.NativeDateAdapter=r,e.defaultLocale=l,e.enUS=s,e.getLocale=function(e){return l},e.nativeDateAdapter=n,e.version="1.0.2",Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}); //# sourceMappingURL=index.umd.js.map