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

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

import{__rest as e,__assign as a}from"tslib";import t from"react";import{Box as i}from"@mui/material";import{LocalizationProvider as m}from"@mui/x-date-pickers/LocalizationProvider";import{AdapterDateFns as r}from"@mui/x-date-pickers/AdapterDateFns";import l from"date-fns/locale/ko";import{GuiDateTimePicker as n}from"./GuiDateTimePicker.js";import o from"./GuiDateTimeRangePicker.styled.js";var d={ko:l},s=o((function(l){var o=l.label,s=l.labelWidth,u=l.labelTextAlign,p=l.required,c=l.variant,h=l.width,x=l.size,y=l.disabled,f=l.readOnly,b=l.ampm,g=l.minDate,k=l.maxDate,v=l.inputFormat,D=l.mask,E=l.helperText,_=l.delimiter,T=l.today,w=l.valueStart,z=l.onChangeStart,C=l.valueEnd,F=l.onChangeEnd,N=l.sx,P=l.className,A=l.boxProps,S=e(l,["label","labelWidth","labelTextAlign","required","variant","width","size","disabled","readOnly","ampm","minDate","maxDate","inputFormat","mask","helperText","delimiter","today","valueStart","onChangeStart","valueEnd","onChangeEnd","sx","className","boxProps"]),j=t.useState(null),O=j[0],W=j[1];return t.createElement(i,a({className:["gui-form gui-date-picker",y&&"gui-form-disabled",f&&"gui-form-readonly",P&&P].join(" "),width:h},A,{sx:N}),o&&t.createElement(i,{minWidth:s},t.createElement("label",{className:["gui-label",u&&"textAlign-"+u,p&&"Mui-required"].join(" ")},o)),t.createElement(i,{flexGrow:1,className:"gui-date-range"},t.createElement(m,{dateAdapter:r,locale:d.ko},t.createElement(n,{value:w,onChange:function(e,a){z(e,a),F(null,null),W(e)},variant:c,width:"50%",size:x,ampm:b,minDate:g,maxDate:k,inputFormat:v,mask:D,helperText:E,today:T,disabled:y,readOnly:f}),"static"===c?null:t.createElement(i,{className:"delimiter"},_||"~"),t.createElement(n,{value:C,onChange:function(e,a){F(e,a)},variant:c,width:"50%",size:x,ampm:b,minDate:O||g,maxDate:k,minDateTime:O||S.minDateTime,inputFormat:v,mask:D,helperText:E,today:T,disabled:y,readOnly:f}))))}));s.defaultProps={variant:"desktop",labelWidth:"auto",width:"100%",size:"small",inputFormat:"yyyy-MM-dd HH:mm",ampm:!1,helperText:"yyyy-mm-dd hh:mm",mask:"____-__-__ __:__",today:!0};export{s as GuiDateTimeRangePicker,s as default};