diff --git a/docs/src/Demo/Demo.jsx b/docs/src/Demo/Demo.jsx
index 9d9d879bb..08c690d71 100644
--- a/docs/src/Demo/Demo.jsx
+++ b/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 {
-
-
+ */}
{/* {
diff --git a/docs/src/Demo/Examples/DateTimePickers.jsx b/docs/src/Demo/Examples/DateTimePickers.jsx
index 5ad9db726..03b6b6e0b 100644
--- a/docs/src/Demo/Examples/DateTimePickers.jsx
+++ b/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 = {
diff --git a/lib/src/DatePicker/Calendar.jsx b/lib/src/DatePicker/Calendar.jsx
index be42e2e7a..532001d26 100644
--- a/lib/src/DatePicker/Calendar.jsx
+++ b/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();
diff --git a/lib/src/TimePicker/TimePicker.jsx b/lib/src/TimePicker/TimePicker.jsx
index 2b5eb2ff1..ab5792354 100644
--- a/lib/src/TimePicker/TimePicker.jsx
+++ b/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 => () => {
diff --git a/lib/src/utils/time-utils.js b/lib/src/utils/time-utils.js
index 4dedf4552..03c38b2f2 100644
--- a/lib/src/utils/time-utils.js
+++ b/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;
};
-
diff --git a/lib/src/utils/utils.js b/lib/src/utils/utils.js
index 5c354571d..89c848c10 100644
--- a/lib/src/utils/utils.js
+++ b/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;
}
}