@mokcj0825/react-date-picker/dist/index.esm.js

A customizable date picker component for React applications with locale support and viewport-aware positioning

import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useRef as o,useEffect as n}from"react";const a=({size:r=25})=>e("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 512 512",opacity:".8","aria-hidden":"true",height:r,width:r,xmlns:"http://www.w3.org/2000/svg",children:[t("rect",{width:"416",height:"384",x:"48",y:"80",fill:"none",strokeLinejoin:"round",strokeWidth:"32",rx:"48"}),t("circle",{cx:"296",cy:"232",r:"24",stroke:"none"}),t("circle",{cx:"376",cy:"232",r:"24",stroke:"none"}),t("circle",{cx:"296",cy:"312",r:"24",stroke:"none"}),t("circle",{cx:"376",cy:"312",r:"24",stroke:"none"}),t("circle",{cx:"136",cy:"312",r:"24",stroke:"none"}),t("circle",{cx:"216",cy:"312",r:"24",stroke:"none"}),t("circle",{cx:"136",cy:"392",r:"24",stroke:"none"}),t("circle",{cx:"216",cy:"392",r:"24",stroke:"none"}),t("circle",{cx:"296",cy:"392",r:"24",stroke:"none"}),t("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",d:"M128 48v32m256-32v32"}),t("path",{fill:"none",strokeLinejoin:"round",strokeWidth:"32",d:"M464 160H48"})]}),l=({minDate:l=new Date(0),maxDate:p,selectedDate:h,onDateChange:F,onDateSelected:w,placeholder:b,isDarkMode:x,languageCodeKey:y,weekStartsOn:D=1,disabled:k=!1})=>{const f={datepicker:{position:"relative",display:"inline-block",fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'},rhombus:{position:"absolute",top:"-6px",left:"20px",width:"12px",height:"12px",background:"#F0F0F0",transform:"rotate(45deg)",zIndex:1001,borderTop:"1px solid #d1d5db",borderLeft:"1px solid #d1d5db"},dropdownContainer:{position:"absolute",top:"calc(100% + 10px)",left:"0",zIndex:1e3},triggerButton:{position:"relative",display:"flex",alignItems:"center",gap:"8px",padding:"8px 12px",border:"1px solid #d1d5db",borderRadius:"6px",background:"white",cursor:"pointer",transition:"border-color 0.2s",color:"#6c6c6c"},calendarIcon:{color:"#6c6c6c"},dropdown:{position:"relative",top:"0",left:"0",background:"#F0F0F0",border:"1px solid #d1d5db",borderRadius:"8px",boxShadow:"0 10px 15px -3px rgba(0, 0, 0, 0.1)",width:"253px",height:"auto",boxSizing:"border-box",paddingTop:"8px"},header:{display:"flex",alignItems:"center",justifyContent:"space-between",boxSizing:"border-box",padding:"8px 0",height:"33px"},navigation:{display:"flex",alignItems:"center",gap:"8px"},navButton:{display:"flex",alignItems:"center",justifyContent:"center",width:"32px",height:"32px",border:"none",background:"transparent",cursor:"pointer",transition:"background-color 0.2s",color:"#000"},selectors:{display:"flex",gap:"8px"},yearSelect:{padding:"4px 8px",borderRadius:"4px",borderColor:"transparent",background:"#F0F0F0",fontSize:"14px",color:"#000"},monthSelect:{padding:"4px 8px",borderRadius:"4px",borderColor:"transparent",background:"#F0F0F0",fontSize:"14px",color:"#000"},weekdays:{display:"flex",flexDirection:"row",borderBottom:"1px solid #aeaeae",justifyContent:"center"},weekday:{textAlign:"center",fontSize:"12px",fontWeight:"500",color:"#000",margin:"0.166rem",width:"1.7rem",lineHeight:"1.7rem"},calendar:{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gap:"2px",backgroundColor:"white",padding:"8px",borderBottomLeftRadius:"8px",borderBottomRightRadius:"8px"},calendarDay:{display:"flex",alignItems:"center",justifyContent:"center",width:"27.1875px",lineHeight:"27.2px",fontWeight:"400",border:"none",background:"transparent",cursor:"pointer",borderRadius:"4px",fontSize:"12.8px",transition:"background-color 0.2s",color:"#000"},selected:{backgroundColor:"#3b82f6",color:"white"},today:{border:"2px solid #3b82f6"},disabled:{color:"#d1d5db",cursor:"not-allowed"}},m={triggerButton:{background:"#464646",borderColor:"transparent",color:"#a5a5a5"},calendarIcon:{color:"white"},dropdown:{background:"#464646",borderColor:"#374151",color:"white"},rhombus:{background:"#464646",borderTopColor:"#374151",borderLeftColor:"#374151"},navButton:{color:"#FFFFFF"},yearSelect:{background:"#464646",borderColor:"transparent",color:"white"},monthSelect:{background:"#464646",borderColor:"transparent",color:"white"},calendar:{backgroundColor:"#464646",color:"#FFFFFF"},weekday:{color:"#d1d5db"},calendarDay:{color:"#FFFFFF"},disabled:{color:"#4b5563"}},v=x?Object.fromEntries(Object.entries(f).map(([e,t])=>[e,{...t,...m[e]||{}}])):f,[M,C]=r(h||new Date),[Y,S]=r(h||new Date),L=o(null),T=o(null),[B,z]=r(!1),[I,j]=r(!1),[R,E]=r({top:!0,left:!0}),W=(e=>{if(!e)return"en-US";try{const t=localStorage.getItem(e);if(t)return{en:"en-US",zh:"zh-CN",ms:"ms-MY",ja:"ja-JP",ko:"ko-KR",fr:"fr-FR",de:"de-DE",es:"es-ES",pt:"pt-BR",ru:"ru-RU",ar:"ar-SA",hi:"hi-IN"}[t]||t}catch(e){console.warn("Failed to get language code from localStorage:",e)}return"en-US"})(y);n(()=>{const e=()=>{j(window.innerWidth>=1024)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),n(()=>{const e=e=>{L.current&&!L.current.contains(e.target)&&z(!1)};return B&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[B]),n(()=>{if(B&&L.current){const e=()=>{const e=L.current;if(!e)return;const t=e.getBoundingClientRect(),r=window.innerWidth,o=window.innerHeight,n={top:t.bottom+320<=o,left:t.left+253<=r};E(n)};return E({top:!0,left:!0}),setTimeout(e,0),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}},[B]);const O=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,U=e=>new Date(e.getFullYear(),e.getMonth()+1,0).getDate(),$=(e,t)=>{const r=t||M,o=new Date(r.getFullYear(),r.getMonth(),e);!t||t.getMonth()===M.getMonth()&&t.getFullYear()===M.getFullYear()||C(new Date(r.getFullYear(),r.getMonth(),1)),S(o),F?.(o),w?.(o),z(!1)};return e("div",{style:v.datepicker,"data-theme":x?"dark":void 0,ref:L,children:[e("div",{style:{...v.triggerButton,...k?v.disabled:{}},onClick:()=>!k&&z(!B),onMouseEnter:e=>{k||(e.currentTarget.style.borderColor="#9ca3af")},onMouseLeave:e=>{k||(e.currentTarget.style.borderColor="#d1d5db")},children:[t("div",{style:v.calendarIcon,children:t(a,{})}),I&&t("span",{children:h?O(h):b||O(new Date)})]}),B&&e("div",{ref:T,style:{...v.dropdownContainer,top:R.top?"calc(100% + 10px)":"auto",bottom:R.top?"auto":"calc(100% + 10px)",left:R.left?"0":"auto",right:R.left?"auto":"0"},children:[t(i,{styles:v,position:R}),e("div",{style:v.dropdown,children:[e("div",{style:v.header,children:[t(s,{minDate:l,currentDate:M,onClick:()=>{const e=new Date(M.getFullYear(),M.getMonth()-1,1);l&&e<new Date(l.getFullYear(),l.getMonth(),1)||C(e)},styles:v}),e("div",{style:v.selectors,children:[t(c,{currentDate:M,minDate:l,maxDate:p,onYearChange:e=>{C(e)},styles:v}),t(d,{currentDate:M,minDate:l,maxDate:p,onMonthChange:e=>{C(e)},styles:v,locale:W})]}),t(g,{maxDate:p,currentDate:M,onClick:()=>{const e=new Date(M.getFullYear(),M.getMonth()+1,1);p&&e>new Date(p.getFullYear(),p.getMonth(),1)||C(e)},styles:v})]}),t(u,{styles:v,locale:W,weekStartsOn:D}),t("div",{style:v.calendar,children:(()=>{const e=U(M),r=(e=>{const t=new Date(e.getFullYear(),e.getMonth(),1).getDay();return 1===D?0===t?6:t-1:t})(M),o=[],n=new Date(M.getFullYear(),M.getMonth()-1,1),a=U(n);for(let e=0;e<r;e++){const i=a-r+e+1,c=new Date(n.getFullYear(),n.getMonth(),i),d=l&&c<l||p&&c>p;o.push(t("div",{onClick:()=>!d&&$(i,n),style:{...v.calendarDay,...d?v.disabled:{},opacity:.5},onMouseEnter:e=>{d||(e.currentTarget.style.backgroundColor=x?"#6b7280":"#f3f4f6",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},onMouseLeave:e=>{d||(e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},children:i},`prev-${i}`))}for(let r=1;r<=e;r++){const e=new Date(M.getFullYear(),M.getMonth(),r),n=Y.getDate()===r&&Y.getMonth()===M.getMonth()&&Y.getFullYear()===M.getFullYear(),a=(new Date).getDate()===r&&(new Date).getMonth()===M.getMonth()&&(new Date).getFullYear()===M.getFullYear(),i=l&&e<l||p&&e>p;o.push(t("div",{onClick:()=>!i&&$(r),style:{...v.calendarDay,...n?v.selected:{},...a?v.today:{},...i?v.disabled:{},...x&&!i?{":hover":{backgroundColor:"#464646",color:"#FFFFFF"}}:{}},onMouseEnter:e=>{i||n||(e.currentTarget.style.backgroundColor=x?"#6b7280":"#f3f4f6",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},onMouseLeave:e=>{i||n||(e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},children:r},r))}const i=42-(r+e);for(let e=1;e<=i;e++){const r=new Date(M.getFullYear(),M.getMonth()+1,1),n=new Date(r.getFullYear(),r.getMonth(),e),a=l&&n<l||p&&n>p;o.push(t("div",{onClick:()=>!a&&$(e,r),style:{...v.calendarDay,...a?v.disabled:{},opacity:.5},onMouseEnter:e=>{a||(e.currentTarget.style.backgroundColor=x?"#6b7280":"#f3f4f6",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},onMouseLeave:e=>{a||(e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},children:e},`next-${e}`))}return o})()})]})]})]})},i=({styles:e,position:r})=>t("div",{style:{...e.rhombus,top:r.top?"-6px":"auto",bottom:r.top?"auto":"-6px",left:r.left?"20px":"auto",right:r.left?"auto":"20px"}}),c=({currentDate:e,minDate:r,maxDate:o,onYearChange:n,styles:a})=>{const l=(new Date).getFullYear(),i=r.getFullYear(),c=o?o.getFullYear():l+10,d=Array.from({length:c-i+1},(e,t)=>i+t).filter(e=>!(e<r.getFullYear())&&!(o&&e>o.getFullYear()));return t("select",{value:e.getFullYear(),onChange:t=>{const a=parseInt(t.target.value);let l=new Date(a,e.getMonth(),1);r&&l<new Date(r.getFullYear(),r.getMonth(),1)?l=new Date(r.getFullYear(),r.getMonth(),1):o&&l>new Date(o.getFullYear(),o.getMonth(),1)&&(l=new Date(o.getFullYear(),o.getMonth(),1)),n(l)},style:a.yearSelect,children:d.map(e=>t("option",{value:e,children:e},e))})},d=({currentDate:e,minDate:r,maxDate:o,onMonthChange:n,locale:a,styles:l})=>{const i=(e=>{const t=[];for(let r=0;r<12;r++){const o=new Date(2024,r,1);t.push(o.toLocaleDateString(e,{month:"long"}))}return t})(a);return t("select",{value:e.getMonth(),onChange:t=>{const a=parseInt(t.target.value);let l=new Date(e.getFullYear(),a,1);r&&l<new Date(r.getFullYear(),r.getMonth(),1)?l=new Date(r.getFullYear(),r.getMonth(),1):o&&l>new Date(o.getFullYear(),o.getMonth(),1)&&(l=new Date(o.getFullYear(),o.getMonth(),1)),n(l)},style:l.monthSelect,children:i.map((n,a)=>{const l=new Date(e.getFullYear(),a,1),i=r&&l<new Date(r.getFullYear(),r.getMonth(),1)||o&&l>new Date(o.getFullYear(),o.getMonth(),1);return t("option",{value:a,disabled:i,children:n},n)})})},s=({minDate:e,currentDate:r,onClick:o,styles:n})=>{const a=e&&new Date(r.getFullYear(),r.getMonth()-1,1)<new Date(e.getFullYear(),e.getMonth(),1);return t("button",{style:n.navButton,onClick:o,disabled:a,"aria-label":"Previous month",children:t("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M15 18L9 12L15 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})},g=({maxDate:e,currentDate:r,onClick:o,styles:n})=>{const a=e&&new Date(r.getFullYear(),r.getMonth()+1,1)>new Date(e.getFullYear(),e.getMonth(),1);return t("button",{style:n.navButton,onClick:o,disabled:a,"aria-label":"Next month",children:t("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M9 18L15 12L9 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})},u=({styles:e,locale:r,weekStartsOn:o})=>{const n=((e,t)=>{const r=[];for(let o=0;o<7;o++){const n=1===t?o+1:6===o?0:o+1,a=new Date(2024,0,0===n?7:n);r.push(a.toLocaleDateString(e,{weekday:"short"}))}return r})(r,o);return t("div",{style:e.weekdays,children:n.map(r=>t("div",{style:e.weekday,children:r},r))})};export{l as Datepicker};
//# sourceMappingURL=index.esm.js.map