@rehookify/datepicker
Version:
The ultimate tool to create a date, range and time picker in your React applications.
3 lines (2 loc) • 10.3 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).RehookifyDatepicker={},e.React)}(this,(function(e,t){"use strict";const a=(e,t,...a)=>e&&null!=t?new Date(e,t,...a):new Date,s=e=>({D:e.getDate(),M:e.getMonth(),Y:e.getFullYear()}),n=e=>a(s(e).Y,s(e).M,s(e).D),o=e=>a(s(e).Y,s(e).M+1,0).getDate(),r=(e,t,n)=>{const{Y:r,M:c,D:d}=s(e),l="date"===n?d+t:"month"===n&&d>o(a(r,c+t,1))?o(a(r,c+t,1)):d;return a(r+("year"===n?t:0),c+("month"===n?t:0),l)},c=(e,t,a)=>r(e,0-t,a),d=(e,t)=>+e-+t,l=(e,t,a)=>e.toLocaleDateString(t,a),i=(e,{locale:t,monthName:a})=>l(e,t,{month:a}),u=(e,t,s,n)=>n&&null!=n.h&&null!=n.m?a(e,t,s,n.h,n.m):void 0,f=(e,{locale:t,hour:a,minute:s,second:n,hour12:o})=>e.toLocaleTimeString(t,{hour:a,minute:s,second:n,hour12:o}),m=e=>`${e<10?0:""}${e}`,D=(e,{hour12:t})=>{const a=e.getHours(),s=e.getMinutes();return t?((e,t)=>{const a=e>=12?"pm":"am";return`${m(e%12||12)}:${m(t)} ${a}`})(a,s):`${m(a)}:${m(s)}`},g=(e,t)=>e.concat(t).sort(d),h=(e,t,a)=>{let[s,n]=[e,t];return e&&t&&([s,n]=[e,t].sort(a)),[s,n]},y=(e,{day:t,date:a}={})=>((e,t)=>!!t&&t.includes(e))(e.getDay(),t)||((e,t=[])=>{const{M:a,D:n}=s(e);return t.some((e=>{const{M:t,D:o}=s(e);return a===t&&n===o}))})(e,a);function C(e,t){return((e=>e.getDay())(e)+7-t)%7}const b=(e,t)=>+e==+t,p=(e,t)=>e<t,x=(e,t)=>e>t,k=(e,t,a)=>x(t,e)&&p(t,a)||p(t,e)&&x(t,a),Y=(e,t)=>!!e&&x(t,e),M=(e,t)=>!!e&&p(t,e),v=(e,t)=>e.some((e=>b(n(e),n(t)))),P=(e,t)=>!!t&&e<s(t).M,T=(e,t)=>!!t&&e<s(t).Y,E=(e,t)=>!!t&&e>s(t).M,$=(e,t)=>!!t&&e>s(t).Y,w=(e,t)=>!!t&&e>=s(t).Y,O=(e,t)=>!!t&&e<=s(t).Y;var G={mode:"static",offsets:[0],startDay:0},S={mode:"decade",numberOfYears:12,step:10},A={mode:"single",toggle:!1,selectSameDate:!1},B={interval:30,useLocales:!1},_={locale:"en-GB",day:"2-digit",year:"numeric",weekday:"short",monthName:"long",hour:"2-digit",minute:"2-digit",hour12:void 0,second:void 0};function I(e){return"range"===e}const R="range-start",F="range-end",L="will-be-range-start",N="will-be-range-end",j=(e,t,a,s)=>{if(!I(s)||0===a.length)return"";const[o,r]=a;return o&&r?b(e,n(o))?b(n(o),n(r))?`${R} ${F}`:R:b(e,n(r))?F:k(n(o),e,n(r))?"in-range":"":!r&&t?k(n(o),e,t)?"will-be-in-range":p(t,n(o))?b(e,t)?L:b(e,n(o))?N:"":b(e,n(o))?L:b(e,t)?N:"":""},q=(e,t,r,{rangeEnd:c},d)=>{const{dates:{mode:u,minDate:f,maxDate:m},locale:D,calendar:g,exclude:h}=d,{locale:p,day:x,year:k}=D,{M:P,Y:T}=s(t),{start:E,length:$}=function(e,t,{mode:s,startDay:n}){const r=a(t,e,1),c=o(r),d=C(r,n);return{start:d,length:"static"===s?42:d+c+6-C(a(t,e,c),n)}}(P,T,g),w=Array($).fill(0).map(((t,o)=>{const d=a(T,P,o+1-E);return{$date:d,active:b(e,d),day:l(d,p,{day:x}),now:b(n(a()),d),range:j(d,c,r,u),disabled:M(f,d)||Y(m,d)||y(d,h),selected:v(r,d),inCurrentMonth:s(d).M===P}}));return{year:l(t,p,{year:k}),month:i(t,D),days:w}};var H=({days:e},{locale:{locale:t,weekday:a}})=>[0,1,2,3,4,5,6].map((s=>l(e[s].$date,t,{weekday:a})));const U=e=>{const a=(({selectedDates:e,state:t,config:a,offsetDate:s})=>a.calendar.offsets.map((n=>q(s,r(s,n,"month"),e,t,a))))(e);return t.useMemo((()=>({calendars:a,weekDays:H(a[0],e.config)})),[a,e.config])},z=(...e)=>(...t)=>e.forEach((e=>null==e?void 0:e(...t))),J=e=>(t,a)=>e(a),K=e=>(...t)=>{e()},Q=(e,t,a={},s=!1)=>({role:"button",tabIndex:0,...e?{disabled:!0,"aria-disabled":!0}:{onClick(e){t(e)}},...s?{"aria-selected":!0}:{},...a});var V="SET_FOCUS_DATE",W="SET_OFFSET_DATE",X="SET_RANGE_END",Z="SET_YEAR",ee=(e,t)=>{switch(t.type){case V:return{...e,focusDate:t.date};case W:return{...e,offsetDate:t.date};case X:return{...e,rangeEnd:t.date};case Z:return{...e,offsetYear:t.year};default:return e}},te=(e,t)=>{e({type:V,date:t})},ae=(e,t)=>{e({type:X,date:t})},se=(e,t)=>{e({type:Z,year:t})};const ne=({dispatch:e,config:{onOffsetChange:t,offsetDate:a}})=>s=>{t||a||((e,t)=>{e({type:W,date:t})})(e,s),t&&t(s)},oe=(e,{days:t,months:a,years:s})=>{let n=e;return t&&0!==t&&(n=r(n,t,"date")),a&&0!==a&&(n=r(n,a,"month")),s&&0!==s&&(n=r(n,s,"year")),n},re=(e,{days:t=0,months:a=0,years:s=0},n)=>n?b(e,n)?e:0!==t?ce(e,n,t,"date"):0!==a?ce(e,n,a,"month"):0!==s?ce(e,n,s,"year"):e:e,ce=(e,t,a,s)=>{const n=r(e,a,s);if(a>0){return Y(t,n)?c(t,a,s):e}return M(t,n)?c(t,a,s):e},de=e=>{const{config:{dates:a}}=e,{minDate:s,maxDate:n}=a,o=t.useCallback(((t,{disabled:a,onClick:s,...o}={})=>{const r=re(e.offsetDate,t,n),c=oe(r,t),d=!!a||Y(n,c);return Q(d,(t=>z(s,J(ne(e)))(t,c)),o)}),[n,e]),r=t.useCallback((({days:t=0,months:a=0,years:n=0},{disabled:o,onClick:r,...c}={})=>{const d={days:-t,months:-a,years:-n},l=re(e.offsetDate,d,s),i=oe(l,d),u=!!o||M(s,i);return Q(u,(t=>z(r,J(ne(e)))(t,i)),c)}),[s,e]);return{addOffset:o,setOffset:t.useCallback(((t,{disabled:a,onClick:o,...r}={})=>{const c=!!a||M(s,t)||Y(n,t);return Q(c,(a=>z(o,J(ne(e)))(a,t)),r)}),[e,n,s]),subtractOffset:r}},le=e=>"exact"===e,ie=(e,{mode:t,numberOfYears:a})=>le(t)?((e,t)=>e-t+1)(e,a):"decade"===t?(e=>e-e%10-1)(e):((e,t)=>e-(t/2-(t%2==0?1:0)))(e,a),ue=e=>{const{selectedDates:t,offsetDate:o,focusDate:r,dates:{minDate:c,maxDate:d},years:l}=e,i=o||(t.length>0?t[t.length-1]:((e,t,a)=>Y(t,a)?t:M(e,a)?e:a)(c,d,n(a())));return{focusDate:r,rangeEnd:null,offsetDate:i,offsetYear:ie(s(i).Y,l)}},fe=e=>{const a=function({selectedDates:e=[],onDatesChange:t,focusDate:a,offsetDate:s,onOffsetChange:o,calendar:r={},dates:c={},locale:l,time:i={},exclude:u={},years:f}){const{minDate:m,maxDate:D,...g}=c,{offsets:y=[],...C}=r,{minTime:b,maxTime:p,...x}=i,[k,Y]=h(m,D,d),[M,P]=h(b,p,((e,t)=>e.h-t.h));return{selectedDates:e,onDatesChange:t,offsetDate:s,onOffsetChange:o,focusDate:a&&v(e,a)?a:void 0,calendar:{...G,...C,offsets:G.offsets.concat(y)},years:{...S,...f},dates:{...A,...g,minDate:k&&n(k),maxDate:Y&&n(Y)},locale:{..._,...l},time:{...B,minTime:M,maxTime:P,...x},exclude:u}}(e),[s,o]=t.useReducer(ee,ue(a));return{dispatch:o,selectedDates:a.selectedDates,offsetDate:a.offsetDate||s.offsetDate,state:s,config:a}},me=({selectedDates:e,config:{locale:a}})=>t.useMemo((()=>({selectedDates:e,formattedDates:e.map((e=>((e,{locale:t,options:a})=>l(e,t,a))(e,a)))})),[e,a]),De=({config:e,selectedDates:a,dispatch:s})=>{const{onDatesChange:o,dates:{mode:r,toggle:c,selectSameDate:d}}=e;return{dayButton:t.useCallback((({$date:t,selected:l,disabled:i,active:u},{onClick:f,disabled:m,...D}={})=>Q(i||!!m,(i=>{(!l||c||(a.forEach((e=>{b(n(e),t)&&te(s,e)})),I(r)&&d))&&(I(r)&&1===a.length&&ae(s,null),z(f,J((t=>{const r=((e,t,{mode:a,toggle:s,limit:o})=>s&&v(e,t)?e.filter((e=>!b(n(e),t))):"multiple"===a?!o||e.length<o?g(e,t):e:I(a)?2===e.length?[t]:g(e,t):[t])(a,t,e.dates);te(s,v(r,t)?t:void 0),o(r)})))(i,t))}),{...D,...I(r)&&1===a.length&&{onMouseEnter(){ae(s,t)}},tabIndex:u?0:-1},l)),[r,c,e.dates,o,a,s,d])}};var ge=(e,t,n,{minDate:r,maxDate:c})=>{const{M:d,Y:l,D:u}=s(e),{Y:f,M:m}=s(a());return Array(12).fill(0).map(((e,D)=>{const g=o(a(l,D,1)),h=a(l,D,u>g?g:u);return{$date:h,month:i(h,n),selected:t.some((e=>{const{M:t,Y:a}=s(e);return a===l&&t===D})),active:d===D,now:D===m&&l===f,disabled:P(D,r)&&O(l,r)||E(D,c)&&w(l,c)}}))};const he=({selectedDates:e,offsetDate:a,config:{locale:s,dates:n}})=>t.useMemo((()=>({months:ge(a,e,s,n)})),[n,s,a,e]),ye=e=>({monthButton:t.useCallback((({$date:t,disabled:a,selected:s,active:n},{onClick:o,disabled:r,...c}={})=>Q(!!r||a,(a=>z(o,J(ne(e)))(a,t)),{...c,tabIndex:n?0:-1},s)),[e])});var Ce=(e,{time:t,locale:n})=>{const o=a(),{interval:r,minTime:c,maxTime:d,useLocales:l}=t,{Y:i,M:m,D:g}=s(e||o),h=1440/r,y=u(i,m,g,c),C=u(i,m,g,d);return Array(h).fill(0).map(((t,s)=>{const c=a(i,m,g,0,s*r);return{$date:c,disabled:!e||M(y,c)||Y(C,c),now:b(c,o),selected:!!e&&b(e,c),time:l?f(c,n):D(c,n)}}))};const be=({state:{focusDate:e},config:a})=>t.useMemo((()=>({time:Ce(e,a)})),[e,a]),pe=({selectedDates:e,state:{focusDate:a},config:{onDatesChange:s},dispatch:n})=>({timeButton:t.useCallback((({$date:t,selected:o,disabled:r,now:c},{onClick:d,disabled:l,...i}={})=>Q(r||!!l,(r=>{o||z(d,J((t=>{const o=e.map((e=>b(a,e)?t:e));te(n,t),s(o)})))(r,t)}),{...i,tabIndex:o||c?0:-1},o)),[e,s,n,a])}),xe=(e,t,n,{numberOfYears:o},{minDate:r,maxDate:c})=>{const{Y:d,M:l,D:i}=s(t),{Y:u}=s(a());return Array(o).fill(0).map(((t,o)=>{const f=e+o;return{$date:a(f,l,i),active:d===f,disabled:T(f,r)||$(f,c),now:f===u,selected:n.some((e=>s(e).Y===f)),year:f}}))},ke=({selectedDates:e,offsetDate:a,state:{offsetYear:s},config:{years:n,dates:o}})=>t.useMemo((()=>({years:xe(s,a,e,n,o)})),[a,s,e,n,o]),Ye=e=>{const{offsetDate:n,state:{offsetYear:o},config:{dates:r,years:c},dispatch:d}=e,{minDate:l,maxDate:i}=r,{step:u,numberOfYears:f,mode:m}=c,{D:D,M:g}=s(n);return{yearButton:t.useCallback((({$date:t,disabled:a,selected:s,active:n},{onClick:o,disabled:r,...c}={})=>Q(!!r||a,(a=>z(o,J(ne(e)))(a,t)),{...c,tabIndex:n?0:-1},s)),[e]),nextYearsButton:t.useCallback((({onClick:e,disabled:t,...s}={})=>{const n=a(o+f-1,g,D),r=!!t||Y(i,n)||le(m)&&!!i&&b(i,n);return Q(r,(t=>z(e,K((()=>se(d,o+u))))(t)),s)}),[i,d,o,u,D,g,f,m]),previousYearsButton:t.useCallback((({onClick:e,disabled:t,...s}={})=>{const n=!!t||M(l,a(o,g,D));return Q(n,(t=>z(e,K((()=>se(d,o-u))))(t)),s)}),[l,d,o,u,g,D])}},Me=e=>{const t=fe(e);return{data:{...U(t),...me(t),...he(t),...be(t),...ke(t)},propGetters:{...De(t),...ye(t),...pe(t),...Ye(t),...de(t)}}};var ve=t.createContext({}),Pe=t.createContext({}),Te=()=>t.useContext(Pe);e.DatePickerProvider=({children:e,config:a})=>t.createElement(ve.Provider,{value:Me(a)},e),e.DatePickerStateProvider=({children:e,config:a})=>t.createElement(Pe.Provider,{value:fe(a)},e),e.useCalendars=U,e.useContextCalendars=()=>U(Te()),e.useContextDatePickerOffsetPropGetters=()=>de(Te()),e.useContextDays=()=>me(Te()),e.useContextDaysPropGetters=()=>De(Te()),e.useContextMonths=()=>he(Te()),e.useContextMonthsPropGetters=()=>ye(Te()),e.useContextTime=()=>be(Te()),e.useContextTimePropGetters=()=>pe(Te()),e.useContextYears=()=>ke(Te()),e.useContextYearsPropGetters=()=>Ye(Te()),e.useDatePicker=Me,e.useDatePickerContext=()=>t.useContext(ve),e.useDatePickerOffsetPropGetters=de,e.useDatePickerState=fe,e.useDatePickerStateContext=Te,e.useDays=me,e.useDaysPropGetters=De,e.useMonths=he,e.useMonthsPropGetters=ye,e.useTime=be,e.useTimePropGetter=pe,e.useYears=ke,e.useYearsPropGetters=Ye}));
//# sourceMappingURL=index.umd.js.map