Merge pull request #11 from BeeInventor/develop

feat: custom date format

Author: steven11329

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

package.json

@@ -1,9 +1,11 @@
 import React, { useState } from 'react';
-import { Meta, Story } from '@storybook/react';
-import DatePicker from '.';
-import { DatePickerProps } from './DatePicker.types';
 import localZhTw from 'date-fns/locale/zh-TW';
+import { styled } from '@mui/material/styles';
+import { Meta, Story } from '@storybook/react';
 import { Dialog, DialogContent } from '@mui/material';
+
+import DatePicker from './DatePicker';
+import { DatePickerProps } from './DatePicker.types';
 import Button from '../Button';
 
 export default {
@@ -142,3 +144,16 @@ export const ExternalReset: Story<DatePickerProps> = (args) => {
 ExternalReset.args = {
   ...Default.args,
 };
+
+const StyledDatePicker = styled(DatePicker)(() => ({
+  width: '100%',
+}));
+
+export const FullWidth: Story<DatePickerProps> = (args) => {
+  return <StyledDatePicker {...args} />;
+};
+
+FullWidth.args = {
+  dateFormat: 'yyyy-MM-dd',
+  startDate: new Date('2021-09-15T00:00:00+08:00'),
+};

src/components/DatePicker/DatePicker.stories.tsx

@@ -38,6 +38,10 @@ const Root = styled(Box)<StyledRootProps>(({ theme, disabled }) => ({
   ...(disabled
     ? { pointerEvents: 'none', backgroundColor: theme.color.secondary.$40 }
     : {}),
+  '& > .DatePicker-operation': {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
 }));
 
 const Placeholder = styled('span')(({ theme }) => ({
@@ -133,6 +137,7 @@ const Item = styled(Box)(({}) => ({
 
 const DatePicker: VFC<DatePickerProps> = (props) => {
   const {
+    className,
     type = 'date',
     locale,
     startDate,
@@ -143,6 +148,7 @@ const DatePicker: VFC<DatePickerProps> = (props) => {
     limitTo,
     popperProps,
     disabled,
+    dateFormat,
     ...otherProps
   } = props;
   const containerRef = useRef(null);
@@ -310,13 +316,14 @@ const DatePicker: VFC<DatePickerProps> = (props) => {
   return (
     <>
       <Root
+        className={`DatePicker${className ? ' ' + className : ''}`}
         ref={containerRef}
         disabled={disabled}
         onClick={() => setIsOpen(true)}
         {...otherProps}
       >
         {localStartDate ? (
-          format(localStartDate, 'MM/dd', {
+          format(localStartDate, dateFormat ?? 'MM/dd', {
             locale,
           })
         ) : (
@@ -326,28 +333,30 @@ const DatePicker: VFC<DatePickerProps> = (props) => {
           <>
             {' - '}
             {localEndDate ? (
-              format(localEndDate, 'MM/dd', {
+              format(localEndDate, dateFormat ?? 'MM/dd', {
                 locale,
               })
             ) : (
               <Placeholder>{placeholder}</Placeholder>
             )}
           </>
         )}
-        {(localStartDate || localEndDate) && (
-          <Icon onClick={handleClearDates}>
-            <img src={cancelCircleSVG} />
+        <div className="DatePicker-operation">
+          {(localStartDate || localEndDate) && (
+            <Icon onClick={handleClearDates}>
+              <img src={cancelCircleSVG} />
+            </Icon>
+          )}
+          <Icon>
+            <BtnIcCalendar
+              sx={{
+                '& path': {
+                  stroke: disabled ? theme.color.secondary.$60 : '#606060',
+                },
+              }}
+            />
           </Icon>
-        )}
-        <Icon>
-          <BtnIcCalendar
-            sx={{
-              '& path': {
-                stroke: disabled ? theme.color.secondary.$60 : '#606060',
-              },
-            }}
-          />
-        </Icon>
+        </div>
       </Root>
       <Popper
         open={disabled ? false : isOpen}

src/components/DatePicker/DatePicker.tsx

@@ -6,6 +6,7 @@ export interface StyledRootProps {
 }
 
 export interface DatePickerProps extends Omit<BoxProps, 'onSelect'> {
+  className: string;
   type?: 'date' | 'range';
   placeholder?: string;
   locale?: Locale;
@@ -14,6 +15,7 @@ export interface DatePickerProps extends Omit<BoxProps, 'onSelect'> {
   limitFrom?: Date;
   limitTo?: Date;
   disabled?: boolean;
+  dateFormat?: string;
   onSelect: (
     value: Date | undefined | [Date | undefined, Date | undefined],
   ) => void;