react-date-range-picker-pro/dist/index.esm.js

A powerful, customizable React date and time picker component with intelligent presets, interactive calendar, and seamless integration capabilities.

import e,{forwardRef as t,createElement as a,useState as l,useRef as n,useEffect as r,useMemo as s,useCallback as m}from"react";function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,l=Array(t);a<t;a++)l[a]=e[a];return l}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var l,n,r,s,m=[],c=!0,i=!1;try{if(r=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;c=!1}else for(;!(c=(l=r.call(a)).done)&&(m.push(l.value),m.length!==t);c=!0);}catch(e){i=!0,n=e}finally{try{if(!c&&null!=a.return&&(s=a.return(),Object(s)!==s))return}finally{if(i)throw n}}return m}}(e,t)||function(e,t){if(e){if("string"==typeof e)return c(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?c(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}document.head.appendChild(document.createElement("style")).textContent="@tailwind base;@tailwind components;@tailwind utilities;";var o={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};var d=(e,l)=>{const n=t(({color:t="currentColor",size:n=24,strokeWidth:r=2,absoluteStrokeWidth:s,children:m,...c},i)=>{return a("svg",{ref:i,...o,width:n,height:n,stroke:t,strokeWidth:s?24*Number(r)/Number(n):r,className:`lucide lucide-${d=e,d.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`,...c},[...l.map(([e,t])=>a(e,t)),...(Array.isArray(m)?m:[m])||[]]);var d});return n.displayName=`${e}`,n};const u=d("BarChart3",[["path",{d:"M3 3v18h18",key:"1s2lah"}],["path",{d:"M18 17V9",key:"2bz60n"}],["path",{d:"M13 17V5",key:"1frdt8"}],["path",{d:"M8 17v-3",key:"17ska0"}]]),g=d("Calendar",[["rect",{width:"18",height:"18",x:"3",y:"4",rx:"2",ry:"2",key:"eu3xkr"}],["line",{x1:"16",x2:"16",y1:"2",y2:"6",key:"m3sa8f"}],["line",{x1:"8",x2:"8",y1:"2",y2:"6",key:"18kwsl"}],["line",{x1:"3",x2:"21",y1:"10",y2:"10",key:"xt86sb"}]]),x=d("Check",[["polyline",{points:"20 6 9 17 4 12",key:"10jjfj"}]]),E=d("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]]),b=d("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]),v=d("Clock",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 14",key:"68esgv"}]]),p=d("Settings",[["path",{d:"M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",key:"1qme2f"}],["circle",{cx:"12",cy:"12",r:"3",key:"1v7zrd"}]]);var y=function(t){var a,c=t.initialStartDate,o=void 0===c?new Date:c,d=t.initialEndDate,u=void 0===d?new Date(Date.now()+6048e5):d,p=t.onDateRangeChange,y=t.onTimeChange,N=t.showTimeSelector,f=void 0===N||N,h=t.showPresetsByDefault,w=void 0===h||h,D=t.enableTimezone,k=void 0===D||D,C=t.customPresets,S=void 0===C?null:C,T=t.className,z=void 0===T?"":T,P=i(l(o),2),M=P[0],A=P[1],R=i(l(u),2),F=R[0],L=R[1],Y=i(l("12:00"),2),I=Y[0],j=Y[1],B=i(l(null),2),U=B[0],q=B[1],O=i(l(!1),2),W=O[0],$=O[1],Q=i(l(new Date),2),V=Q[0],J=Q[1],G=i(l(!0),2),H=G[0],_=G[1],Z=i(l(!1),2),K=Z[0],X=Z[1],ee=i(l("UTC"),2),te=ee[0],ae=ee[1],le=i(l(w),2),ne=le[0],re=le[1],se=n(null);r(function(){var e=function(e){se.current&&!se.current.contains(e.target)&&$(!1)};if(W)return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}},[W]),r(function(){p&&p({startDate:M,endDate:F,timezone:te,includeTime:K})},[M,F,te,K,p]),r(function(){y&&y(I)},[I,y]);var me=function(e){return e.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})},ce=function(e,t){var a=new Date(e);return a.setDate(a.getDate()+t),a},ie=function(e){var t=new Date(e),a=t.getDay(),l=t.getDate()-a+6;return new Date(t.setDate(l))},oe=function(e){return new Date(e.getFullYear(),e.getMonth(),1)},de=function(e){return new Date(e.getFullYear(),e.getMonth()+1,0)},ue=s(function(){if(S)return S;var t,a,l,n,r=new Date;return[{label:"Today",value:"today",startDate:r,endDate:r,icon:e.createElement(g,{size:16})},{label:"Yesterday",value:"yesterday",startDate:ce(r,-1),endDate:ce(r,-1),icon:e.createElement(g,{size:16})},{label:"Last 7 days",value:"last7days",startDate:ce(r,-7),endDate:r,icon:e.createElement(g,{size:16})},{label:"Last 30 days",value:"last30days",startDate:ce(r,-30),endDate:r,icon:e.createElement(g,{size:16})},{label:"This week",value:"thisweek",startDate:(t=r,a=new Date(t),l=a.getDay(),n=a.getDate()-l,new Date(a.setDate(n))),endDate:ie(r),icon:e.createElement(g,{size:16})},{label:"This month",value:"thismonth",startDate:oe(r),endDate:de(r),icon:e.createElement(g,{size:16})},{label:"Next 7 days",value:"next7days",startDate:r,endDate:ce(r,7),icon:e.createElement(g,{size:16})},{label:"Next 30 days",value:"next30days",startDate:r,endDate:ce(r,30),icon:e.createElement(g,{size:16})}]},[S]),ge=m(function(e){A(e.startDate),L(e.endDate),q(e.value),$(!1)},[]),xe=s(function(){var e=F-M;return Math.ceil(e/864e5)+1},[M,F]),Ee=function(){for(var t,a=(t=V,new Date(t.getFullYear(),t.getMonth()+1,0).getDate()),l=function(e){return new Date(e.getFullYear(),e.getMonth(),1).getDay()}(V),n=[],r=0;r<l;r++)n.push(e.createElement("div",{key:"empty-".concat(r),className:"h-10"}));for(var s=function(t){var a=function(e){var t=new Date(V.getFullYear(),V.getMonth(),e);return t>=M&&t<=F}(t),l=function(e){var t=new Date(V.getFullYear(),V.getMonth(),e);return t.toDateString()===M.toDateString()||t.toDateString()===F.toDateString()}(t);n.push(e.createElement("button",{key:t,onClick:function(){return function(e){var t=new Date(V.getFullYear(),V.getMonth(),e);H?(A(t),t>F&&L(t),_(!1)):(L(t),t<M&&A(t),_(!0),$(!1)),q(null)}(t)},className:"h-10 w-10 rounded-lg text-sm font-medium transition-all duration-200 hover:bg-blue-100 \n            ".concat(l?"bg-blue-600 text-white hover:bg-blue-700":"","\n            ").concat(a&&!l?"bg-blue-100 text-blue-900":"","\n            ").concat(a||l?"":"text-gray-700 hover:text-gray-900","\n          ")},t))},m=1;m<=a;m++)s(m);return e.createElement("div",{ref:se,className:"bg-white rounded-lg shadow-lg p-4 border absolute z-10 mt-2"},e.createElement("div",{className:"flex items-center justify-between mb-4"},e.createElement("button",{onClick:function(){return J(new Date(V.getFullYear(),V.getMonth()-1))},className:"p-2 hover:bg-gray-100 rounded-lg"},e.createElement(E,{size:16})),e.createElement("h3",{className:"text-lg font-semibold"},["January","February","March","April","May","June","July","August","September","October","November","December"][V.getMonth()]," ",V.getFullYear()),e.createElement("button",{onClick:function(){return J(new Date(V.getFullYear(),V.getMonth()+1))},className:"p-2 hover:bg-gray-100 rounded-lg"},e.createElement(b,{size:16}))),e.createElement("div",{className:"grid grid-cols-7 gap-1 mb-2"},["Su","Mo","Tu","We","Th","Fr","Sa"].map(function(t){return e.createElement("div",{key:t,className:"h-10 flex items-center justify-center text-sm font-medium text-gray-500"},t)})),e.createElement("div",{className:"grid grid-cols-7 gap-1"},n),e.createElement("div",{className:"mt-4 pt-4 border-t"},e.createElement("p",{className:"text-sm text-gray-600 mb-2"},H?"Select start date":"Select end date"),e.createElement("div",{className:"flex gap-2"},e.createElement("button",{onClick:function(){return _(!0)},className:"px-3 py-1 rounded text-sm ".concat(H?"bg-blue-600 text-white":"bg-gray-100 text-gray-700")},"Start"),e.createElement("button",{onClick:function(){return _(!1)},className:"px-3 py-1 rounded text-sm ".concat(H?"bg-gray-100 text-gray-700":"bg-blue-600 text-white")},"End"))))};return e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6 ".concat(z)},e.createElement("div",{className:"flex items-center gap-3 mb-6"},e.createElement(g,{className:"text-blue-600",size:24}),e.createElement("h2",{className:"text-2xl font-semibold text-gray-900"},"Smart Date Range Picker")),ne&&e.createElement("div",{className:"mb-6"},e.createElement("div",{className:"flex items-center justify-between mb-3"},e.createElement("h3",{className:"text-sm font-medium text-gray-700"},"Quick Select Presets"),e.createElement("button",{onClick:function(){return re(!1)},className:"text-xs text-gray-500 hover:text-gray-700 underline"},"Hide presets")),e.createElement("div",{className:"flex flex-wrap gap-2"},ue.map(function(t){return e.createElement("button",{key:t.value,onClick:function(){return ge(t)},className:"inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 border\n                  ".concat(U===t.value?"bg-blue-600 text-white border-blue-600 shadow-md":"bg-white text-gray-700 border-gray-300 hover:bg-blue-50 hover:border-blue-300")},t.icon,t.label)}))),e.createElement("hr",{className:"my-6 border-gray-200"}),!ne&&e.createElement("div",{className:"mb-4"},e.createElement("button",{onClick:function(){return re(!0)},className:"text-sm text-blue-600 hover:text-blue-800 underline flex items-center gap-1"},e.createElement(g,{size:14}),"Show quick presets")),e.createElement("div",{className:"mb-6"},e.createElement("h3",{className:"text-sm font-medium text-gray-700 mb-3"},"Custom Date Range"),e.createElement("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 relative"},e.createElement("div",null,e.createElement("label",{className:"block text-sm font-medium text-gray-700 mb-2"},"Start Date"),e.createElement("button",{onClick:function(){$(!W),_(!0)},className:"w-full px-4 py-3 border border-gray-300 rounded-lg text-left hover:border-blue-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors"},me(M))),e.createElement("div",null,e.createElement("label",{className:"block text-sm font-medium text-gray-700 mb-2"},"End Date"),e.createElement("button",{onClick:function(){$(!W),_(!1)},className:"w-full px-4 py-3 border border-gray-300 rounded-lg text-left hover:border-blue-400 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-colors"},me(F))),W&&e.createElement(Ee,null))),e.createElement("div",{className:"bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6"},e.createElement("div",{className:"flex items-center gap-2"},e.createElement(g,{className:"text-blue-600",size:20}),e.createElement("div",null,e.createElement("p",{className:"font-medium text-blue-900"},"Selected Range: ",me(M)," - ",me(F)),e.createElement("p",{className:"text-sm text-blue-700"},"Duration: ",xe," day",1!==xe?"s":"")))),f&&e.createElement("div",{className:"mb-6"},e.createElement("div",{className:"flex items-center gap-3 mb-4"},e.createElement(v,{className:"text-blue-600",size:20}),e.createElement("h3",{className:"text-lg font-semibold text-gray-900"},"Time Selection")),e.createElement("div",{className:"space-y-4"},e.createElement("div",null,e.createElement("label",{className:"block text-sm font-medium text-gray-700 mb-2"},"Select Time"),e.createElement("input",{type:"time",value:I,onChange:function(e){return j(e.target.value)},className:"px-4 py-3 border border-gray-300 rounded-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200"})),e.createElement("div",{className:"text-sm text-gray-600"},"Current: ",I))),e.createElement("div",null,e.createElement("h3",{className:"text-sm font-medium text-gray-700 mb-3"},"Advanced Options"),e.createElement("div",{className:"space-y-3"},e.createElement("label",{className:"flex items-center gap-3 cursor-pointer"},e.createElement("input",{type:"checkbox",checked:K,onChange:function(e){return X(e.target.checked)},className:"w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"}),e.createElement("span",{className:"text-sm text-gray-700"},"Include time in selection")),e.createElement("label",{className:"flex items-center gap-3 cursor-pointer"},e.createElement("input",{type:"checkbox",checked:ne,onChange:function(e){return re(e.target.checked)},className:"w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"}),e.createElement("span",{className:"text-sm text-gray-700"},"Show quick presets")),k&&e.createElement("div",null,e.createElement("label",{className:"block text-sm font-medium text-gray-700 mb-1"},"Timezone"),e.createElement("select",{value:te,onChange:function(e){return ae(e.target.value)},className:"px-3 py-2 border border-gray-300 rounded-lg text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"},e.createElement("option",{value:"UTC"},"UTC"),e.createElement("option",{value:"America/New_York"},"Eastern Time"),e.createElement("option",{value:"America/Chicago"},"Central Time"),e.createElement("option",{value:"America/Denver"},"Mountain Time"),e.createElement("option",{value:"America/Los_Angeles"},"Pacific Time"),e.createElement("option",{value:"Europe/London"},"London"),e.createElement("option",{value:"Europe/Paris"},"Paris"),e.createElement("option",{value:"Asia/Tokyo"},"Tokyo"),e.createElement("option",{value:"Asia/Shanghai"},"Shanghai"))))),U&&e.createElement("div",{className:"mt-4 pt-4 border-t"},e.createElement("div",{className:"inline-flex items-center gap-2 px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"},e.createElement(x,{size:16}),"Active Preset: ",null===(a=ue.find(function(e){return e.value===U}))||void 0===a?void 0:a.label)))},N=function(){var t=i(l(null),2),a=t[0],n=t[1],r=i(l("12:00"),2),s=r[0],m=r[1],c=i(l(!1),2),o=c[0],d=c[1],x=[{label:"Last Quarter",value:"lastquarter",startDate:new Date((new Date).setMonth((new Date).getMonth()-3)),endDate:new Date,icon:e.createElement(u,{size:16})},{label:"This Year",value:"thisyear",startDate:new Date((new Date).getFullYear(),0,1),endDate:new Date,icon:e.createElement(g,{size:16})},{label:"Next Quarter",value:"nextquarter",startDate:new Date,endDate:new Date((new Date).setMonth((new Date).getMonth()+3)),icon:e.createElement(u,{size:16})}];return e.createElement("div",{className:"max-w-7xl mx-auto p-6 bg-gray-50 min-h-screen"},e.createElement("div",{className:"mb-8"},e.createElement("h1",{className:"text-4xl font-bold mb-4 text-gray-900"},"Advanced Date & Time Component Demo"),e.createElement("p",{className:"text-lg text-gray-600 max-w-3xl"},"This demo showcases the Advanced Date & Time Component with different configurations, custom presets, and real-time data binding. The component is fully customizable and can be easily integrated into any React application.")),e.createElement("div",{className:"grid grid-cols-1 xl:grid-cols-3 gap-8"},e.createElement("div",{className:"xl:col-span-2"},e.createElement("div",{className:"mb-6"},e.createElement("h2",{className:"text-2xl font-semibold mb-2 text-gray-900"},"Primary Date Range Picker"),e.createElement("p",{className:"text-gray-600"},"Full-featured component with all options enabled")),e.createElement(y,{onDateRangeChange:function(e){n(e),console.log("Date range changed:",e)},onTimeChange:function(e){m(e),console.log("Time changed:",e)},showTimeSelector:!0,showPresetsByDefault:!0,enableTimezone:!0,className:"mb-8"}),e.createElement("div",{className:"mt-8"},e.createElement("div",{className:"flex items-center justify-between mb-4"},e.createElement("div",null,e.createElement("h2",{className:"text-2xl font-semibold text-gray-900"},"Custom Configuration"),e.createElement("p",{className:"text-gray-600"},"Component with custom presets and minimal UI")),e.createElement("button",{onClick:function(){return d(!o)},className:"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"},o?"Hide":"Show"," Second Picker")),o&&e.createElement(y,{initialStartDate:new Date((new Date).setMonth((new Date).getMonth()-1)),initialEndDate:new Date,customPresets:x,showTimeSelector:!1,showPresetsByDefault:!0,enableTimezone:!1,className:"border-2 border-blue-200"}))),e.createElement("div",{className:"space-y-6"},e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("div",{className:"flex items-center gap-3 mb-4"},e.createElement(p,{className:"text-green-600",size:24}),e.createElement("h3",{className:"text-xl font-semibold text-gray-900"},"Live Data")),a&&e.createElement("div",{className:"space-y-4"},e.createElement("div",null,e.createElement("p",{className:"text-sm font-medium text-gray-500"},"Start Date"),e.createElement("p",{className:"text-lg font-semibold text-gray-900"},a.startDate.toLocaleDateString())),e.createElement("div",null,e.createElement("p",{className:"text-sm font-medium text-gray-500"},"End Date"),e.createElement("p",{className:"text-lg font-semibold text-gray-900"},a.endDate.toLocaleDateString())),e.createElement("div",null,e.createElement("p",{className:"text-sm font-medium text-gray-500"},"Duration"),e.createElement("p",{className:"text-lg font-semibold text-gray-900"},Math.ceil((a.endDate-a.startDate)/864e5)+1," days")),e.createElement("div",null,e.createElement("p",{className:"text-sm font-medium text-gray-500"},"Timezone"),e.createElement("p",{className:"text-lg font-semibold text-gray-900"},a.timezone)),e.createElement("div",null,e.createElement("p",{className:"text-sm font-medium text-gray-500"},"Include Time"),e.createElement("p",{className:"text-lg font-semibold text-gray-900"},a.includeTime?"Yes":"No")),a.includeTime&&e.createElement("div",null,e.createElement("p",{className:"text-sm font-medium text-gray-500"},"Selected Time"),e.createElement("p",{className:"text-lg font-semibold text-gray-900"},s))),!a&&e.createElement("p",{className:"text-gray-500 italic"},"Interact with the date picker to see live data updates")),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h3",{className:"text-xl font-semibold text-gray-900 mb-4"},"Component Features"),e.createElement("div",{className:"space-y-3"},e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Smart preset buttons")),e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Interactive calendar")),e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Time selection")),e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Timezone support")),e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Click-outside to close")),e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Custom presets")),e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Callback functions")),e.createElement("div",{className:"flex items-center gap-3"},e.createElement("div",{className:"w-2 h-2 bg-green-500 rounded-full"}),e.createElement("span",{className:"text-sm text-gray-700"},"Configurable options")))),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h3",{className:"text-xl font-semibold text-gray-900 mb-4"},"Usage Statistics"),e.createElement("div",{className:"grid grid-cols-2 gap-4"},e.createElement("div",{className:"text-center"},e.createElement("div",{className:"text-2xl font-bold text-blue-600"},"2"),e.createElement("div",{className:"text-xs text-gray-500"},"Components")),e.createElement("div",{className:"text-center"},e.createElement("div",{className:"text-2xl font-bold text-green-600"},"8"),e.createElement("div",{className:"text-xs text-gray-500"},"Presets")),e.createElement("div",{className:"text-center"},e.createElement("div",{className:"text-2xl font-bold text-purple-600"},"9"),e.createElement("div",{className:"text-xs text-gray-500"},"Timezones")),e.createElement("div",{className:"text-center"},e.createElement("div",{className:"text-2xl font-bold text-orange-600"},"100%"),e.createElement("div",{className:"text-xs text-gray-500"},"Customizable")))),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h3",{className:"text-xl font-semibold text-gray-900 mb-4"},"Quick Start"),e.createElement("div",{className:"bg-gray-50 rounded-lg p-4 text-sm font-mono"},e.createElement("div",{className:"text-gray-600 mb-2"},"// Basic Usage"),e.createElement("div",{className:"text-blue-600"},"import"),e.createElement("div",{className:"ml-2 text-gray-800"},"DateRangePickerPro"),e.createElement("div",{className:"text-blue-600 inline"}," from"),e.createElement("div",{className:"text-green-600 inline"}," './DateRangePickerPro'"),e.createElement("div",{className:"mt-3 text-gray-600"},"// In your component"),e.createElement("div",{className:"text-red-600"},"<DateRangePickerPro"),e.createElement("div",{className:"ml-4 text-purple-600"},"onDateRangeChange="),e.createElement("div",{className:"text-gray-800 inline"},"{handleChange}"),e.createElement("div",{className:"ml-4 text-purple-600"},"showTimeSelector="),e.createElement("div",{className:"text-blue-600 inline"},"{true}"),e.createElement("div",{className:"text-red-600"},"/>"))),e.createElement("div",{className:"bg-white rounded-xl shadow-lg p-6"},e.createElement("h3",{className:"text-xl font-semibold text-gray-900 mb-4"},"Props"),e.createElement("div",{className:"space-y-3 text-sm"},e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"initialStartDate"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Initial start date")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"initialEndDate"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Initial end date")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"onDateRangeChange"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Callback for date changes")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"onTimeChange"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Callback for time changes")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"showTimeSelector"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Show/hide time picker")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"showPresetsByDefault"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Show presets initially")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"enableTimezone"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Enable timezone selection")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"customPresets"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Custom preset array")),e.createElement("div",null,e.createElement("span",{className:"font-medium text-blue-600"},"className"),e.createElement("span",{className:"text-gray-500 ml-2"},"- Additional CSS classes")))))),e.createElement("div",{className:"mt-12 bg-white rounded-xl shadow-lg p-8"},e.createElement("h2",{className:"text-2xl font-semibold text-gray-900 mb-6"},"Integration Examples"),e.createElement("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"},e.createElement("div",{className:"border border-gray-200 rounded-lg p-4"},e.createElement("div",{className:"flex items-center gap-3 mb-3"},e.createElement(u,{className:"text-blue-600",size:20}),e.createElement("h3",{className:"font-semibold text-gray-900"},"Analytics Dashboard")),e.createElement("p",{className:"text-sm text-gray-600 mb-4"},"Perfect for filtering analytics data by date ranges with quick preset options."),e.createElement("div",{className:"bg-gray-50 rounded p-3 text-xs font-mono"},e.createElement("div",{className:"text-gray-600"},"// Usage in analytics"),e.createElement("div",null,"<DateRangePickerPro"),e.createElement("div",{className:"ml-2 text-purple-600"},"customPresets="),e.createElement("div",{className:"text-gray-800 inline"},"{analyticsPresets}"),e.createElement("div",{className:"ml-2 text-purple-600"},"onDateRangeChange="),e.createElement("div",{className:"text-gray-800 inline"},"{updateCharts}"),e.createElement("div",null,"/>"))),e.createElement("div",{className:"border border-gray-200 rounded-lg p-4"},e.createElement("div",{className:"flex items-center gap-3 mb-3"},e.createElement(g,{className:"text-green-600",size:20}),e.createElement("h3",{className:"font-semibold text-gray-900"},"Booking System")),e.createElement("p",{className:"text-sm text-gray-600 mb-4"},"Ideal for hotel bookings, event scheduling, or any reservation system."),e.createElement("div",{className:"bg-gray-50 rounded p-3 text-xs font-mono"},e.createElement("div",{className:"text-gray-600"},"// Booking integration"),e.createElement("div",null,"<DateRangePickerPro"),e.createElement("div",{className:"ml-2 text-purple-600"},"showTimeSelector="),e.createElement("div",{className:"text-blue-600 inline"},"{true}"),e.createElement("div",{className:"ml-2 text-purple-600"},"enableTimezone="),e.createElement("div",{className:"text-blue-600 inline"},"{true}"),e.createElement("div",null,"/>"))),e.createElement("div",{className:"border border-gray-200 rounded-lg p-4"},e.createElement("div",{className:"flex items-center gap-3 mb-3"},e.createElement(p,{className:"text-purple-600",size:20}),e.createElement("h3",{className:"font-semibold text-gray-900"},"Report Generation")),e.createElement("p",{className:"text-sm text-gray-600 mb-4"},"Generate reports for specific date ranges with business-friendly presets."),e.createElement("div",{className:"bg-gray-50 rounded p-3 text-xs font-mono"},e.createElement("div",{className:"text-gray-600"},"// Report filtering"),e.createElement("div",null,"<DateRangePickerPro"),e.createElement("div",{className:"ml-2 text-purple-600"},"customPresets="),e.createElement("div",{className:"text-gray-800 inline"},"{businessPresets}"),e.createElement("div",{className:"ml-2 text-purple-600"},"showTimeSelector="),e.createElement("div",{className:"text-blue-600 inline"},"{false}"),e.createElement("div",null,"/>"))))),e.createElement("div",{className:"mt-8 text-center text-gray-500 text-sm"},e.createElement("p",null,"Advanced Date & Time Component Demo - Built with React and Tailwind CSS"),e.createElement("p",{className:"mt-1"},"Features: Smart presets, Interactive calendar, Time selection, Timezone support, Custom callbacks")))};export{y as DateRangePickerPro,N as DateRangePickerProDemo};
//# sourceMappingURL=index.esm.js.map