@gsretail.com/gui-core/build/esm/core/Date/GuiDateRangePicker.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__rest as e,__assign as t}from"tslib";import a,{useState as n,useEffect as l}from"react";import{Box as i,Popover as r}from"@mui/material";import{ko as o}from"date-fns/locale";import{DateRange as s,DefinedRange as m}from"react-date-range";import{GuiInput as d}from"../Input/GuiInput.js";import{GuiIcon as c}from"@gsretail.com/gui-icons";import{GuiIconButton as u}from"../Button/GuiIconButton.js";import y from"./GuiDateRangePicker.styled.js";var g=y((function(y){var g=y.label,h=y.labelWidth,p=y.labelTextAlign,D=y.required,f=y.width,E=y.size,b=y.disabled,w=y.readOnly,x=y.delimiter,v=y.showDateDisplay,M=y.retainEndDateOnFirstSelection,C=y.today,F=y.range,O=y.onChange,k=y.sx,z=y.className,N=y.boxProps,P=y.reset,j=y.onReset,I=e(y,["label","labelWidth","labelTextAlign","required","width","size","disabled","readOnly","delimiter","showDateDisplay","retainEndDateOnFirstSelection","today","range","onChange","sx","className","boxProps","reset","onReset"]),R=F.startDate?F.startDate:"",S=F.endDate?F.endDate:"",A=function(e){var t=new Date(e),a=t.getFullYear(),n=""+(t.getMonth()+1),l=""+t.getDate();return n.length<2&&(n="0"+n),l.length<2&&(l="0"+l),"NaN"===n?"yyyy-mm-dd":[a,n,l].join("-")},G=n(null),W=G[0],q=G[1],B=n(0),T=B[0],Y=B[1],H=Boolean(W),J=function(e){q(e.currentTarget)},K=function(){q(null)};return l((function(){T>=2&&(K(),Y(0))}),[T]),a.createElement(i,t({className:["gui-form gui-date-picker",b&&"gui-form-disabled",w&&"gui-form-readonly",z&&z].join(" "),width:f},N,{sx:k}),g&&a.createElement(i,{minWidth:h},a.createElement("label",{className:["gui-label",p&&"textAlign-"+p,D&&"Mui-required"].join(" ")},g)),a.createElement(i,{flexGrow:1,className:"gui-date-range"},a.createElement(d,{name:"startDate",value:A(R),onClick:J,width:"50%",size:E,readOnly:w,disabled:b}),a.createElement(i,{className:"delimiter"},x||"~"),a.createElement(d,{name:"endDate",value:A(S),onClick:J,width:"calc(50% + 28px)",size:E,endIcon:a.createElement(a.Fragment,null,P?a.createElement(u,{variant:"clear",size:"tiny",onClick:function(e){e.stopPropagation(),j()}},a.createElement(c,{name:"Close"})):null,a.createElement(u,{variant:"clear",size:"tiny",sx:P&&{marginRight:"18px !important"}},a.createElement(c,{name:"Calendar"}))),readOnly:w,disabled:b}),w||b?null:a.createElement(r,{open:H,anchorEl:W,onClose:K,anchorOrigin:{vertical:"bottom",horizontal:"left"},elevation:6},a.createElement(i,{position:"relative"},a.createElement(s,t({ranges:[t({key:"selection"},F)],onChange:function(e){O(e),Y(T+1)},editableDateInputs:!0,showMonthAndYearPickers:!0,showDateDisplay:v,moveRangeOnFirstSelection:!1,retainEndDateOnFirstSelection:M,direction:"horizontal",locale:o,monthDisplayFormat:"yyyy년 MM월",weekdayDisplayFormat:"eeeee",dateDisplayFormat:"yyyy-MM-dd",startDatePlaceholder:"yyyy-MM-dd",endDatePlaceholder:"yyyy-MM-dd"},I)),C&&a.createElement(m,{onChange:function(e){O(e)},ranges:[t({key:"selection"},F)]})))))}));g.defaultProps={labelWidth:"auto",width:"100%",size:"small",months:2,showDateDisplay:!1,retainEndDateOnFirstSelection:!1,today:!0,reset:!1};export{g as GuiDateRangePicker,g as default};