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

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

"use strict";var e=require("react/jsx-runtime"),t=require("react");const r=({size:t=25})=>e.jsxs("svg",{stroke:"currentColor",fill:"currentColor",strokeWidth:"0",viewBox:"0 0 512 512",opacity:".8","aria-hidden":"true",height:t,width:t,xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("rect",{width:"416",height:"384",x:"48",y:"80",fill:"none",strokeLinejoin:"round",strokeWidth:"32",rx:"48"}),e.jsx("circle",{cx:"296",cy:"232",r:"24",stroke:"none"}),e.jsx("circle",{cx:"376",cy:"232",r:"24",stroke:"none"}),e.jsx("circle",{cx:"296",cy:"312",r:"24",stroke:"none"}),e.jsx("circle",{cx:"376",cy:"312",r:"24",stroke:"none"}),e.jsx("circle",{cx:"136",cy:"312",r:"24",stroke:"none"}),e.jsx("circle",{cx:"216",cy:"312",r:"24",stroke:"none"}),e.jsx("circle",{cx:"136",cy:"392",r:"24",stroke:"none"}),e.jsx("circle",{cx:"216",cy:"392",r:"24",stroke:"none"}),e.jsx("circle",{cx:"296",cy:"392",r:"24",stroke:"none"}),e.jsx("path",{fill:"none",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"32",d:"M128 48v32m256-32v32"}),e.jsx("path",{fill:"none",strokeLinejoin:"round",strokeWidth:"32",d:"M464 160H48"})]}),o=({styles:t,position:r})=>e.jsx("div",{style:{...t.rhombus,top:r.top?"-6px":"auto",bottom:r.top?"auto":"-6px",left:r.left?"20px":"auto",right:r.left?"auto":"20px"}}),n=({currentDate:t,minDate:r,maxDate:o,onYearChange:n,styles:a})=>{const l=(new Date).getFullYear(),s=r.getFullYear(),i=o?o.getFullYear():l+10,c=Array.from({length:i-s+1},(e,t)=>s+t).filter(e=>!(e<r.getFullYear())&&!(o&&e>o.getFullYear()));return e.jsx("select",{value:t.getFullYear(),onChange:e=>{const a=parseInt(e.target.value);let l=new Date(a,t.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:c.map(t=>e.jsx("option",{value:t,children:t},t))})},a=({currentDate:t,minDate:r,maxDate:o,onMonthChange:n,locale:a,styles:l})=>{const s=(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 e.jsx("select",{value:t.getMonth(),onChange:e=>{const a=parseInt(e.target.value);let l=new Date(t.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:s.map((n,a)=>{const l=new Date(t.getFullYear(),a,1),s=r&&l<new Date(r.getFullYear(),r.getMonth(),1)||o&&l>new Date(o.getFullYear(),o.getMonth(),1);return e.jsx("option",{value:a,disabled:s,children:n},n)})})},l=({minDate:t,currentDate:r,onClick:o,styles:n})=>{const a=t&&new Date(r.getFullYear(),r.getMonth()-1,1)<new Date(t.getFullYear(),t.getMonth(),1);return e.jsx("button",{style:n.navButton,onClick:o,disabled:a,"aria-label":"Previous month",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M15 18L9 12L15 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})},s=({maxDate:t,currentDate:r,onClick:o,styles:n})=>{const a=t&&new Date(r.getFullYear(),r.getMonth()+1,1)>new Date(t.getFullYear(),t.getMonth(),1);return e.jsx("button",{style:n.navButton,onClick:o,disabled:a,"aria-label":"Next month",children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M9 18L15 12L9 6",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})},i=({styles:t,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 e.jsx("div",{style:t.weekdays,children:n.map(r=>e.jsx("div",{style:t.weekday,children:r},r))})};exports.Datepicker=({minDate:c=new Date(0),maxDate:d,selectedDate:u,onDateChange:g,onDateSelected:h,placeholder:p,isDarkMode:x,languageCodeKey:F,weekStartsOn:w=1,disabled:b=!1})=>{const y={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"}},f={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"}},D=x?Object.fromEntries(Object.entries(y).map(([e,t])=>[e,{...t,...f[e]||{}}])):y,[k,m]=t.useState(u||new Date),[j,v]=t.useState(u||new Date),M=t.useRef(null),C=t.useRef(null),[Y,S]=t.useState(!1),[L,T]=t.useState(!1),[B,E]=t.useState({top:!0,left:!0}),R=(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"})(F);t.useEffect(()=>{const e=()=>{T(window.innerWidth>=1024)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[]),t.useEffect(()=>{const e=e=>{M.current&&!M.current.contains(e.target)&&S(!1)};return Y&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[Y]),t.useEffect(()=>{if(Y&&M.current){const e=()=>{const e=M.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)}}},[Y]);const z=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,I=e=>new Date(e.getFullYear(),e.getMonth()+1,0).getDate(),W=(e,t)=>{const r=t||k,o=new Date(r.getFullYear(),r.getMonth(),e);!t||t.getMonth()===k.getMonth()&&t.getFullYear()===k.getFullYear()||m(new Date(r.getFullYear(),r.getMonth(),1)),v(o),g?.(o),h?.(o),S(!1)};return e.jsxs("div",{style:D.datepicker,"data-theme":x?"dark":void 0,ref:M,children:[e.jsxs("div",{style:{...D.triggerButton,...b?D.disabled:{}},onClick:()=>!b&&S(!Y),onMouseEnter:e=>{b||(e.currentTarget.style.borderColor="#9ca3af")},onMouseLeave:e=>{b||(e.currentTarget.style.borderColor="#d1d5db")},children:[e.jsx("div",{style:D.calendarIcon,children:e.jsx(r,{})}),L&&e.jsx("span",{children:u?z(u):p||z(new Date)})]}),Y&&e.jsxs("div",{ref:C,style:{...D.dropdownContainer,top:B.top?"calc(100% + 10px)":"auto",bottom:B.top?"auto":"calc(100% + 10px)",left:B.left?"0":"auto",right:B.left?"auto":"0"},children:[e.jsx(o,{styles:D,position:B}),e.jsxs("div",{style:D.dropdown,children:[e.jsxs("div",{style:D.header,children:[e.jsx(l,{minDate:c,currentDate:k,onClick:()=>{const e=new Date(k.getFullYear(),k.getMonth()-1,1);c&&e<new Date(c.getFullYear(),c.getMonth(),1)||m(e)},styles:D}),e.jsxs("div",{style:D.selectors,children:[e.jsx(n,{currentDate:k,minDate:c,maxDate:d,onYearChange:e=>{m(e)},styles:D}),e.jsx(a,{currentDate:k,minDate:c,maxDate:d,onMonthChange:e=>{m(e)},styles:D,locale:R})]}),e.jsx(s,{maxDate:d,currentDate:k,onClick:()=>{const e=new Date(k.getFullYear(),k.getMonth()+1,1);d&&e>new Date(d.getFullYear(),d.getMonth(),1)||m(e)},styles:D})]}),e.jsx(i,{styles:D,locale:R,weekStartsOn:w}),e.jsx("div",{style:D.calendar,children:(()=>{const t=I(k),r=(e=>{const t=new Date(e.getFullYear(),e.getMonth(),1).getDay();return 1===w?0===t?6:t-1:t})(k),o=[],n=new Date(k.getFullYear(),k.getMonth()-1,1),a=I(n);for(let t=0;t<r;t++){const l=a-r+t+1,s=new Date(n.getFullYear(),n.getMonth(),l),i=c&&s<c||d&&s>d;o.push(e.jsx("div",{onClick:()=>!i&&W(l,n),style:{...D.calendarDay,...i?D.disabled:{},opacity:.5},onMouseEnter:e=>{i||(e.currentTarget.style.backgroundColor=x?"#6b7280":"#f3f4f6",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},onMouseLeave:e=>{i||(e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},children:l},`prev-${l}`))}for(let r=1;r<=t;r++){const t=new Date(k.getFullYear(),k.getMonth(),r),n=j.getDate()===r&&j.getMonth()===k.getMonth()&&j.getFullYear()===k.getFullYear(),a=(new Date).getDate()===r&&(new Date).getMonth()===k.getMonth()&&(new Date).getFullYear()===k.getFullYear(),l=c&&t<c||d&&t>d;o.push(e.jsx("div",{onClick:()=>!l&&W(r),style:{...D.calendarDay,...n?D.selected:{},...a?D.today:{},...l?D.disabled:{},...x&&!l?{":hover":{backgroundColor:"#464646",color:"#FFFFFF"}}:{}},onMouseEnter:e=>{l||n||(e.currentTarget.style.backgroundColor=x?"#6b7280":"#f3f4f6",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},onMouseLeave:e=>{l||n||(e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.color=x?"#FFFFFF":"#000000")},children:r},r))}const l=42-(r+t);for(let t=1;t<=l;t++){const r=new Date(k.getFullYear(),k.getMonth()+1,1),n=new Date(r.getFullYear(),r.getMonth(),t),a=c&&n<c||d&&n>d;o.push(e.jsx("div",{onClick:()=>!a&&W(t,r),style:{...D.calendarDay,...a?D.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:t},`next-${t}`))}return o})()})]})]})]})};
//# sourceMappingURL=index.js.map