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

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

"use strict";var e=require("react");function t(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 a(e,a){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,a)||function(e,a){if(e){if("string"==typeof e)return t(e,a);var l={}.toString.call(e).slice(8,-1);return"Object"===l&&e.constructor&&(l=e.constructor.name),"Map"===l||"Set"===l?Array.from(e):"Arguments"===l||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(l)?t(e,a):void 0}}(e,a)||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 l={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 n=(t,a)=>{const n=e.forwardRef(({color:n="currentColor",size:r=24,strokeWidth:s=2,absoluteStrokeWidth:m,children:c,...i},o)=>{return e.createElement("svg",{ref:o,...l,width:r,height:r,stroke:n,strokeWidth:m?24*Number(s)/Number(r):s,className:`lucide lucide-${d=t,d.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase()}`,...i},[...a.map(([t,a])=>e.createElement(t,a)),...(Array.isArray(c)?c:[c])||[]]);var d});return n.displayName=`${t}`,n};const r=n("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"}]]),s=n("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"}]]),m=n("Check",[["polyline",{points:"20 6 9 17 4 12",key:"10jjfj"}]]),c=n("ChevronLeft",[["path",{d:"m15 18-6-6 6-6",key:"1wnfg3"}]]),i=n("ChevronRight",[["path",{d:"m9 18 6-6-6-6",key:"mthhwq"}]]),o=n("Clock",[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["polyline",{points:"12 6 12 12 16 14",key:"68esgv"}]]),d=n("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 u=function(t){var l,n=t.initialStartDate,r=void 0===n?new Date:n,d=t.initialEndDate,u=void 0===d?new Date(Date.now()+6048e5):d,g=t.onDateRangeChange,x=t.onTimeChange,E=t.showTimeSelector,b=void 0===E||E,v=t.showPresetsByDefault,p=void 0===v||v,y=t.enableTimezone,f=void 0===y||y,N=t.customPresets,h=void 0===N?null:N,w=t.className,D=void 0===w?"":w,k=a(e.useState(r),2),S=k[0],C=k[1],T=a(e.useState(u),2),z=T[0],P=T[1],M=a(e.useState("12:00"),2),A=M[0],R=M[1],F=a(e.useState(null),2),L=F[0],Y=F[1],I=a(e.useState(!1),2),j=I[0],B=I[1],U=a(e.useState(new Date),2),q=U[0],O=U[1],W=a(e.useState(!0),2),$=W[0],Q=W[1],V=a(e.useState(!1),2),J=V[0],G=V[1],H=a(e.useState("UTC"),2),_=H[0],Z=H[1],K=a(e.useState(p),2),X=K[0],ee=K[1],te=e.useRef(null);e.useEffect(function(){var e=function(e){te.current&&!te.current.contains(e.target)&&B(!1)};if(j)return document.addEventListener("mousedown",e),function(){document.removeEventListener("mousedown",e)}},[j]),e.useEffect(function(){g&&g({startDate:S,endDate:z,timezone:_,includeTime:J})},[S,z,_,J,g]),e.useEffect(function(){x&&x(A)},[A,x]);var ae=function(e){return e.toLocaleDateString("en-US",{year:"numeric",month:"short",day:"numeric"})},le=function(e,t){var a=new Date(e);return a.setDate(a.getDate()+t),a},ne=function(e){var t=new Date(e),a=t.getDay(),l=t.getDate()-a+6;return new Date(t.setDate(l))},re=function(e){return new Date(e.getFullYear(),e.getMonth(),1)},se=function(e){return new Date(e.getFullYear(),e.getMonth()+1,0)},me=e.useMemo(function(){if(h)return h;var t,a,l,n,r=new Date;return[{label:"Today",value:"today",startDate:r,endDate:r,icon:e.createElement(s,{size:16})},{label:"Yesterday",value:"yesterday",startDate:le(r,-1),endDate:le(r,-1),icon:e.createElement(s,{size:16})},{label:"Last 7 days",value:"last7days",startDate:le(r,-7),endDate:r,icon:e.createElement(s,{size:16})},{label:"Last 30 days",value:"last30days",startDate:le(r,-30),endDate:r,icon:e.createElement(s,{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:ne(r),icon:e.createElement(s,{size:16})},{label:"This month",value:"thismonth",startDate:re(r),endDate:se(r),icon:e.createElement(s,{size:16})},{label:"Next 7 days",value:"next7days",startDate:r,endDate:le(r,7),icon:e.createElement(s,{size:16})},{label:"Next 30 days",value:"next30days",startDate:r,endDate:le(r,30),icon:e.createElement(s,{size:16})}]},[h]),ce=e.useCallback(function(e){C(e.startDate),P(e.endDate),Y(e.value),B(!1)},[]),ie=e.useMemo(function(){var e=z-S;return Math.ceil(e/864e5)+1},[S,z]),oe=function(){for(var t,a=(t=q,new Date(t.getFullYear(),t.getMonth()+1,0).getDate()),l=function(e){return new Date(e.getFullYear(),e.getMonth(),1).getDay()}(q),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(q.getFullYear(),q.getMonth(),e);return t>=S&&t<=z}(t),l=function(e){var t=new Date(q.getFullYear(),q.getMonth(),e);return t.toDateString()===S.toDateString()||t.toDateString()===z.toDateString()}(t);n.push(e.createElement("button",{key:t,onClick:function(){return function(e){var t=new Date(q.getFullYear(),q.getMonth(),e);$?(C(t),t>z&&P(t),Q(!1)):(P(t),t<S&&C(t),Q(!0),B(!1)),Y(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:te,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 O(new Date(q.getFullYear(),q.getMonth()-1))},className:"p-2 hover:bg-gray-100 rounded-lg"},e.createElement(c,{size:16})),e.createElement("h3",{className:"text-lg font-semibold"},["January","February","March","April","May","June","July","August","September","October","November","December"][q.getMonth()]," ",q.getFullYear()),e.createElement("button",{onClick:function(){return O(new Date(q.getFullYear(),q.getMonth()+1))},className:"p-2 hover:bg-gray-100 rounded-lg"},e.createElement(i,{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"},$?"Select start date":"Select end date"),e.createElement("div",{className:"flex gap-2"},e.createElement("button",{onClick:function(){return Q(!0)},className:"px-3 py-1 rounded text-sm ".concat($?"bg-blue-600 text-white":"bg-gray-100 text-gray-700")},"Start"),e.createElement("button",{onClick:function(){return Q(!1)},className:"px-3 py-1 rounded text-sm ".concat($?"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(D)},e.createElement("div",{className:"flex items-center gap-3 mb-6"},e.createElement(s,{className:"text-blue-600",size:24}),e.createElement("h2",{className:"text-2xl font-semibold text-gray-900"},"Smart Date Range Picker")),X&&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 ee(!1)},className:"text-xs text-gray-500 hover:text-gray-700 underline"},"Hide presets")),e.createElement("div",{className:"flex flex-wrap gap-2"},me.map(function(t){return e.createElement("button",{key:t.value,onClick:function(){return ce(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(L===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"}),!X&&e.createElement("div",{className:"mb-4"},e.createElement("button",{onClick:function(){return ee(!0)},className:"text-sm text-blue-600 hover:text-blue-800 underline flex items-center gap-1"},e.createElement(s,{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(){B(!j),Q(!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"},ae(S))),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(){B(!j),Q(!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"},ae(z))),j&&e.createElement(oe,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(s,{className:"text-blue-600",size:20}),e.createElement("div",null,e.createElement("p",{className:"font-medium text-blue-900"},"Selected Range: ",ae(S)," - ",ae(z)),e.createElement("p",{className:"text-sm text-blue-700"},"Duration: ",ie," day",1!==ie?"s":"")))),b&&e.createElement("div",{className:"mb-6"},e.createElement("div",{className:"flex items-center gap-3 mb-4"},e.createElement(o,{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:A,onChange:function(e){return R(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: ",A))),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:J,onChange:function(e){return G(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:X,onChange:function(e){return ee(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")),f&&e.createElement("div",null,e.createElement("label",{className:"block text-sm font-medium text-gray-700 mb-1"},"Timezone"),e.createElement("select",{value:_,onChange:function(e){return Z(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"))))),L&&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(m,{size:16}),"Active Preset: ",null===(l=me.find(function(e){return e.value===L}))||void 0===l?void 0:l.label)))},g=function(){var t=a(e.useState(null),2),l=t[0],n=t[1],m=a(e.useState("12:00"),2),c=m[0],i=m[1],o=a(e.useState(!1),2),g=o[0],x=o[1],E=[{label:"Last Quarter",value:"lastquarter",startDate:new Date((new Date).setMonth((new Date).getMonth()-3)),endDate:new Date,icon:e.createElement(r,{size:16})},{label:"This Year",value:"thisyear",startDate:new Date((new Date).getFullYear(),0,1),endDate:new Date,icon:e.createElement(s,{size:16})},{label:"Next Quarter",value:"nextquarter",startDate:new Date,endDate:new Date((new Date).setMonth((new Date).getMonth()+3)),icon:e.createElement(r,{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(u,{onDateRangeChange:function(e){n(e),console.log("Date range changed:",e)},onTimeChange:function(e){i(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 x(!g)},className:"px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"},g?"Hide":"Show"," Second Picker")),g&&e.createElement(u,{initialStartDate:new Date((new Date).setMonth((new Date).getMonth()-1)),initialEndDate:new Date,customPresets:E,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(d,{className:"text-green-600",size:24}),e.createElement("h3",{className:"text-xl font-semibold text-gray-900"},"Live Data")),l&&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"},l.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"},l.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((l.endDate-l.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"},l.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"},l.includeTime?"Yes":"No")),l.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"},c))),!l&&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(r,{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(s,{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(d,{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")))};exports.DateRangePickerPro=u,exports.DateRangePickerProDemo=g;
//# sourceMappingURL=index.js.map