Replace moment with date-fns

docs/src/Demo/Demo.jsx

@@ -5,9 +5,9 @@ import { AppBar, Toolbar, IconButton, Icon, Typography, withStyles, Button, Tool
 import Github from './components/GithubIcon';
 import SourcablePanel from './components/SourcablePanel';
 import BasicUsage from './Examples/BasicUsage';
-import CustomElements from './Examples/CustomElements';
+// import CustomElements from './Examples/CustomElements';
 import DateTimePickers from './Examples/DateTimePickers';
-import PersianPickers from './Examples/PersianPickers';
+// import PersianPickers from './Examples/PersianPickers';
 import './Demo.css';
 
 class Demo extends Component {
@@ -104,12 +104,12 @@ class Demo extends Component {
             <DateTimePickers />
           </SourcablePanel>
 
-          <SourcablePanel
+          {/* <SourcablePanel
             title="Custom Day Element"
             sourceFile="CustomElements.jsx"
           >
             <CustomElements />
-          </SourcablePanel>
+          </SourcablePanel> */}
 
           {/* <SourcablePanel
             title="Persian Pickers"

docs/src/Demo/Examples/BasicUsage.jsx

@@ -1,11 +1,10 @@
 import React, { Fragment, Component } from 'react';
-import moment from 'moment';
 import { Typography } from 'material-ui';
 import { TimePicker, DatePicker } from 'material-ui-pickers';
 
 export default class BasicUsage extends Component {
   state = {
-    selectedDate: moment(),
+    selectedDate: new Date(),
   }
 
   handleDateChange = (date) => {

docs/src/Demo/Examples/DateTimePickers.jsx

@@ -1,7 +1,6 @@
 import React, { Fragment, Component } from 'react';
 import { DateTimePicker } from 'material-ui-pickers';
 import { IconButton, Typography, Icon, InputAdornment } from 'material-ui';
-import moment from 'moment';
 
 export default class BasicUsage extends Component {
   state = {

lib/src/DatePicker/Calendar.jsx

@@ -1,6 +1,10 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import withStyles from 'material-ui/styles/withStyles';
+import addDays from 'date-fns/addDays';
+import setHours from 'date-fns/setHours';
+import setMinutes from 'date-fns/setMinutes';
+import startOfDay from 'date-fns/startOfDay';
 
 import EventListener from 'react-event-listener';
 import keycode from 'keycode';
@@ -54,10 +58,7 @@ export class Calendar extends Component {
 
   onDateSelect = (day) => {
     const { date } = this.props;
-    const updatedDate = day
-      .clone()
-      .hours(date.hours())
-      .minutes(date.minutes());
+    const updatedDate = setMinutes(setHours(day, date.getHours()), date.getMinutes());
 
     this.props.onChange(updatedDate);
   };
@@ -100,20 +101,20 @@ export class Calendar extends Component {
 
     switch (keycode(event)) {
       case 'up':
-        this.moveToDay(date.clone().subtract(7, 'days'));
+        this.moveToDay(addDays(date, -7));
         break;
       case 'down':
-        this.moveToDay(date.clone().add(7, 'days'));
+        this.moveToDay(addDays(date, 7));
         break;
       case 'left':
         theme.direction === 'ltr'
-          ? this.moveToDay(date.clone().subtract(1, 'day'))
-          : this.moveToDay(date.clone().add(1, 'day'));
+          ? this.moveToDay(addDays(date, -1))
+          : this.moveToDay(addDays(date, 1));
         break;
       case 'right':
         theme.direction === 'ltr'
-          ? this.moveToDay(date.clone().add(1, 'day'))
-          : this.moveToDay(date.clone().subtract(1, 'day'));
+          ? this.moveToDay(addDays(date, 1))
+          : this.moveToDay(addDays(date, -1));
         break;
       default:
         // if keycode is not handled, stop execution
@@ -143,7 +144,7 @@ export class Calendar extends Component {
   renderDays = (week) => {
     const { date, renderDay, utils } = this.props;
 
-    const selectedDate = date.clone().startOf('day');
+    const selectedDate = startOfDay(date);
     const currentMonthNumber = utils.getMonth(this.state.currentMonth);
     const now = utils.date();
 

lib/src/TimePicker/TimePicker.jsx

@@ -27,7 +27,7 @@ export class TimePicker extends Component {
 
   state = {
     isHourViewShown: true,
-    meridiemMode: this.props.date.hours() >= 12 ? 'pm' : 'am',
+    meridiemMode: this.props.date.getHours() >= 12 ? 'pm' : 'am',
   }
 
   setMeridiemMode = mode => () => {

lib/src/utils/time-utils.js

@@ -1,3 +1,6 @@
+import setHours from 'date-fns/setHours';
+
+
 const center = {
   x: 260 / 2,
   y: 260 / 2,
@@ -56,16 +59,15 @@ export const getMinutes = (offsetX, offsetY, step = 6) => {
 
 export const convertToMeridiem = (time, meridiem, ampm) => {
   if (ampm) {
-    const currentMeridiem = time.hours() >= 12 ? 'pm' : 'am';
+    const currentMeridiem = time.getHours() >= 12 ? 'pm' : 'am';
     if (currentMeridiem !== meridiem) {
       const hours = meridiem === 'am'
-        ? time.hours() - 12
-        : time.hours() + 12;
+        ? time.getHours() - 12
+        : time.getHours() + 12;
 
-      return time.clone().hours(hours);
+      return setHours(time, hours);
     }
   }
 
   return time;
 };
-

lib/src/utils/utils.js

@@ -1,135 +1,140 @@
-import Moment from 'moment';
-import { extendMoment } from 'moment-range';
+import addDays from 'date-fns/addDays';
+import addMonths from 'date-fns/addMonths';
+import addYears from 'date-fns/addYears';
+import endOfDay from 'date-fns/endOfDay';
+import endOfMonth from 'date-fns/endOfMonth';
+import endOfWeek from 'date-fns/endOfWeek';
+import endOfYear from 'date-fns/endOfYear';
+import format from 'date-fns/format';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import isSameDay from 'date-fns/isSameDay';
+import isValid from 'date-fns/isValid';
+import setDay from 'date-fns/setDay';
+import setHours from 'date-fns/setHours';
+import setMinutes from 'date-fns/setMinutes';
+import setYear from 'date-fns/setYear';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfWeek from 'date-fns/startOfWeek';
+import startOfYear from 'date-fns/startOfYear';
 
-const moment = extendMoment(Moment);
 
 export default class Utils {
   static date(value) {
-    return moment(value);
+    return value;
   }
 
-  static isValid(date) {
-    return date.isValid();
-  }
+  static isValid = isValid
 
   static isNull(date) {
-    return date.parsingFlags().nullInput;
+    return date == null;
   }
 
-  static isAfter(date, value) {
-    return date.isAfter(value);
-  }
+  static isAfter = isAfter
 
-  static isBefore(date, value) {
-    return date.isBefore(value);
-  }
+  static isBefore = isBefore
 
   static isAfterDay(date, value) {
-    return date.isAfter(value, 'day');
+    return isAfter(endOfDay(date), value);
   }
 
   static isBeforeDay(date, value) {
-    return date.isBefore(value, 'day');
+    return isBefore(startOfDay(date), value);
   }
 
   static isBeforeYear(date, value) {
-    return date.isBefore(value, 'year');
+    return isBefore(startOfYear(date), value);
   }
 
   static isAfterYear(date, value) {
-    return date.isAfter(value, 'year');
+    return isAfter(endOfYear(date), value);
   }
 
-  static startOfDay(date) {
-    return date.startOf('day');
-  }
+  static startOfDay = startOfDay
 
-  static endOfDay(date) {
-    return date.endOf('day');
-  }
+  static endOfDay = endOfDay
 
-  static format(date, formatString) {
-    return date.format(formatString);
-  }
+  static format = format
 
   static formatNumber(num) {
     return num;
   }
 
   static getHours(date) {
-    return date.get('hours');
+    return date.getHours();
   }
 
-  static setHours(date, value) {
-    return date.clone().hours(value);
-  }
+  static setHours = setHours
 
   static getMinutes(date) {
-    return date.get('minutes');
+    return date.getMinutes();
   }
 
-  static setMinutes(date, value) {
-    return date.clone().minutes(value);
-  }
+  static setMinutes = setMinutes
 
   static getMonth(date) {
-    return date.get('month');
+    return date.getMonth();
   }
 
 
-  static isSameDay(date, comparing) {
-    return date.isSame(comparing, 'day');
-  }
+  static isSameDay = isSameDay;
 
   static getMeridiemText(ampm) {
     return ampm === 'am' ? 'AM' : 'PM';
   }
 
-  static getStartOfMonth(date) {
-    return date.clone().startOf('month');
-  }
+  static getStartOfMonth = startOfMonth
 
   static getNextMonth(date) {
-    return date.clone().add(1, 'month');
+    return addMonths(date, 1);
   }
 
   static getPreviousMonth(date) {
-    return date.clone().subtract(1, 'month');
+    return addMonths(date, -1);
   }
 
   static getYear(date) {
-    return date.get('year');
+    return date.getYear();
   }
 
-  static setYear(date, year) {
-    return date.clone().set('year', year);
-  }
+  static setYear = setYear;
 
   static getWeekdays() {
-    return [0, 1, 2, 3, 4, 5, 6].map(dayOfWeek => moment().weekday(dayOfWeek).format('dd')[0]);
+    return [0, 1, 2, 3, 4, 5, 6].map(dayOfWeek => format(setDay(new Date(), dayOfWeek), 'dd'));
   }
 
   static getWeekArray(date) {
-    const start = date.clone().startOf('month').startOf('week');
-    const end = date.clone().endOf('month').endOf('week');
-
-    const weeks = Array.from(moment.range(start, end).by('week'));
+    const start = startOfWeek(startOfMonth(date));
+    const end = endOfWeek(endOfMonth(date));
 
     const nestedWeeks = [];
-
-    weeks.forEach((week) => {
-      const endOfWeek = week.clone().endOf('week');
-      nestedWeeks.push(Array.from(moment.range(week, endOfWeek).by('day')));
-    });
+    let count = 0;
+    let current = start;
+    while (isBefore(current, end)) {
+      const weekNumber = Math.floor(count / 7);
+      nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+      nestedWeeks[weekNumber].push(current);
+      current = addDays(current, 1);
+      count += 1;
+    }
 
     return nestedWeeks;
   }
 
   static getYearRange(start, end) {
-    return Array.from(moment.range(start, end).by('year'));
+    const startDate = new Date(start);
+    const endDate = new Date(end);
+    const years = [];
+    let current = startDate;
+    while (isBefore(current, endDate)) {
+      years.push(current);
+      current = addYears(current, 1);
+    }
+    return years;
   }
 
   static toNativeDate(date) {
-    return date.toDate();
+    return date;
   }
 }