reactstrap-date-picker
Version:
Reactstrap based, zero dependencies, date picker
14 lines (13 loc) • 17.5 kB
JavaScript
/**
* reactstrap-date-picker v2.0.0-beta.2
*
* https://reactstrap-date-picker.afialapis.com/
*
* Copyright (c) Donato Lorenzo <donato@afialapis.com>
*
* This source code is licensed under the MIT license found in the
* LICENSE.md file in the root directory of this source tree.
*
* @license MIT
*/
import e,{useState as t,useEffect as a,useCallback as n,useRef as r,forwardRef as l,useImperativeHandle as o}from"react";import{InputGroup as c,InputGroupText as u,Input as i,Button as s,Popover as d,PopoverHeader as m,PopoverBody as p}from"reactstrap";var v=t=>{var{children:a,customInputGroup:n,size:r,inputId:l}=t;return null!=n?e.cloneElement(n,{children:a}):e.createElement(c,{size:r,id:l,className:"rdp-input-group"},a)},h=t=>{var{oid:a,overlayContainerRef:n,children:r}=t;return e.createElement("div",{ref:n,id:a,className:"rdp-overlay"},r)},g=t=>{var{inputId:a,name:n,value:r,formattedValue:l,hiddenInputRef:o}=t;return e.createElement("input",{ref:o,type:"hidden",className:"rdp-hidden",id:a,name:n,value:r||"","data-formattedvalue":l})},y=t=>{var{inputValue:a,disabled:n,clearButtonElement:r,onClick:l}=t;return e.createElement("div",{className:"rdp-addon input-group-append"},e.createElement(u,{onClick:()=>n?null:l(),style:{opacity:a&&!n?1:.5,cursor:a&&!n?"pointer":"not-allowed"}},r))};function D(e,t,a){return(t=function(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var a=e[Symbol.toPrimitive];if(void 0!==a){var n=a.call(e,t);if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:t+""}(t))in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function f(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function w(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?f(Object(a),!0).forEach((function(t){D(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):f(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}var E=t=>{var{customControl:a,controlId:n,value:r,required:l,placeholder:o,inputRef:c,disabled:u,className:s,style:d,autoFocus:m,autoComplete:p,valid:v,invalid:h,onInvalid:g,noValidate:y,onKeyDown:D,onFocus:f,onBlur:E,onChange:k}=t,b="".concat(!0===h?"is-invalid":""," ").concat(!0===v?"is-valid":"");return null!=a?e.cloneElement(a,{id:n,value:r||"",required:l,placeholder:o,ref:c,disabled:u,className:"rdp-form-control ".concat(s||""," ").concat(a.props.className||""," ").concat(b),style:w(w({},a.props.style||{}),d||{}),autoComplete:p,onInvalid:g,noValidate:y,onKeyDown:D,onFocus:f,onBlur:E,onChange:k,valid:v,invalid:h}):e.createElement(i,{id:n,name:n,value:r||"",required:l,placeholder:o,innerRef:c,disabled:u,type:"text",className:"rdp-form-control ".concat(s||""," ").concat(b),style:d,autoFocus:m,autoComplete:p,onInvalid:g,noValidate:y,onKeyDown:D,onFocus:f,onBlur:E,onChange:k,valid:v,invalid:h})},k=e=>e?(e.setHours(12-e.getTimezoneOffset()/60),e.setMinutes(0),e.setSeconds(0),e.setMilliseconds(0),e):null,b=e=>e?k(new Date(e)):null,C=e=>e?k(e).toISOString():null,M=(e,t,a)=>{var n=e.getMonth()+1,r=e.getDate();return a.match(/MM.DD.YYYY/)?(n>9?n:"0".concat(n))+t+(r>9?r:"0".concat(r))+t+e.getFullYear():a.match(/DD.MM.YYYY/)?(r>9?r:"0".concat(r))+t+(n>9?n:"0".concat(n))+t+e.getFullYear():e.getFullYear()+t+(n>9?n:"0".concat(n))+t+(r>9?r:"0".concat(r))},Y=(e,t)=>null!=e&&""!=e?e:null!=t&&""!=t?t:(()=>{if("object"==typeof window){null==window._reactstrapDatePickerInstance&&(window._reactstrapDatePickerInstance=0);var e=window._reactstrapDatePickerInstance+1;return window._reactstrapDatePickerInstance=e,e}if("object"==typeof process){null==process._reactstrapDatePickerInstance&&(process._reactstrapDatePickerInstance=0);var t=process._reactstrapDatePickerInstance+1;return process._reactstrapDatePickerInstance=t,t}return console.error("Reactstrap Date Picker cannot determine environment (it is neither browser's <window> nor Node's <process>)."),1})().toString(),x=(e,t,a)=>{var n,r=Y(e,t),l="rdp-input-group-".concat(r),o=null!=e?e:"rdp-hidden-".concat(r),c="rdp-form-control-".concat(r);return null!=a&&null!=a&&null!==(n=a.props)&&void 0!==n&&n.id&&(c=a.props.id),[l,o,c,"rdp-overlay-".concat(r)]},N=(e,t)=>t>1?e.slice(t).concat(e.slice(0,t)):1===t?e.slice(1).concat(e.slice(0,1)):e,P=(e,t)=>{try{var a=new Date(e),n=new Date(t),r=a.getFullYear()==n.getFullYear();return a.getMonth()==n.getMonth()&&r}catch(l){return console.error(l),!0}},I=(e,t)=>{for(var a=e?new Date(e).getFullYear():1970,n=t?new Date(t).getFullYear():2045,r=[],l=a;l<=n;l++)r.push(l);return r},O=n=>{var{displayDate:r,minDate:l,maxDate:o,monthLabels:c,onChangeMonth:u,onChangeYear:s}=n,[d,m]=t(new Date(r).getMonth()),[p,v]=t(new Date(r).getFullYear()),[h,g]=t(I(l,o));a((()=>{m(new Date(r).getMonth()),v(new Date(r).getFullYear())}),[r]),a((()=>{g(I(l,o))}),[l,o]);return e.createElement("div",{className:"rdp-header-pick-month-default",style:{display:"flex",flexFlow:"row",flexWrap:"nowrap"}},e.createElement("div",{className:"rdp-header-pick-month-default-month",style:{flex:"2 1 auto"}},e.createElement(i,{type:"select",name:"rdp-header-pick-month-default-month",style:{lineHeight:"1.5",fontSize:"0.875rem",padding:"0.2rem"},value:d,onChange:e=>{var t=e.target.value;m(t),u(t)}},c.map(((t,a)=>e.createElement("option",{key:"month_".concat(a),value:a},t))))),e.createElement("div",{className:"rdp-header-pick-month-default-year",style:{flex:"1 1 67px"}},e.createElement(i,{type:"select",name:"rdp-header-pick-month-default-year",style:{lineHeight:"1.5",fontSize:"0.875rem",padding:"0.2rem"},value:p,onChange:e=>{var t=e.target.value;v(t),s(t)}},h.map((t=>e.createElement("option",{key:"year".concat(t),value:t},t))))))};function B(n){var{previousButtonElement:r,nextButtonElement:l,pickMonthElement:o,displayDate:c,minDate:u,maxDate:i,onChange:s,monthLabels:d}=n,[m,p]=t(!1),[v,h]=t(!1),[g,y]=t(""),D=o;a((()=>{if(null!=c){p(!!u&&P(c,u)),h(!!i&&P(c,i));try{d&&y("".concat(d[c.getMonth()]," ").concat(c.getFullYear()))}catch(e){console.error(e)}}}),[c,u,i,d]);var f=e=>{var t=new Date(c);t.setMonth(t.getMonth()+e,1),s(t)},w=e=>{var t=new Date(c);t.setMonth(e),s(t)},E=e=>{var t=new Date(c);t.setFullYear(e),s(t)};return e.createElement("div",{className:"rdp-header text-center",style:{display:"flex",flexFlow:"row",flexWrap:"nowrap"}},e.createElement("div",{className:"text-muted rdp-header-previous-wrapper",onClick:()=>f(-1),style:{cursor:"pointer",userSelect:"none",flexBasis:"1.25em",alignSelf:"center"}},m?null:r),e.createElement("div",{className:"rdp-header-pick-month-wrapper",style:{flex:"1 1 auto"}},null==D||"none"===D?e.createElement("div",null,g):"default"===D?e.createElement(O,{displayDate:c,monthLabels:d,minDate:u,maxDate:i,onChangeMonth:e=>w(e),onChangeYear:e=>E(e)}):e.createElement(D,{displayDate:c,minDate:u,maxDate:i,onChangeMonth:e=>w(e),onChangeYear:e=>E(e)})),e.createElement("div",{className:"text-muted rdp-header-next-wrapper",onClick:()=>f(1),style:{cursor:"pointer",userSelect:"none",flexBasis:"1.25em",alignSelf:"center"}},v?null:l))}var F=t=>{var{dayLabels:a,showWeeks:n,cellPadding:r}=t;return e.createElement("thead",null,e.createElement("tr",null,n?e.createElement("td",{className:"text-muted current-week",style:{padding:r}}):null,a.map(((t,a)=>e.createElement("td",{key:a,className:"text-muted",style:{padding:r}},e.createElement("small",null,t))))))},S=()=>e.createElement("td",null),_={normal:"",muted:"text-muted",selected:"bg-primary",current:"text-primary"},j=t=>{var{day:a,mode:n,onDayClick:r,cellPadding:l,roundedCorners:o}=t;return e.createElement("td",{"data-day":a,onClick:e=>{"muted"!=n&&r(e)},style:{cursor:"muted"==n?"default":"pointer",padding:l,borderRadius:o?"5px":"0px"},className:_[n]},a)},L=t=>{var{weekNum:a,cellPadding:n}=t;return e.createElement("td",{style:{padding:n,fontSize:"0.8em",color:"darkgrey"},className:"text-muted"},a)},R=t=>{var{calendarDays:a,showWeeks:n,onDayClick:r,cellPadding:l,roundedCorners:o}=t;return a?e.createElement("tbody",null,a.map(((t,a)=>e.createElement("tr",{key:"rdp_calendar_week_".concat(a)},n?e.createElement(L,{key:"rdp_calendar_week_".concat(a,"_weeknum"),weekNum:t.weekNum,cellPadding:l}):null,t.weekDays.map(((t,n)=>t.inMonth?e.createElement(j,{key:"rdp_calendar_week_".concat(a,"_day_").concat(n),day:t.day,mode:t.mode,onDayClick:r,cellPadding:l,roundedCorners:o}):e.createElement(S,{key:"rdp_calendar_week_".concat(a,"_day_").concat(n)}))))))):e.createElement("tbody",null)},T=t=>{var{dayLabels:a,showWeeks:n,handleTodayClick:r,showTodayButton:l,todayButtonLabel:o}=t;return l?e.createElement("tfoot",null,e.createElement("tr",null,e.createElement("td",{colSpan:a.length+(n?1:0),style:{paddingTop:"9px"}},e.createElement(s,{block:!0,size:"sm",className:"u-today-button",onClick:()=>r()},o)))):null},V=[31,28,31,30,31,30,31,31,30,31,30,31];function W(e,n,r,l,o){var[c,u]=t(void 0),[i,s]=t(void 0),[d,m]=t(void 0),[p,v]=t([]);return a((()=>{e&&(u(e.getFullYear()),s(e.getMonth()))}),[e]),a((()=>{m(function(e,t,a){if(null!=e&&null!=t){var n=new Date(e,t,1),r=a>1?n.getDay()-a+7:1===a?0===n.getDay()?6:n.getDay()-1:n.getDay(),l=V[t];1==t&&(e%4==0&&e%100!=0||e%400==0)&&(l=29);for(var o=(e,t,a)=>e<=l&&(t>0||a>=r),c=a=>{var n=new Date(e,t,a-1,12,0,0,0),r=new Date(n.valueOf()),l=(n.getDay()+6)%7;r.setDate(r.getDate()-l+3);var o=r.valueOf();return r.setMonth(0,1),4!==r.getDay()&&r.setMonth(0,1+(4-r.getDay()+7)%7),1+Math.ceil((o-r)/6048e5)},u=[],i=1,s=0;s<9;s++){for(var d=[],m=0;m<=6;m++)o(i,s,m)?(d.push({inMonth:!0,day:i}),i+=1):d.push({inMonth:!1});var p=c(i);if(u.push({weekDays:d,weekNum:p}),i>l)break}return{year:e,month:t,weeks:u}}}(c,i,o))}),[c,i,o]),a((()=>{v(function(e,t,a,n){if(null==e)return[];var r=[];return e.weeks.map((l=>{var o=l.weekNum,c=l.weekDays.map((r=>{return w(w({},r),{},{mode:r.inMonth?(l=r.day,o=k(new Date(e.year,e.month,l,12,0,0,0)).toISOString(),c=null!=a&&Date.parse(o)<Date.parse(k(new Date(a))),u=null!=n&&Date.parse(o)>Date.parse(k(new Date(n))),i=k(new Date),s=k(new Date(t)),c||u?"muted":Date.parse(o)===Date.parse(s)?"selected":Date.parse(o)===Date.parse(i)?"current":"normal"):void 0});var l,o,c,u,i,s}));r.push({weekNum:o,weekDays:c})})),r}(d,n,r,l))}),[d,n,r,l]),p}var z=t=>{var{popoverRef:a,selectedDate:n,displayDate:r,minDate:l,maxDate:o,onChange:c,dayLabels:u,cellPadding:i,weekStartsOn:s,showTodayButton:v,todayButtonLabel:h,roundedCorners:g,showWeeks:y,monthLabels:D,previousButtonElement:f,nextButtonElement:w,pickMonthElement:E,placement:b,open:C,container:M,target:Y,onChangeMonth:x}=t,N=W(r,n,l,o,s);return e.createElement(e.Fragment,null,e.createElement(d,{innerRef:a,className:"rdp-popover ".concat(b),isOpen:C,container:M,target:Y,placement:b},e.createElement(m,{tag:"div"},e.createElement(B,{previousButtonElement:f,nextButtonElement:w,pickMonthElement:E,displayDate:r,minDate:l,maxDate:o,onChange:e=>x(e),monthLabels:D})),e.createElement(p,null,e.createElement("table",{className:"rdp-calendar text-center"},e.createElement(F,{dayLabels:u,showWeeks:y,cellPadding:i}),e.createElement(R,{calendarDays:N,showWeeks:y,onDayClick:e=>{var t=e.currentTarget.getAttribute("data-day"),a=k(new Date(r));a.setDate(t),c(a)},cellPadding:i,roundedCorners:g}),e.createElement(T,{dayLabels:u,showWeeks:y,handleTodayClick:()=>{var e=k(new Date);c(e)},showTodayButton:v,todayButtonLabel:h})))))},A=e=>{var t=Object.prototype.toString.call(e);return"[object AsyncFunction]"===t||"[object Function]"===t||"[object GeneratorFunction]"===t||"[object Proxy]"===t?e():e},q=(e,l,o,c,u)=>{var[i,s]=t(!1),[d,m]=t(A(e)),p=r(),v=r(),h=r(),g="object"==typeof l?l:r(l),[y,D]=((e,t,a)=>[n((()=>{if(t){var a=document.createEvent("CustomEvent");a.initEvent("Change Date",!0,!1),e.current.dispatchEvent(a),t(a)}}),[e,t]),n((()=>{if(a){var t=document.createEvent("CustomEvent");t.initEvent("Change Date",!0,!1),e.current.dispatchEvent(t),a(t)}}),[e,a])])(g,c,u),f=n((e=>{var t=null==(null==h?void 0:h.current)||!(null!=h&&h.current.contains(e.target)),a=null==(null==g?void 0:g.current)||!g.current.contains(e.target);return t&&a}),[h,g]);a((()=>{function e(e){e.stopPropagation(),i&&f(e)&&(s(!1),y())}return document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[i,f,y]);var w=n((()=>{var t=A(e);m(t),s(!0),D()}),[e,D]),E=n((e=>{f(e)&&(s(!1),y())}),[f,y]);return[p,v,h,g,i,d,w,E]},G=()=>{var e="undefined"!=typeof window&&window.navigator?(window.navigator.userLanguage||window.navigator.language||"").toLowerCase():"";return e&&"en-us"!==e?"DD/MM/YYYY":"MM/DD/YYYY"},H=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],J=["January","February","March","April","May","June","July","August","September","October","November","December"],K=l(((n,r)=>{var{value:l,defaultValue:c,id:u,name:i,dateFormat:s=G(),minDate:d,maxDate:m,clearButtonElement:p="×",showClearButton:D=!0,onInvalid:f,onChange:w,onClear:k,onBlur:Y,onFocus:P,size:I,valid:O,invalid:B,customInputGroup:F,autoComplete:S="on",autoFocus:_=!1,disabled:j=!1,noValidate:L=!1,placeholder:R,required:T,className:V,style:W,inputRef:A,customControl:K,children:Z,calendarContainer:Q,dayLabels:U=H,monthLabels:X=J,weekStartsOn:$,showWeeks:ee=!1,previousButtonElement:te="<",nextButtonElement:ae=">",pickMonthElement:ne,showTodayButton:re=!1,todayButtonLabel:le="Today",roundedCorners:oe=!1,cellPadding:ce="5px",calendarPlacement:ue="bottom"}=n,ie=((e,t)=>{if(e&&t)return"Conflicting DatePicker properties 'value' and 'defaultValue'"})(l,c);if(null!=ie)throw new Error(ie);var[se,de,me,pe,ve,he,ge,ye]=q(ue,A,0,Y,P),[De,fe,we,Ee,ke,be,Ce,Me,Ye]=((e,n,r,l,o,c,u,i)=>{var[s,d]=t(c.match(/[^A-Z]/)[0]),[m,p]=t(null),[v,h]=t(null),[g,y]=t(null),[D,f]=t(null);a((()=>{d(c.match(/[^A-Z]/)[0])}),[c]),a((()=>{var e,t=n||r,a=b(a),l=b(l),o=b(t),u=C(o),i=t?M(o,s,c):null;if(o)e=o;else{var d=b((new Date).toISOString());e=a&&Date.parse(a)>=Date.parse(d)?a:l&&Date.parse(l)<=Date.parse(d)?l:d}p(u),h(i),f(o),y(e)}),[n,r,l,o,s,c]);var w=()=>{u?u():(p(null),h(null),f(null),y(null),i&&i(null,null))},E=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=e.replace(new RegExp("[^0-9".concat(s,"]")),"").split(s);c.match(/MM.DD.YYYY/)||c.match(/DD.MM.YYYY/)?(a[0]&&a[0].length>2&&(a[1]=a[0].slice(2)+(a[1]||""),a[0]=a[0].slice(0,2)),a[1]&&a[1].length>2&&(a[2]=a[1].slice(2)+(a[2]||""),a[1]=a[1].slice(0,2)),a[2]&&(a[2]=a[2].slice(0,4),t&&a[2].length<4&&(a[2]=a[2].padEnd(4,"0")))):(a[0]&&a[0].length>4&&(a[1]=a[0].slice(4)+(a[1]||""),a[0]=a[0].slice(0,4)),a[1]&&a[1].length>2&&(a[2]=a[1].slice(2)+(a[2]||""),a[1]=a[1].slice(0,2)),a[2]&&(a[2]=a[2].slice(0,2)));var n=a.join(s);h(n)};return[m,v,g,D,w,()=>{var t,a=(null==e||null===(t=e.current)||void 0===t?void 0:t.value)||"",n=a.replace(/(-|\/\/)/g,s).slice(0,10);if(n){var r,u,d;if(c.match(/MM.DD.YYYY/)){if(!n.match(/[0-1][0-9].[0-3][0-9].[1-2][0-9][0-9][0-9]/))return E(a);r=n.slice(0,2).replace(/[^0-9]/g,""),u=n.slice(3,5).replace(/[^0-9]/g,""),d=n.slice(6,10).replace(/[^0-9]/g,"")}else if(c.match(/DD.MM.YYYY/)){if(!n.match(/[0-3][0-9].[0-1][0-9].[1-2][0-9][0-9][0-9]/))return E(a);u=n.slice(0,2).replace(/[^0-9]/g,""),r=n.slice(3,5).replace(/[^0-9]/g,""),d=n.slice(6,10).replace(/[^0-9]/g,"")}else{if(!n.match(/[1-2][0-9][0-9][0-9].[0-1][0-9].[0-3][0-9]/))return E(a);d=n.slice(0,4).replace(/[^0-9]/g,""),r=n.slice(5,7).replace(/[^0-9]/g,""),u=n.slice(8,10).replace(/[^0-9]/g,"")}var m=parseInt(r,10),v=parseInt(u,10),g=parseInt(d,10);if(m>12||v>31)return E(a);var D=l&&Date.parse(a)<Date.parse(l),k=o&&Date.parse(a)>Date.parse(o);if(D||k)return E(a);if(!isNaN(m)&&!isNaN(v)&&!isNaN(g)&&m<=12&&v<=31&&g>999){var M=b(new Date(g,m-1,v,12,0,0,0).toISOString()),Y=C(M);f(M),y(M),p(Y),i&&i(Y,n)}h(n)}else w()},e=>{y(e)},e=>{var t=C(e),a=M(e,s,c);h(a),f(e),y(e),p(t),i&&i(t,a)},()=>{var t,a=(null==e||null===(t=e.current)||void 0===t?void 0:t.value)||"";a&&E(a,!0)}]})(pe,l,c,d,m,s,k,w),[xe,Ne,Pe,Ie]=((e,n,r)=>{var[l,o]=t(x(e,n,r));return a((()=>{o(x(e,n,r))}),[e,n,r]),l})(u,i,K);o(r,(()=>({getValue:()=>Ee?Ee.toISOString():null,getFormattedValue:()=>we?fe:null,getNode:()=>null==pe?void 0:pe.current})));var Oe=((e,n)=>{var[r,l]=t(N(e,n));return a((()=>{l(N(e,n))}),[e,n]),r})(U,$);return e.createElement(v,{customInputGroup:F,size:I,inputId:xe},e.createElement(E,{controlId:Pe,customControl:K,value:fe||"",required:T,placeholder:R||"",inputRef:pe,disabled:j,className:V,style:W,autoFocus:_,autoComplete:S,onInvalid:f,noValidate:L,valid:O,invalid:B,onFocus:()=>ge(),onBlur:e=>{Ye(),ye(e)},onChange:()=>be()}),e.createElement(h,{overlayContainerRef:de,oid:Ie},null==de.current?null:e.createElement(z,{popoverRef:me,placement:he,open:ve,container:Q||de,target:Pe,previousButtonElement:te,nextButtonElement:ae,pickMonthElement:ne,displayDate:we,minDate:d,maxDate:m,onChangeMonth:e=>Ce(e),monthLabels:X,cellPadding:ce,selectedDate:Ee,onChange:e=>(Me(e),void ye(!0)),dayLabels:Oe,weekStartsOn:$,showTodayButton:re,todayButtonLabel:le,roundedCorners:oe,showWeeks:ee})),e.createElement(g,{inputId:Ne,name:i,value:De||"",formattedValue:De?fe:"",hiddenInputRef:se}),D&&!K?e.createElement(y,{inputValue:fe,disabled:j,clearButtonElement:p,onClick:()=>ke()}):null,Z)}));export{K as DatePicker};