@spaced-out/ui-design-system 0.3.7 → 0.3.8-beta.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.3.8-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.3.7...v0.3.8-beta.0) (2024-12-12)
+
+
+### Bug Fixes
+
+* [CE-15675, CE-15677] adding consistency wrt to timezone in daterangepicker ([#296](https://github.com/spaced-out/ui-design-system/issues/296)) ([992ce9e](https://github.com/spaced-out/ui-design-system/commit/992ce9e2988ec531b8bfdadb02976fbcb63ee5be))
+
 ### [0.3.7](https://github.com/spaced-out/ui-design-system/compare/v0.3.6...v0.3.7) (2024-11-29)
 
 

package/lib/components/DateRangePicker/Calendar.js

@@ -5,8 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Calendar = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _moment = _interopRequireDefault(require("moment"));
 var _utils = require("../../utils");
+var _dateRangePicker = require("../../utils/date-range-picker");
 var _Text = require("../Text");
 var _Day = require("./Day");
 var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
@@ -23,9 +24,9 @@ const getFormattedDate = (marker, dateRange) => {
   } = dateRange;
   switch (marker) {
     case _utils.MARKERS.DATE_RANGE_START:
-      return startDate ? (0, _momentTimezone.default)(startDate).format('MMMM D, YYYY') : 'Start Date';
+      return startDate ? _moment.default.utc(startDate).format('MMMM D, YYYY') : 'Start Date';
     default:
-      return endDate ? (0, _momentTimezone.default)(endDate).format('MMMM D, YYYY') : 'End Date';
+      return endDate ? _moment.default.utc(endDate).format('MMMM D, YYYY') : 'End Date';
   }
 };
 const Calendar = _ref => {
@@ -37,7 +38,8 @@ const Calendar = _ref => {
     handlers,
     hoverDay,
     dateRange,
-    inHoverRange
+    inHoverRange,
+    today
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     className: _CalendarModule.default.calendar
@@ -62,18 +64,19 @@ const Calendar = _ref => {
       onDayClick,
       onDayHover
     } = handlers;
+    const dateValue = _moment.default.utc(date);
     return /*#__PURE__*/React.createElement(_Day.Day, {
       key: date,
       date: date,
       filled: isStart || isEnd,
       onClick: () => onDayClick(date),
       onHover: () => onDayHover(date),
-      outlined: (0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(), 'd'),
-      disabled: minDate && (0, _momentTimezone.default)(date).isBefore(minDate) || (0, _momentTimezone.default)(date).isAfter(maxDate) || !(0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(value), 'month'),
+      outlined: (0, _dateRangePicker.isSame)(date, today, 'd'),
+      disabled: minDate && (0, _dateRangePicker.isBefore)(date, minDate) || (0, _dateRangePicker.isAfter)(date, maxDate) || !(0, _dateRangePicker.isSame)(date, value, 'month'),
       endOfRange: isEnd && !isRangeValid,
       highlighted: highlighted && !isRangeValid,
       startOfRange: isStart && !isRangeValid,
-      value: (0, _momentTimezone.default)(date).date(),
+      value: dateValue.date(),
       hoverDay: hoverDay
     });
   }))));

package/lib/components/DateRangePicker/Calendar.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 // $FlowFixMe[untyped-import]
-import moment from 'moment-timezone';
+import moment from 'moment';
 
 import type {DateRange} from '../../types';
 import {
@@ -16,6 +16,7 @@ import {
   NAVIGATION_ACTION,
   WEEKDAYS,
 } from '../../utils';
+import {isAfter, isBefore, isSame} from '../../utils/date-range-picker';
 import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
 
 import {Day} from './Day';
@@ -39,6 +40,7 @@ type CalendarProps = {
       action: $Values<typeof NAVIGATION_ACTION>,
     ) => void,
   },
+  today: string,
 };
 
 const getFormattedDate = (marker: string, dateRange: DateRange) => {
@@ -46,10 +48,10 @@ const getFormattedDate = (marker: string, dateRange: DateRange) => {
   switch (marker) {
   case MARKERS.DATE_RANGE_START:
     return startDate
-      ? moment(startDate).format('MMMM D, YYYY')
+      ? moment.utc(startDate).format('MMMM D, YYYY')
       : 'Start Date';
   default:
-    return endDate ? moment(endDate).format('MMMM D, YYYY') : 'End Date';
+    return endDate ? moment.utc(endDate).format('MMMM D, YYYY') : 'End Date';
   }
 };
 
@@ -62,6 +64,7 @@ export const Calendar = ({
   hoverDay,
   dateRange,
   inHoverRange,
+  today,
 }: CalendarProps): React.Node => (
   <div className={css.calendar}>
     <SubTitleExtraSmall
@@ -85,13 +88,14 @@ export const Calendar = ({
 
     {getDaysInMonth(value).map((week, index) => (
       <div key={week[index]} className={css.calendarRow}>
-        {week.map((date) => {
+        {week.map((date: string) => {
           const isRangeValid = isStartDateEndDateSame(dateRange);
           const isStart = isStartOfRange(dateRange, date);
           const isEnd = isEndOfRange(dateRange, date);
           const highlighted =
             inDateRange(dateRange, date) || inHoverRange(date);
           const {onDayClick, onDayHover} = handlers;
+          const dateValue = moment.utc(date);
 
           return (
             <Day
@@ -100,16 +104,16 @@ export const Calendar = ({
               filled={isStart || isEnd}
               onClick={() => onDayClick(date)}
               onHover={() => onDayHover(date)}
-              outlined={moment(date).isSame(moment(), 'd')}
+              outlined={isSame(date, today, 'd')}
               disabled={
-                (minDate && moment(date).isBefore(minDate)) ||
-                moment(date).isAfter(maxDate) ||
-                !moment(date).isSame(moment(value), 'month')
+                (minDate && isBefore(date, minDate)) ||
+                isAfter(date, maxDate) ||
+                !isSame(date, value, 'month')
               }
               endOfRange={isEnd && !isRangeValid}
               highlighted={highlighted && !isRangeValid}
               startOfRange={isStart && !isRangeValid}
-              value={moment(date).date()}
+              value={dateValue.date()}
               hoverDay={hoverDay}
             />
           );

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DateRangePicker = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _dateRangePicker = require("../../utils/date-range-picker");
 var _DateRangeWrapper = require("./DateRangeWrapper");
 var _DateRangePickerModule = _interopRequireDefault(require("./DateRangePicker.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,33 +29,43 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hideTimezone = false,
     selectedDateRange = {}
   } = _ref;
-  const today = (0, _utils.formatIsoDate)();
+  const localTimezone = _momentTimezone.default.tz.guess();
+  const {
+    timezone: inputTimezone = ''
+  } = selectedDateRange;
+  const validTimezone = (0, _lodash.isEmpty)(inputTimezone) ? localTimezone : inputTimezone;
+  const [today, setToday] = React.useState(() => (0, _dateRangePicker.getTodayInTimezone)(validTimezone));
   const {
     validMinDate,
     validMaxDate,
-    validTimezone,
     validDateRange
-  } = (0, _utils.getValidDates)(selectedDateRange, minDate, maxDate, onError);
+  } = React.useMemo(() => (0, _utils.getValidDates)({
+    selectedDateRange,
+    minDate,
+    maxDate,
+    today,
+    onError
+  }), [today]);
   const {
     startDate,
     endDate
   } = validDateRange;
   const validRangeEndMonth = endDate ? (0, _utils.getMonthEndDate)(endDate) : (0, _utils.getMonthEndDate)(today);
-  const validRangeStartMonth = startDate && !(0, _momentTimezone.default)(startDate).isSame(endDate, 'M') ? (0, _utils.getMonthEndDate)(startDate) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(validRangeEndMonth, 1, 'M'));
+  const validRangeStartMonth = startDate && endDate && !(0, _dateRangePicker.isSame)(startDate, endDate, 'month') ? (0, _utils.getMonthEndDate)(startDate) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(validRangeEndMonth, 1, 'M'));
   const [dateRange, setDateRange] = React.useState(validDateRange);
   const [timezone, setTimezone] = React.useState(validTimezone);
   const [hoverDay, setHoverDay] = React.useState('');
   const [rangeStartMonth, setRangeStartMonth] = React.useState(validRangeStartMonth);
   const [rangeEndMonth, setRangeEndMonth] = React.useState(validRangeEndMonth);
   const setRangeStartMonthValidated = date => {
-    if ((0, _momentTimezone.default)(date).isSameOrAfter(validMinDate) && (0, _momentTimezone.default)(date).isBefore(rangeEndMonth)) {
+    if ((0, _dateRangePicker.isSameOrAfter)(date, validMinDate) && (0, _dateRangePicker.isBefore)(date, rangeEndMonth)) {
       setRangeStartMonth(date);
     } else {
       setRangeStartMonth((0, _utils.getMonthEndDate)(validMinDate));
     }
   };
   const setRangeEndMonthValidated = date => {
-    if ((0, _momentTimezone.default)(date).isSameOrBefore(validMaxDate) && (0, _momentTimezone.default)(date).isAfter(rangeStartMonth)) {
+    if ((0, _dateRangePicker.isSameOrBefore)(date, validMaxDate) && (0, _dateRangePicker.isAfter)(date, rangeStartMonth)) {
       setRangeEndMonth(date);
     } else {
       setRangeEndMonth((0, _utils.getMonthEndDate)(validMaxDate));
@@ -73,7 +85,7 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       startDate,
       endDate
     } = dateRange;
-    if (startDate && !endDate && (0, _momentTimezone.default)(day).isSameOrAfter(startDate)) {
+    if (startDate && !endDate && (0, _dateRangePicker.isSameOrAfter)(day, startDate)) {
       setDateRange({
         startDate,
         endDate: day
@@ -90,13 +102,17 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       startDate,
       endDate
     } = dateRange;
-    return Boolean(startDate && !endDate && hoverDay && (0, _momentTimezone.default)(hoverDay).isAfter((0, _momentTimezone.default)(startDate)) && (0, _momentTimezone.default)(day).isBetween((0, _momentTimezone.default)(startDate), (0, _momentTimezone.default)(hoverDay), null, '[]'));
+    return Boolean(startDate && !endDate && hoverDay && (0, _dateRangePicker.isAfter)(hoverDay, startDate) && (0, _dateRangePicker.isBetween)(day, startDate, hoverDay));
   };
   const handlers = {
     onDayClick,
     onDayHover: setHoverDay,
     onMonthNavigate
   };
+  const handleTimeZone = newTimezone => {
+    setToday((0, _dateRangePicker.getTodayInTimezone)(newTimezone));
+    setTimezone(newTimezone);
+  };
   return /*#__PURE__*/React.createElement(_DateRangeWrapper.DateRangeWrapper, {
     ref: ref,
     minDate: validMinDate,
@@ -107,14 +123,15 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onCancel: onCancel,
     timezone: timezone,
     dateRange: dateRange,
-    setTimezone: setTimezone,
+    setTimezone: handleTimeZone,
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
     inHoverRange: inHoverRange,
     setRangeStartMonth: setRangeStartMonthValidated,
     setRangeEndMonth: setRangeEndMonthValidated,
     hideTimezone: hideTimezone,
-    cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper)
+    cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper),
+    today: today
   });
 });
 exports.DateRangePicker = DateRangePicker;

package/lib/components/DateRangePicker/DateRangePicker.js.flow

@@ -1,6 +1,7 @@
 // @flow strict
 
 import * as React from 'react';
+import {isEmpty} from 'lodash';
 // $FlowFixMe[untyped-import]
 import moment from 'moment-timezone';
 
@@ -10,7 +11,6 @@ import type {
   DateRangeWithTimezone,
 } from '../../types';
 import {
-  formatIsoDate,
   getAddedDate,
   getMonthEndDate,
   getSubtractedDate,
@@ -19,6 +19,15 @@ import {
   NAVIGATION_ACTION,
 } from '../../utils';
 import classify from '../../utils/classify';
+import {
+  getTodayInTimezone,
+  isAfter,
+  isBefore,
+  isBetween,
+  isSame,
+  isSameOrAfter,
+  isSameOrBefore,
+} from '../../utils/date-range-picker';
 
 import {DateRangeWrapper} from './DateRangeWrapper';
 
@@ -55,17 +64,35 @@ export const DateRangePicker: React$AbstractComponent<
     }: DateRangePickerProps,
     ref,
   ): React.Node => {
-    const today = formatIsoDate();
+    const localTimezone = moment.tz.guess();
+    const {timezone: inputTimezone = ''} = selectedDateRange;
+
+    const validTimezone = isEmpty(inputTimezone)
+      ? localTimezone
+      : inputTimezone;
 
-    const {validMinDate, validMaxDate, validTimezone, validDateRange} =
-      getValidDates(selectedDateRange, minDate, maxDate, onError);
+    const [today, setToday] = React.useState(() =>
+      getTodayInTimezone(validTimezone),
+    );
+
+    const {validMinDate, validMaxDate, validDateRange} = React.useMemo(
+      () =>
+        getValidDates({
+          selectedDateRange,
+          minDate,
+          maxDate,
+          today,
+          onError,
+        }),
+      [today],
+    );
 
     const {startDate, endDate} = validDateRange;
     const validRangeEndMonth = endDate
       ? getMonthEndDate(endDate)
       : getMonthEndDate(today);
     const validRangeStartMonth =
-      startDate && !moment(startDate).isSame(endDate, 'M')
+      startDate && endDate && !isSame(startDate, endDate, 'month')
         ? getMonthEndDate(startDate)
         : getMonthEndDate(getSubtractedDate(validRangeEndMonth, 1, 'M'));
 
@@ -78,20 +105,16 @@ export const DateRangePicker: React$AbstractComponent<
       React.useState<string>(validRangeEndMonth);
 
     const setRangeStartMonthValidated = (date: string) => {
-      if (
-        moment(date).isSameOrAfter(validMinDate) &&
-        moment(date).isBefore(rangeEndMonth)
-      ) {
+      if (isSameOrAfter(date, validMinDate) && isBefore(date, rangeEndMonth)) {
         setRangeStartMonth(date);
       } else {
         setRangeStartMonth(getMonthEndDate(validMinDate));
       }
     };
-
     const setRangeEndMonthValidated = (date: string) => {
       if (
-        moment(date).isSameOrBefore(validMaxDate) &&
-        moment(date).isAfter(rangeStartMonth)
+        isSameOrBefore(date, validMaxDate) &&
+        isAfter(date, rangeStartMonth)
       ) {
         setRangeEndMonth(date);
       } else {
@@ -122,7 +145,7 @@ export const DateRangePicker: React$AbstractComponent<
 
     const onDayClick = (day: string) => {
       const {startDate, endDate} = dateRange;
-      if (startDate && !endDate && moment(day).isSameOrAfter(startDate)) {
+      if (startDate && !endDate && isSameOrAfter(day, startDate)) {
         setDateRange({startDate, endDate: day});
       } else {
         setDateRange({startDate: day});
@@ -136,13 +159,8 @@ export const DateRangePicker: React$AbstractComponent<
         startDate &&
           !endDate &&
           hoverDay &&
-          moment(hoverDay).isAfter(moment(startDate)) &&
-          moment(day).isBetween(
-            moment(startDate),
-            moment(hoverDay),
-            null,
-            '[]',
-          ),
+          isAfter(hoverDay, startDate) &&
+          isBetween(day, startDate, hoverDay),
       );
     };
 
@@ -152,6 +170,11 @@ export const DateRangePicker: React$AbstractComponent<
       onMonthNavigate,
     };
 
+    const handleTimeZone = (newTimezone) => {
+      setToday(getTodayInTimezone(newTimezone));
+      setTimezone(newTimezone);
+    };
+
     return (
       <DateRangeWrapper
         ref={ref}
@@ -163,7 +186,7 @@ export const DateRangePicker: React$AbstractComponent<
         onCancel={onCancel}
         timezone={timezone}
         dateRange={dateRange}
-        setTimezone={setTimezone}
+        setTimezone={handleTimeZone}
         rangeStartMonth={rangeStartMonth}
         rangeEndMonth={rangeEndMonth}
         inHoverRange={inHoverRange}
@@ -171,6 +194,7 @@ export const DateRangePicker: React$AbstractComponent<
         setRangeEndMonth={setRangeEndMonthValidated}
         hideTimezone={hideTimezone}
         cardWrapperClass={classify(css.container, classNames?.wrapper)}
+        today={today}
       />
     );
   },

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DateRangeWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _moment = _interopRequireDefault(require("moment"));
 var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _dateRangePicker = require("../../utils/date-range-picker");
 var _Button = require("../Button");
 var _Card = require("../Card");
 var _Dropdown = require("../Dropdown");
@@ -56,31 +57,31 @@ const CalendarHeader = _ref => {
     className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
       [_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
     }),
-    onClick: onClickPrevious,
+    onClick: () => !prevDisabled && onClickPrevious(),
     color: prevDisabled ? 'disabled' : 'secondary'
   }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     size: "small",
-    disabled: !availableMonths.length || (0, _momentTimezone.default)(minDate).isAfter(maxDate),
+    disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
     menu: {
-      selectedKeys: [(0, _momentTimezone.default)(date).month().toString()],
+      selectedKeys: [_moment.default.utc(date).month().toString()],
       options: availableMonths
     },
     onChange: event => {
-      setMonth((0, _utils.getMonthEndDate)((0, _momentTimezone.default)(date).set('M', event.key)));
+      setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', event.key)));
     },
-    dropdownInputText: _utils.MONTHS[(0, _momentTimezone.default)(date).month()].label,
+    dropdownInputText: _utils.MONTHS[_moment.default.utc(date).month()].label,
     scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
-    disabled: !availableYears.length || (0, _momentTimezone.default)(minDate).isAfter(maxDate),
+    disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
     menu: {
-      selectedKeys: [(0, _momentTimezone.default)(date).year().toString()],
+      selectedKeys: [_moment.default.utc(date).year().toString()],
       options: availableYears
     },
     size: "small",
     onChange: event => {
-      setMonth((0, _utils.getMonthEndDate)((0, _momentTimezone.default)(date).set('y', event.key)));
+      setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', event.key)));
     },
-    dropdownInputText: (0, _momentTimezone.default)(date).year(),
+    dropdownInputText: _moment.default.utc(date).year(),
     scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     size: "small",
@@ -89,7 +90,7 @@ const CalendarHeader = _ref => {
     className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
       [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
     }),
-    onClick: onClickNext,
+    onClick: () => !nextDisabled && onClickNext(),
     color: nextDisabled ? 'disabled' : 'secondary'
   }));
 };
@@ -110,16 +111,17 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     setRangeStartMonth,
     setRangeEndMonth,
     cardWrapperClass,
-    hideTimezone
+    hideTimezone,
+    today
   } = _ref2;
-  const canNavigateCloser = (0, _momentTimezone.default)(rangeStartMonth).year() !== (0, _momentTimezone.default)(rangeEndMonth).year() || Math.abs((0, _momentTimezone.default)(rangeStartMonth).month() - (0, _momentTimezone.default)(rangeEndMonth).month()) > 1;
+  const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
     const {
       startDate,
       endDate
     } = dateRange;
-    const startDateUTC = startDate && (0, _utils.addTimezone)(startDate, timezone);
-    const endDateUTC = endDate && (0, _utils.addTimezone)(endDate, timezone);
+    const startDateUTC = startDate && (0, _dateRangePicker.addTimezoneStartOfDay)(startDate, timezone);
+    const endDateUTC = endDate && (0, _dateRangePicker.addTimezoneEndOfDay)(endDate, timezone);
     onApply({
       startDate,
       endDate,
@@ -137,7 +139,8 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     hoverDay,
     dateRange,
     minDate,
-    maxDate
+    maxDate,
+    today
   };
   return /*#__PURE__*/React.createElement(_FocusManager.FocusManager, null, /*#__PURE__*/React.createElement(_Card.Card, {
     classNames: {
@@ -153,7 +156,7 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     date: rangeStartMonth,
     setMonth: setRangeStartMonth,
     nextDisabled: !canNavigateCloser,
-    prevDisabled: (0, _momentTimezone.default)(rangeStartMonth).isSameOrBefore(minDate, 'M'),
+    prevDisabled: (0, _dateRangePicker.isSameOrBefore)(rangeStartMonth, minDate, 'month'),
     minDate: minDate,
     maxDate: maxDate,
     onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
@@ -164,7 +167,7 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     rangeEndMonth: rangeEndMonth,
     date: rangeEndMonth,
     setMonth: setRangeEndMonth,
-    nextDisabled: (0, _momentTimezone.default)(rangeEndMonth).isSameOrAfter(maxDate, 'M'),
+    nextDisabled: (0, _dateRangePicker.isSameOrAfter)(rangeEndMonth, maxDate, 'month'),
     prevDisabled: !canNavigateCloser,
     minDate: minDate,
     maxDate: maxDate,
@@ -184,7 +187,7 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     className: _DateRangeWrapperModule.default.timezoneDropdownContainer
   }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
     options: (0, _utils.getTimezones)(),
-    disabled: (0, _momentTimezone.default)(minDate).isAfter(maxDate),
+    disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
     classNames: {
       box: _DateRangeWrapperModule.default.timezoneDropdown
     },

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -2,11 +2,10 @@
 
 import * as React from 'react';
 // $FlowFixMe[untyped-import]
-import moment from 'moment-timezone';
+import moment from 'moment';
 
 import type {DateRange, DateRangeWithTimezone} from '../../types';
 import {
-  addTimezone,
   generateAvailableYears,
   getAvailableMonths,
   getMonthEndDate,
@@ -16,6 +15,13 @@ import {
   NAVIGATION_ACTION,
 } from '../../utils';
 import classify from '../../utils/classify';
+import {
+  addTimezoneEndOfDay,
+  addTimezoneStartOfDay,
+  isAfter,
+  isSameOrAfter,
+  isSameOrBefore,
+} from '../../utils/date-range-picker';
 import {Button} from '../Button';
 import {
   Card,
@@ -72,6 +78,7 @@ type DateRangeWrapperProps = {
       action: $Values<typeof NAVIGATION_ACTION>,
     ) => void,
   },
+  today: string,
 };
 
 const CalendarHeader = ({
@@ -111,33 +118,33 @@ const CalendarHeader = ({
         className={classify(css.headerIcon, {
           [css.disabledIcon]: prevDisabled,
         })}
-        onClick={onClickPrevious}
+        onClick={() => !prevDisabled && onClickPrevious()}
         color={prevDisabled ? 'disabled' : 'secondary'}
       />
       <Dropdown
         size="small"
-        disabled={!availableMonths.length || moment(minDate).isAfter(maxDate)}
+        disabled={!availableMonths.length || isAfter(minDate, maxDate)}
         menu={{
-          selectedKeys: [moment(date).month().toString()],
+          selectedKeys: [moment.utc(date).month().toString()],
           options: availableMonths,
         }}
         onChange={(event) => {
-          setMonth(getMonthEndDate(moment(date).set('M', event.key)));
+          setMonth(getMonthEndDate(moment.utc(date).set('M', event.key)));
         }}
-        dropdownInputText={MONTHS[moment(date).month()].label}
+        dropdownInputText={MONTHS[moment.utc(date).month()].label}
         scrollMenuToBottom
       />
       <Dropdown
-        disabled={!availableYears.length || moment(minDate).isAfter(maxDate)}
+        disabled={!availableYears.length || isAfter(minDate, maxDate)}
         menu={{
-          selectedKeys: [moment(date).year().toString()],
+          selectedKeys: [moment.utc(date).year().toString()],
           options: availableYears,
         }}
         size="small"
         onChange={(event) => {
-          setMonth(getMonthEndDate(moment(date).set('y', event.key)));
+          setMonth(getMonthEndDate(moment.utc(date).set('y', event.key)));
         }}
-        dropdownInputText={moment(date).year()}
+        dropdownInputText={moment.utc(date).year()}
         scrollMenuToBottom
       />
       <ClickableIcon
@@ -147,7 +154,7 @@ const CalendarHeader = ({
         className={classify(css.headerIcon, {
           [css.disabledIcon]: nextDisabled,
         })}
-        onClick={onClickNext}
+        onClick={() => !nextDisabled && onClickNext()}
         color={nextDisabled ? 'disabled' : 'secondary'}
       />
     </div>
@@ -176,19 +183,21 @@ export const DateRangeWrapper: React$AbstractComponent<
       setRangeEndMonth,
       cardWrapperClass,
       hideTimezone,
+      today,
     }: DateRangeWrapperProps,
     ref,
   ): React.Node => {
     const canNavigateCloser =
-      moment(rangeStartMonth).year() !== moment(rangeEndMonth).year() ||
+      moment.utc(rangeStartMonth).year() !== moment.utc(rangeEndMonth).year() ||
       Math.abs(
-        moment(rangeStartMonth).month() - moment(rangeEndMonth).month(),
+        moment.utc(rangeStartMonth).month() - moment.utc(rangeEndMonth).month(),
       ) > 1;
 
     const handleApplyClick = () => {
       const {startDate, endDate} = dateRange;
-      const startDateUTC = startDate && addTimezone(startDate, timezone);
-      const endDateUTC = endDate && addTimezone(endDate, timezone);
+      const startDateUTC =
+        startDate && addTimezoneStartOfDay(startDate, timezone);
+      const endDateUTC = endDate && addTimezoneEndOfDay(endDate, timezone);
       onApply({
         startDate,
         endDate,
@@ -207,6 +216,7 @@ export const DateRangeWrapper: React$AbstractComponent<
       dateRange,
       minDate,
       maxDate,
+      today,
     };
 
     return (
@@ -225,10 +235,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               date={rangeStartMonth}
               setMonth={setRangeStartMonth}
               nextDisabled={!canNavigateCloser}
-              prevDisabled={moment(rangeStartMonth).isSameOrBefore(
-                minDate,
-                'M',
-              )}
+              prevDisabled={isSameOrBefore(rangeStartMonth, minDate, 'month')}
               minDate={minDate}
               maxDate={maxDate}
               onClickNext={() =>
@@ -250,7 +257,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               rangeEndMonth={rangeEndMonth}
               date={rangeEndMonth}
               setMonth={setRangeEndMonth}
-              nextDisabled={moment(rangeEndMonth).isSameOrAfter(maxDate, 'M')}
+              nextDisabled={isSameOrAfter(rangeEndMonth, maxDate, 'month')}
               prevDisabled={!canNavigateCloser}
               minDate={minDate}
               maxDate={maxDate}
@@ -280,7 +287,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               {!hideTimezone && (
                 <SimpleDropdown
                   options={getTimezones()}
-                  disabled={moment(minDate).isAfter(maxDate)}
+                  disabled={isAfter(minDate, maxDate)}
                   classNames={{
                     box: css.timezoneDropdown,
                   }}

package/lib/components/DateRangePicker/Day.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Day = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _moment = _interopRequireDefault(require("moment"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _Text = require("../Text");
@@ -54,9 +54,9 @@ const Day = _ref => {
     type: "ghost",
     color: getTextColor(disabled, filled),
     className: (0, _classify.default)(_DayModule.default.calendarRowItem, {
-      [_DayModule.default.calendarRowItemHover]: !disabled && (0, _momentTimezone.default)(date).isSame(hoverDay),
+      [_DayModule.default.calendarRowItemHover]: !disabled && _moment.default.utc(date).isSame(hoverDay),
       [_DayModule.default.calendarRowItemFilled]: !disabled && filled,
-      [_DayModule.default.calendarRowItemOutlined]: !disabled && outlined
+      [_DayModule.default.calendarRowItemOutlined]: outlined
     })
   }, value));
 };

package/lib/components/DateRangePicker/Day.js.flow

@@ -1,7 +1,7 @@
 // @flow strict
 import * as React from 'react';
 // $FlowFixMe[untyped-import]
-import moment from 'moment-timezone';
+import moment from 'moment';
 
 // $FlowFixMe[untyped-import]
 import classify from '../../utils/classify';
@@ -63,9 +63,10 @@ export const Day = ({
       type="ghost"
       color={getTextColor(disabled, filled)}
       className={classify(css.calendarRowItem, {
-        [css.calendarRowItemHover]: !disabled && moment(date).isSame(hoverDay),
+        [css.calendarRowItemHover]:
+          !disabled && moment.utc(date).isSame(hoverDay),
         [css.calendarRowItemFilled]: !disabled && filled,
-        [css.calendarRowItemOutlined]: !disabled && outlined,
+        [css.calendarRowItemOutlined]: outlined,
       })}
     >
       {value}

package/lib/utils/date-range-picker/date-range-picker.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.addTimezone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
+exports.wrangleMoment = exports.isValid = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isSameOrBefore = exports.isSameOrAfter = exports.isSame = exports.isEndOfRange = exports.isBetween = exports.isBefore = exports.isAfter = exports.inDateRange = exports.getValidDates = exports.getTimezones = exports.getSubtractedDate = exports.getMonthEndDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.checkRangeValidity = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = exports.DATE_RANGE_PICKER_ERRORS = void 0;
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _invariant = _interopRequireDefault(require("invariant"));
 var _lodash = require("lodash");
-var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _moment = _interopRequireDefault(require("moment"));
 var _timezones = require("./timezones");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -85,9 +85,9 @@ const DATE_RANGE_PICKER_ERRORS = Object.freeze({
 });
 exports.DATE_RANGE_PICKER_ERRORS = DATE_RANGE_PICKER_ERRORS;
 const checkRangeValidity = (rangeStart, rangeEnd, errorBody, onError) => {
-  const isRangeStartValid = (0, _momentTimezone.default)(rangeStart).isValid();
-  const isRangeEndValid = isRangeStartValid && (0, _momentTimezone.default)(rangeEnd).isValid();
-  const isRangeValid = isRangeEndValid && (0, _momentTimezone.default)(rangeStart).isSameOrBefore(rangeEnd);
+  const isRangeStartValid = isValid(rangeStart);
+  const isRangeEndValid = isRangeStartValid && isValid(rangeEnd);
+  const isRangeValid = isRangeEndValid && isSameOrBefore(rangeStart, rangeEnd);
   (0, _invariant.default)(isRangeValid, JSON.stringify(errorBody));
   if (!isRangeValid) {
     onError?.(errorBody);
@@ -101,23 +101,23 @@ const wrangleMoment = date => {
   } else if (!date) {
     return new Date();
   }
-  return date instanceof _momentTimezone.default ? date.toDate() : (0, _parseISO.default)(date);
+  return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
 };
 exports.wrangleMoment = wrangleMoment;
-const formatIsoDate = date => (0, _momentTimezone.default)(date).utc().format('YYYY-MM-DD');
+const formatIsoDate = date => _moment.default.utc(date).format('YYYY-MM-DD');
 exports.formatIsoDate = formatIsoDate;
 const isStartOfRange = (_ref, date) => {
   let {
     startDate
   } = _ref;
-  return Boolean(startDate) && (0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(startDate), 'd');
+  return Boolean(startDate) && _moment.default.utc(date).isSame(_moment.default.utc(startDate), 'd');
 };
 exports.isStartOfRange = isStartOfRange;
 const isEndOfRange = (_ref2, date) => {
   let {
     endDate
   } = _ref2;
-  return Boolean(endDate) && (0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(endDate), 'd');
+  return Boolean(endDate) && _moment.default.utc(date).isSame(_moment.default.utc(endDate), 'd');
 };
 exports.isEndOfRange = isEndOfRange;
 const inDateRange = (_ref3, date) => {
@@ -126,10 +126,10 @@ const inDateRange = (_ref3, date) => {
     endDate
   } = _ref3;
   if (startDate && endDate) {
-    const momentDay = (0, _momentTimezone.default)(date);
-    const momentStartDate = (0, _momentTimezone.default)(startDate);
-    const momentEndDate = (0, _momentTimezone.default)(endDate);
-    return momentDay.isBetween(momentStartDate, momentEndDate, null, '[]');
+    const momentDay = _moment.default.utc(date);
+    const momentStartDate = _moment.default.utc(startDate);
+    const momentEndDate = _moment.default.utc(endDate);
+    return isBetween(momentDay, momentStartDate, momentEndDate);
   }
   return false;
 };
@@ -140,21 +140,21 @@ const isStartDateEndDateSame = _ref4 => {
     endDate
   } = _ref4;
   if (startDate && endDate) {
-    return (0, _momentTimezone.default)(startDate).isSame((0, _momentTimezone.default)(endDate), 'd');
+    return _moment.default.utc(startDate).isSame(_moment.default.utc(endDate), 'd');
   }
   return false;
 };
 exports.isStartDateEndDateSame = isStartDateEndDateSame;
 const getMonthAndYear = date => {
-  const momentDate = date ? (0, _momentTimezone.default)(date) : (0, _momentTimezone.default)();
+  const momentDate = date ? _moment.default.utc(date) : _moment.default.utc();
   return [momentDate.month(), momentDate.year()];
 };
 const getDaysInMonth = date => {
-  const startWeek = (0, _momentTimezone.default)(date).startOf('month').startOf('week');
-  const endWeek = (0, _momentTimezone.default)(date).endOf('month').endOf('week');
+  const startWeek = _moment.default.utc(date).startOf('month').startOf('week');
+  const endWeek = _moment.default.utc(date).endOf('month').endOf('week');
   const days = [],
     current = startWeek;
-  while (current.isBefore(endWeek)) {
+  while (isBefore(current, endWeek)) {
     days.push(current.clone().format('YYYY-MM-DD'));
     current.add(1, 'd');
   }
@@ -164,7 +164,7 @@ const getDaysInMonth = date => {
   if (daysInChunks.length === 5) {
     const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
     const extraDays = [];
-    while (current.isSameOrBefore(nextWeek)) {
+    while (isSameOrBefore(current, nextWeek)) {
       extraDays.push(current.clone().format('YYYY-MM-DD'));
       current.add(1, 'd');
     }
@@ -173,14 +173,12 @@ const getDaysInMonth = date => {
   return daysInChunks;
 };
 exports.getDaysInMonth = getDaysInMonth;
-const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _momentTimezone.default)(date).add(addCount, timeUnit));
+const getAddedDate = (date, addCount, timeUnit) => formatIsoDate(_moment.default.utc(date).add(addCount, timeUnit));
 exports.getAddedDate = getAddedDate;
-const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _momentTimezone.default)(date).subtract(subtractCount, timeUnit));
+const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate(_moment.default.utc(date).subtract(subtractCount, timeUnit));
 exports.getSubtractedDate = getSubtractedDate;
-const getMonthEndDate = date => formatIsoDate((0, _momentTimezone.default)(date).endOf('M'));
+const getMonthEndDate = date => formatIsoDate(_moment.default.utc(date).endOf('M'));
 exports.getMonthEndDate = getMonthEndDate;
-const addTimezone = (date, timezone) => _momentTimezone.default.tz(date, timezone).startOf('d').utc().toISOString();
-exports.addTimezone = addTimezone;
 const getTimezones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
   menuOptions.push({
     key,
@@ -197,10 +195,10 @@ const generateAvailableYears = _ref5 => {
     rangeStartMonth,
     rangeEndMonth
   } = _ref5;
-  const rangeStartYear = (0, _momentTimezone.default)(rangeStartMonth).year();
-  const rangeEndYear = (0, _momentTimezone.default)(rangeEndMonth).year();
+  const rangeStartYear = _moment.default.utc(rangeStartMonth).year();
+  const rangeEndYear = _moment.default.utc(rangeEndMonth).year();
   const isWithinRange = year => marker === MARKERS.DATE_RANGE_START ? year <= rangeEndYear : year >= rangeStartYear;
-  return (0, _lodash.range)((0, _momentTimezone.default)(minDate).year(), (0, _momentTimezone.default)(maxDate).year() + 1).filter(year => isWithinRange(year)).map(year => ({
+  return (0, _lodash.range)(_moment.default.utc(minDate).year(), _moment.default.utc(maxDate).year() + 1).filter(year => isWithinRange(year)).map(year => ({
     key: year.toString(),
     label: year.toString()
   }));
@@ -242,15 +240,18 @@ const getAvailableMonths = _ref6 => {
   });
 };
 exports.getAvailableMonths = getAvailableMonths;
-const getValidDates = (selectedDateRange, minDate, maxDate, onError) => {
-  const today = formatIsoDate();
-  const localTimezone = _momentTimezone.default.tz.guess();
+const getValidDates = _ref7 => {
+  let {
+    selectedDateRange,
+    minDate,
+    maxDate,
+    today,
+    onError
+  } = _ref7;
   const {
     startDate,
-    endDate,
-    timezone = ''
+    endDate
   } = selectedDateRange;
-  const validTimezone = (0, _lodash.isEmpty)(timezone) ? localTimezone : timezone;
   const validMaxDate = maxDate && !(0, _lodash.isEmpty)(maxDate) ? maxDate : today;
   const validMinDate = minDate && !(0, _lodash.isEmpty)(minDate) ? minDate : getSubtractedDate(today, 8, 'y');
   const isRangeValid = (min, max, errorMessage) => checkRangeValidity(min, max, errorMessage, onError);
@@ -262,7 +263,6 @@ const getValidDates = (selectedDateRange, minDate, maxDate, onError) => {
   const isStartDateInvalid = isMinMaxRangeInvalid || (0, _lodash.isEmpty)(startDate) || !isRangeValid(validMinDate, startDate, DATE_RANGE_PICKER_ERRORS.START_DATE_EARLY);
   if (isMinMaxRangeInvalid || isStartDateInvalid) {
     return {
-      validTimezone,
       validDateRange: {
         startDate: null,
         endDate: null
@@ -271,7 +271,6 @@ const getValidDates = (selectedDateRange, minDate, maxDate, onError) => {
       validMaxDate
     };
   }
-
   // if endDate is defined then it should be before maxDate
   const isEndDateInvalid = (0, _lodash.isEmpty)(endDate) || !isRangeValid(endDate, validMaxDate, DATE_RANGE_PICKER_ERRORS.END_DATE_LATE);
 
@@ -279,7 +278,6 @@ const getValidDates = (selectedDateRange, minDate, maxDate, onError) => {
   const isStartEndRangeInvalid = isEndDateInvalid || !isRangeValid(startDate, endDate, DATE_RANGE_PICKER_ERRORS.START_DATE_LATE);
   if (isEndDateInvalid || isStartEndRangeInvalid) {
     return {
-      validTimezone,
       validDateRange: {
         startDate,
         endDate: null
@@ -289,7 +287,6 @@ const getValidDates = (selectedDateRange, minDate, maxDate, onError) => {
     };
   }
   return {
-    validTimezone,
     validDateRange: {
       startDate: (0, _lodash.isEmpty)(startDate) ? null : startDate,
       endDate: (0, _lodash.isEmpty)(endDate) ? null : endDate
@@ -298,4 +295,32 @@ const getValidDates = (selectedDateRange, minDate, maxDate, onError) => {
     validMaxDate
   };
 };
-exports.getValidDates = getValidDates;
+
+//  If date1 is same as date2 w.r.t the unit passed
+exports.getValidDates = getValidDates;
+const isSame = (date1, date2, unit) => _moment.default.utc(date1).isSame(_moment.default.utc(date2), unit);
+
+//  If date1 is before date2
+exports.isSame = isSame;
+const isBefore = (date1, date2) => _moment.default.utc(date1).isBefore(_moment.default.utc(date2));
+
+//  If date1 is after date2 w.r.t the unit passed
+exports.isBefore = isBefore;
+const isAfter = (date1, date2) => _moment.default.utc(date1).isAfter(_moment.default.utc(date2));
+
+//  If date1 is same or before date2 w.r.t the unit passed
+exports.isAfter = isAfter;
+const isSameOrBefore = (date1, date2, unit) => _moment.default.utc(date1).isSameOrBefore(_moment.default.utc(date2), unit);
+
+//  If date1 is same or after date2 w.r.t the unit passed
+exports.isSameOrBefore = isSameOrBefore;
+const isSameOrAfter = (date1, date2, unit) => _moment.default.utc(date1).isSameOrAfter(_moment.default.utc(date2), unit);
+
+//  If date is between startRange and endRange
+exports.isSameOrAfter = isSameOrAfter;
+const isBetween = (date, startRange, endRange) => _moment.default.utc(date).isBetween(_moment.default.utc(startRange), _moment.default.utc(endRange), null, '[]');
+
+// If the date results in a date that exists in the calendar
+exports.isBetween = isBetween;
+const isValid = date => _moment.default.utc(date).isValid();
+exports.isValid = isValid;

package/lib/utils/date-range-picker/date-range-picker.js.flow

@@ -5,7 +5,7 @@ import parseISO from 'date-fns/parseISO';
 import invariant from 'invariant';
 import {chunk, isEmpty, range} from 'lodash';
 // $FlowFixMe[untyped-import]
-import moment from 'moment-timezone';
+import moment from 'moment';
 import type {
   DateRange,
   DateRangePickerError,
@@ -67,10 +67,9 @@ export const checkRangeValidity = (
   errorBody: DateRangePickerError,
   onError?: (DateRangePickerError) => void,
 ): boolean => {
-  const isRangeStartValid = moment(rangeStart).isValid();
-  const isRangeEndValid = isRangeStartValid && moment(rangeEnd).isValid();
-  const isRangeValid =
-    isRangeEndValid && moment(rangeStart).isSameOrBefore(rangeEnd);
+  const isRangeStartValid = isValid(rangeStart);
+  const isRangeEndValid = isRangeStartValid && isValid(rangeEnd);
+  const isRangeValid = isRangeEndValid && isSameOrBefore(rangeStart, rangeEnd);
 
   invariant(isRangeValid, JSON.stringify(errorBody));
   if (!isRangeValid) {
@@ -90,23 +89,23 @@ export const wrangleMoment = (date?: string | Date): Date => {
 };
 
 export const formatIsoDate = (date?: string | Date): string =>
-  moment(date).utc().format('YYYY-MM-DD');
+  moment.utc(date).format('YYYY-MM-DD');
 
 export const isStartOfRange = ({startDate}: DateRange, date: string): boolean =>
-  Boolean(startDate) && moment(date).isSame(moment(startDate), 'd');
+  Boolean(startDate) && moment.utc(date).isSame(moment.utc(startDate), 'd');
 
 export const isEndOfRange = ({endDate}: DateRange, date: string): boolean =>
-  Boolean(endDate) && moment(date).isSame(moment(endDate), 'd');
+  Boolean(endDate) && moment.utc(date).isSame(moment.utc(endDate), 'd');
 
 export const inDateRange = (
   {startDate, endDate}: DateRange,
   date: string,
 ): boolean => {
   if (startDate && endDate) {
-    const momentDay = moment(date);
-    const momentStartDate = moment(startDate);
-    const momentEndDate = moment(endDate);
-    return momentDay.isBetween(momentStartDate, momentEndDate, null, '[]');
+    const momentDay = moment.utc(date);
+    const momentStartDate = moment.utc(startDate);
+    const momentEndDate = moment.utc(endDate);
+    return isBetween(momentDay, momentStartDate, momentEndDate);
   }
   return false;
 };
@@ -116,23 +115,23 @@ export const isStartDateEndDateSame = ({
   endDate,
 }: DateRange): boolean => {
   if (startDate && endDate) {
-    return moment(startDate).isSame(moment(endDate), 'd');
+    return moment.utc(startDate).isSame(moment.utc(endDate), 'd');
   }
   return false;
 };
 
 const getMonthAndYear = (date) => {
-  const momentDate = date ? moment(date) : moment();
+  const momentDate = date ? moment.utc(date) : moment.utc();
   return [momentDate.month(), momentDate.year()];
 };
 
 export const getDaysInMonth = (date: string): Array<Array<string>> => {
-  const startWeek = moment(date).startOf('month').startOf('week');
-  const endWeek = moment(date).endOf('month').endOf('week');
+  const startWeek = moment.utc(date).startOf('month').startOf('week');
+  const endWeek = moment.utc(date).endOf('month').endOf('week');
   const days = [],
     current = startWeek;
 
-  while (current.isBefore(endWeek)) {
+  while (isBefore(current, endWeek)) {
     days.push(current.clone().format('YYYY-MM-DD'));
     current.add(1, 'd');
   }
@@ -142,7 +141,7 @@ export const getDaysInMonth = (date: string): Array<Array<string>> => {
   if (daysInChunks.length === 5) {
     const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
     const extraDays = [];
-    while (current.isSameOrBefore(nextWeek)) {
+    while (isSameOrBefore(current, nextWeek)) {
       extraDays.push(current.clone().format('YYYY-MM-DD'));
       current.add(1, 'd');
     }
@@ -156,19 +155,16 @@ export const getAddedDate = (
   date: string,
   addCount: number,
   timeUnit: TimeUnit,
-): string => formatIsoDate(moment(date).add(addCount, timeUnit));
+): string => formatIsoDate(moment.utc(date).add(addCount, timeUnit));
 
 export const getSubtractedDate = (
   date: string,
   subtractCount: number,
   timeUnit: TimeUnit,
-): string => formatIsoDate(moment(date).subtract(subtractCount, timeUnit));
+): string => formatIsoDate(moment.utc(date).subtract(subtractCount, timeUnit));
 
 export const getMonthEndDate = (date: string): string =>
-  formatIsoDate(moment(date).endOf('M'));
-
-export const addTimezone = (date: string, timezone: string): string =>
-  moment.tz(date, timezone).startOf('d').utc().toISOString();
+  formatIsoDate(moment.utc(date).endOf('M'));
 
 export const getTimezones = (): Array<MenuOption> =>
   Object.keys(TIMEZONES).reduce((menuOptions, key) => {
@@ -192,15 +188,15 @@ export const generateAvailableYears = ({
   rangeStartMonth: string,
   rangeEndMonth: string,
 }): Array<MenuOption> => {
-  const rangeStartYear = moment(rangeStartMonth).year();
-  const rangeEndYear = moment(rangeEndMonth).year();
+  const rangeStartYear = moment.utc(rangeStartMonth).year();
+  const rangeEndYear = moment.utc(rangeEndMonth).year();
 
   const isWithinRange = (year: number) =>
     marker === MARKERS.DATE_RANGE_START
       ? year <= rangeEndYear
       : year >= rangeStartYear;
 
-  return range(moment(minDate).year(), moment(maxDate).year() + 1)
+  return range(moment.utc(minDate).year(), moment.utc(maxDate).year() + 1)
     .filter((year) => isWithinRange(year))
     .map((year) => ({
       key: year.toString(),
@@ -251,22 +247,25 @@ export const getAvailableMonths = ({
   });
 };
 
-export const getValidDates = (
+export const getValidDates = ({
+  selectedDateRange,
+  minDate,
+  maxDate,
+  today,
+  onError,
+}: {
   selectedDateRange: DateRangeWithTimezone,
   minDate?: ?string,
   maxDate?: ?string,
+  today: string,
   onError?: (DateRangePickerError) => void,
-): {
-  validTimezone: string,
+}): {
   validMinDate: string,
   validMaxDate: string,
   validDateRange: DateRange,
 } => {
-  const today = formatIsoDate();
-  const localTimezone = moment.tz.guess();
-  const {startDate, endDate, timezone = ''} = selectedDateRange;
+  const {startDate, endDate} = selectedDateRange;
 
-  const validTimezone = isEmpty(timezone) ? localTimezone : timezone;
   const validMaxDate = maxDate && !isEmpty(maxDate) ? maxDate : today;
   const validMinDate =
     minDate && !isEmpty(minDate) ? minDate : getSubtractedDate(today, 8, 'y');
@@ -293,13 +292,11 @@ export const getValidDates = (
 
   if (isMinMaxRangeInvalid || isStartDateInvalid) {
     return {
-      validTimezone,
       validDateRange: {startDate: null, endDate: null},
       validMinDate,
       validMaxDate,
     };
   }
-
   // if endDate is defined then it should be before maxDate
   const isEndDateInvalid =
     isEmpty(endDate) ||
@@ -316,7 +313,6 @@ export const getValidDates = (
 
   if (isEndDateInvalid || isStartEndRangeInvalid) {
     return {
-      validTimezone,
       validDateRange: {startDate, endDate: null},
       validMinDate,
       validMaxDate,
@@ -324,7 +320,6 @@ export const getValidDates = (
   }
 
   return {
-    validTimezone,
     validDateRange: {
       startDate: isEmpty(startDate) ? null : startDate,
       endDate: isEmpty(endDate) ? null : endDate,
@@ -333,3 +328,45 @@ export const getValidDates = (
     validMaxDate,
   };
 };
+
+//  If date1 is same as date2 w.r.t the unit passed
+export const isSame = (
+  date1: string,
+  date2: string,
+  unit: 'd' | 'month',
+): boolean => moment.utc(date1).isSame(moment.utc(date2), unit);
+
+//  If date1 is before date2
+export const isBefore = (date1: string, date2: string): boolean =>
+  moment.utc(date1).isBefore(moment.utc(date2));
+
+//  If date1 is after date2 w.r.t the unit passed
+export const isAfter = (date1: string, date2: string): boolean =>
+  moment.utc(date1).isAfter(moment.utc(date2));
+
+//  If date1 is same or before date2 w.r.t the unit passed
+export const isSameOrBefore = (
+  date1?: ?string,
+  date2?: ?string,
+  unit?: 'd' | 'month',
+): boolean => moment.utc(date1).isSameOrBefore(moment.utc(date2), unit);
+
+//  If date1 is same or after date2 w.r.t the unit passed
+export const isSameOrAfter = (
+  date1?: ?string,
+  date2?: ?string,
+  unit?: 'd' | 'month',
+): boolean => moment.utc(date1).isSameOrAfter(moment.utc(date2), unit);
+
+//  If date is between startRange and endRange
+export const isBetween = (
+  date: string,
+  startRange: string,
+  endRange: string,
+): boolean =>
+  moment
+    .utc(date)
+    .isBetween(moment.utc(startRange), moment.utc(endRange), null, '[]');
+
+// If the date results in a date that exists in the calendar
+export const isValid = (date?: ?string): boolean => moment.utc(date).isValid();

package/lib/utils/date-range-picker/timezones.js

@@ -3,7 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TIMEZONES = void 0;
+exports.getTodayInTimezone = exports.addTimezoneStartOfDay = exports.addTimezoneEndOfDay = exports.TIMEZONES = void 0;
+var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// $FlowFixMe[untyped-import]
 
 const TIMEZONES = {
   'Pacific/Niue': '(GMT-11:00) Niue',
@@ -259,4 +263,10 @@ const TIMEZONES = {
   'Pacific/Tongatapu': '(GMT+13:00) Tongatapu',
   'Pacific/Kiritimati': '(GMT+14:00) Kiritimati'
 };
-exports.TIMEZONES = TIMEZONES;
+exports.TIMEZONES = TIMEZONES;
+const addTimezoneStartOfDay = (date, timezone) => _momentTimezone.default.tz(date, timezone).startOf('d').toISOString();
+exports.addTimezoneStartOfDay = addTimezoneStartOfDay;
+const addTimezoneEndOfDay = (date, timezone) => _momentTimezone.default.tz(date, timezone).endOf('d').toISOString();
+exports.addTimezoneEndOfDay = addTimezoneEndOfDay;
+const getTodayInTimezone = timezone => _momentTimezone.default.tz(timezone).format('YYYY-MM-DD');
+exports.getTodayInTimezone = getTodayInTimezone;

package/lib/utils/date-range-picker/timezones.js.flow

@@ -1,5 +1,9 @@
 // @flow strict
 
+// $FlowFixMe[untyped-import]
+import moment from 'moment-timezone';
+
+
 export const TIMEZONES = {
   'Pacific/Niue': '(GMT-11:00) Niue',
   'Pacific/Pago_Pago': '(GMT-11:00) Pago Pago',
@@ -254,3 +258,12 @@ export const TIMEZONES = {
   'Pacific/Tongatapu': '(GMT+13:00) Tongatapu',
   'Pacific/Kiritimati': '(GMT+14:00) Kiritimati',
 };
+
+export const addTimezoneStartOfDay = (date: string, timezone: string): string =>
+  moment.tz(date, timezone).startOf('d').toISOString();
+
+export const addTimezoneEndOfDay = (date: string, timezone: string): string =>
+  moment.tz(date, timezone).endOf('d').toISOString();
+
+export const getTodayInTimezone = (timezone: string): string =>
+  moment.tz(timezone).format('YYYY-MM-DD');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.3.7",
+  "version": "0.3.8-beta.0",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {
@@ -49,6 +49,7 @@
     "highcharts": "^11.4.1",
     "highcharts-react-official": "^3.2.1",
     "lodash": "^4.17.21",
+    "moment": "^2.29.4",
     "moment-timezone": "^0.5.45",
     "react-dropzone": "^14.2.3",
     "react-window": "^1.8.10"