Change Moment dependency to day.js (close #14)

README.md

@@ -63,11 +63,13 @@ The components that you can use are as follows: If you want to configure the `Da
 
 ## 📦 Dependency 
 
-> In the next version v1.0.0, moment.js will be replaced by day.js or date-fns
+* Moment.js
 
-* [Moment](https://momentjs.com)
+In previous versions, moment.js were used. but now it is changed to `Day.js` to because of bundle size issue (#14)
 
-`Moment` is a javascript library for Parse, validate, manipulate, and display dates and times. this component use moment library to globalize and control date. You can check the locale list through this [link](https://github.com/moment/moment/tree/develop/locale).
+* [Day.js](https://github.com/iamkun/dayjs)
+
+`Day.js` is a javascript library for Parse, validate, manipulate, and display dates and times. this component use `Day.js` library to globalize and control date. You can check the locale list through this [link](https://github.com/iamkun/dayjs/tree/dev/src/locale).
 
 ## 📲 Installation 
 
@@ -91,8 +93,8 @@ import '@y0c/react-datepicker/assets/styles/calendar.scss';
 
 // Please include the locale you want to use.
 // and delivery props to calendar component 
-// See locale list https://github.com/moment/moment/tree/develop/locale
-import 'moment/locale/ko';
+// See locale list https://github.com/iamkun/dayjs/tree/dev/src/locale 
+import 'dayjs/locale/ko';
 
 class DatePickerExample extends Component {
 
@@ -167,6 +169,10 @@ Please fork and use [https://codesandbox.io/s/pw6n17pk57](https://codesandbox.io
 * Open a new issue(Bug or Feature) on [Github](https://github.com/y0c/react-datepicker/issues/new/choose)
 * Join the [Gitter room](https://gitter.im/react-datepicker/community) to chat with other developers.
 
+## 👨‍👦‍👦 Contribution 
+
+Issue and Pull Request are always welcome! 
+
 ## 📝 License 
 MIT
 

examples/CalendarSelectedController.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as moment from 'moment';
 import Calendar, { Props as ICalendarProps } from '../src/components/Calendar';
 import { Omit, Merge } from '../src/utils/TypeUtil';
 
@@ -16,7 +15,7 @@ interface IProps {
 }
 
 interface State {
-  selected: moment.Moment[];
+  selected: Date[];
 }
 
 type Props = CalendarProps & IProps;
@@ -29,7 +28,7 @@ class CalendarSelectedController extends React.Component<Props, State> {
     selected: [],
   };
 
-  public handleChange = (date: moment.Moment) => {
+  public handleChange = (date: Date) => {
     const { multiple } = this.props;
     this.setState({
       selected: multiple ? [...this.state.selected, date] : [date],

package.json

@@ -34,8 +34,8 @@
   },
   "dependencies": {
     "classnames": "^2.2.6",
+    "dayjs": "^1.8.11",
     "lodash": "4.17.11",
-    "moment": "^2.22.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },
@@ -91,7 +91,6 @@
     "@types/enzyme": "^3.1.15",
     "@types/jest": "^23.3.12",
     "@types/lodash": "^4.14.118",
-    "@types/moment": "^2.13.0",
     "@types/react": "^16.7.13",
     "@types/react-dom": "^16.0.11",
     "@types/sinon": "^7.0.3",

src/common/Constant.ts

@@ -1,4 +1,4 @@
 export const DatePickerDefaults = {
   dateFormat: 'YYYY-MM-DD',
-  locale: 'en-ca',
+  locale: 'en',
 };

src/components/Calendar.tsx

@@ -1,22 +1,22 @@
 import { range } from 'lodash';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 import * as React from 'react';
 import CalendarContainer, { InheritProps as ContainerProps } from './CalendarContainer';
 
 export interface Props extends ContainerProps {
   /** Calendar Initial Date Parameters */
-  base: moment.Moment;
+  base: Date;
   /** Number of months to show at once */
   showMonthCnt: number;
 }
 
 export interface State {
-  base: moment.Moment;
+  base: Date;
 }
 
 class Calendar extends React.Component<Props, State> {
   public static defaultProps = {
-    base: moment(),
+    base: dayjs().toDate(),
     showMonthCnt: 1,
     showToday: false,
   };
@@ -28,7 +28,7 @@ class Calendar extends React.Component<Props, State> {
     };
   }
 
-  public setBase = (base: moment.Moment) => {
+  public setBase = (base: Date) => {
     this.setState({ base });
   };
 
@@ -44,7 +44,9 @@ class Calendar extends React.Component<Props, State> {
               <CalendarContainer
                 {...this.props}
                 base={this.state.base}
-                current={base.clone().add(idx, 'months')}
+                current={dayjs(base)
+                  .add(idx, 'month')
+                  .toDate()}
                 prevIcon={idx === 0}
                 nextIcon={idx === showMonthCnt! - 1}
                 setBase={this.setBase}

src/components/CalendarBody.tsx

@@ -1,5 +1,5 @@
-import * as moment from 'moment';
 import * as React from 'react';
+import * as dayjs from 'dayjs';
 import { IDatePicker } from '../common/@types';
 import { DatePickerDefaults } from '../common/Constant';
 import { getMonthMatrix, getYearMatrix } from '../utils/DateUtil';
@@ -11,13 +11,14 @@ interface CalendarBodyProps {
   /** Calendar viewMode(Year, Month, Day) */
   viewMode: IDatePicker.ViewMode;
   /** Calendar current Date */
-  current: moment.Moment;
+  current: Date;
   /** DayClick Event */
   onClick: (value: string) => void;
   /** Locale to use */
   locale: string;
 }
 type Props = DayViewProps & CalendarBodyProps;
+
 class CalendarBody extends React.Component<Props> {
   public static defaultProps = {
     viewMode: IDatePicker.ViewMode.DAY,
@@ -26,15 +27,32 @@ class CalendarBody extends React.Component<Props> {
 
   public render() {
     const { current, onClick, locale } = this.props;
-    const cell = (className: string) => (value: string, key: number) => (
-      <TableCell className={className} text={value} onClick={text => onClick(text)} key={key} />
-    );
     const viewMap = {
       [IDatePicker.ViewMode.YEAR]: (
-        <TableMatrixView matrix={getYearMatrix(current.year())} cell={cell('calendar__year')} />
+        <TableMatrixView
+          matrix={getYearMatrix(dayjs(current).year())}
+          cell={(value: string, key: number) => (
+            <TableCell
+              key={key}
+              className="calendar__year"
+              text={value}
+              onClick={() => onClick(value)}
+            />
+          )}
+        />
       ),
       [IDatePicker.ViewMode.MONTH]: (
-        <TableMatrixView matrix={getMonthMatrix(locale)} cell={cell('calendar__month')} />
+        <TableMatrixView
+          matrix={getMonthMatrix(locale)}
+          cell={(value: string, key: number) => (
+            <TableCell
+              key={key}
+              className="calendar__month"
+              text={value}
+              onClick={() => onClick(String(key))}
+            />
+          )}
+        />
       ),
       [IDatePicker.ViewMode.DAY]: <DayView {...this.props} />,
     };

src/components/CalendarContainer.tsx

@@ -1,5 +1,5 @@
 import * as classNames from 'classnames';
-import * as moment from 'moment';
+import * as dayjs from 'dayjs';
 import * as React from 'react';
 import { IDatePicker } from '../common/@types';
 import CalendarBody from './CalendarBody';
@@ -8,6 +8,7 @@ import { Props as DayViewProps } from './DayView';
 import TodayPanel from './TodayPanel';
 import { ifExistCall } from '../utils/FunctionUtil';
 import { DatePickerDefaults } from '../common/Constant';
+import { getToday } from '../utils/LocaleUtil';
 
 interface CalendarContainerProps {
   /** Locale to use */
@@ -19,20 +20,20 @@ interface CalendarContainerProps {
   /** NextIcon Show or Hide */
   nextIcon?: boolean;
   /** Event for Calendar day click */
-  onChange?: (date: moment.Moment) => void;
+  onChange?: (date: Date) => void;
   /** TodayPanel show or hide */
   showToday?: boolean;
 }
 
 interface PrivateProps {
   /** CalendarContainer base prop */
-  current: moment.Moment;
+  current: Date;
   /** Default Date parameter in calendar, which is the parent component */
-  base: moment.Moment;
+  base: Date;
   /** Number of months to show at once */
   showMonthCnt: number;
   /** Set Calendar initial Date  */
-  setBase: (base: moment.Moment) => void;
+  setBase: (base: Date) => void;
 }
 
 export interface State {
@@ -44,7 +45,7 @@ export type Props = CalendarContainerProps & DayViewProps & PrivateProps;
 
 class CalendarContainer extends React.Component<Props, State> {
   public static defaultProps = {
-    current: moment(),
+    current: dayjs().toDate(),
     show: true,
     showMonthCnt: 1,
     showToday: false,
@@ -61,11 +62,11 @@ class CalendarContainer extends React.Component<Props, State> {
 
   public getHeaderTitle = () => {
     const { current } = this.props;
-    const year = current.year();
+    const year = dayjs(current).year();
     return {
       [IDatePicker.ViewMode.YEAR]: `${year - 4} - ${year + 5}`,
       [IDatePicker.ViewMode.MONTH]: `${year}`,
-      [IDatePicker.ViewMode.DAY]: current.format('YYYY.MM'),
+      [IDatePicker.ViewMode.DAY]: dayjs(current).format('YYYY.MM'),
     }[this.state.viewMode];
   };
 
@@ -89,46 +90,55 @@ class CalendarContainer extends React.Component<Props, State> {
     const { current, onChange, setBase, showMonthCnt, base } = this.props;
     if (!value.trim()) return;
     if (showMonthCnt > 1) {
-      const date = current.date(parseInt(value, 10));
+      const date = dayjs(current)
+        .date(parseInt(value, 10))
+        .toDate();
       ifExistCall(onChange, date);
       return;
     }
 
     if (viewMode === IDatePicker.ViewMode.YEAR) {
-      setBase(base.clone().year(parseInt(value, 10)));
+      setBase(
+        dayjs(base)
+          .year(parseInt(value, 10))
+          .toDate()
+      );
       this.setState({
         viewMode: IDatePicker.ViewMode.MONTH,
       });
     } else if (viewMode === IDatePicker.ViewMode.MONTH) {
-      const month = moment()
-        .month(value)
-        .format('M');
-      setBase(base.clone().month(parseInt(month, 10) - 1));
+      setBase(
+        dayjs(base)
+          .month(parseInt(value, 10))
+          .toDate()
+      );
       this.setState({
         viewMode: IDatePicker.ViewMode.DAY,
       });
     } else {
-      const date = current.date(parseInt(value, 10));
+      const date = dayjs(current)
+        .date(parseInt(value, 10))
+        .toDate();
       ifExistCall(onChange, date);
     }
   };
 
   public handleBase = (method: string) => () => {
     const { base, setBase } = this.props;
     const { viewMode } = this.state;
-    const clone = base.clone();
+    const date = dayjs(base).clone();
     if (viewMode === IDatePicker.ViewMode.YEAR) {
-      setBase(clone[method](10, 'years'));
+      setBase(date[method](10, 'year').toDate());
     } else if (viewMode === IDatePicker.ViewMode.MONTH) {
-      setBase(clone[method](1, 'years'));
+      setBase(date[method](1, 'year').toDate());
     } else {
-      setBase(clone[method](1, 'months'));
+      setBase(date[method](1, 'month').toDate());
     }
   };
 
   public handleToday = () => {
     const { setBase } = this.props;
-    setBase(moment());
+    setBase(dayjs().toDate());
   };
 
   public render() {
@@ -163,13 +173,7 @@ class CalendarContainer extends React.Component<Props, State> {
           title={this.getHeaderTitle()}
         />
         {showToday && (
-          <TodayPanel
-            today={moment()
-              .locale(locale)
-              .format('LL')}
-            onClick={this.handleToday}
-            show={showToday}
-          />
+          <TodayPanel today={getToday(locale)} onClick={this.handleToday} show={showToday} />
         )}
         <CalendarBody
           viewMode={this.state.viewMode}