@zendeskgarden/react-datepickers 9.0.0-next.1 → 9.0.0-next.3

package/README.md

@@ -14,16 +14,16 @@ npm install react react-dom styled-components @zendeskgarden/react-theming
 
 ## Usage
 
-The `<Datepicker>` component allows users to select a
+The `<DatePicker>` component allows users to select a
 date with a dropdown selection or a variety of localizable
-text formats. Internally, the `<Datepicker>` uses [date-fns](https://date-fns.org/)
+text formats. Internally, the `<DatePicker>` uses [date-fns](https://date-fns.org/)
 for it's date calculations and the [Intl.DateTimeFormat utility](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat)
 for localization support.
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
 import { Field, Label, Input } from '@zendeskgarden/react-forms';
-import { Datepicker } from '@zendeskgarden/react-datepickers';
+import { DatePicker } from '@zendeskgarden/react-datepickers';
 
 /**
  * Place a `ThemeProvider` at the root of your React application
@@ -31,9 +31,9 @@ import { Datepicker } from '@zendeskgarden/react-datepickers';
 <ThemeProvider>
   <Field>
     <Label>Example datepicker</Label>
-    <Datepicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
+    <DatePicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
       <Input />
-    </Datepicker>
+    </DatePicker>
   </Field>
 </ThemeProvider>;
 ```

package/dist/index.cjs.js

@@ -9,9 +9,10 @@
 
 var React = require('react');
 var PropTypes = require('prop-types');
+var reactMergeRefs = require('react-merge-refs');
 var styled = require('styled-components');
-var reactPopper = require('react-popper');
-var containerUtilities = require('@zendeskgarden/container-utilities');
+var reactDom = require('@floating-ui/react-dom');
+var reactTheming = require('@zendeskgarden/react-theming');
 var startOfMonth = require('date-fns/startOfMonth');
 var endOfMonth = require('date-fns/endOfMonth');
 var startOfWeek = require('date-fns/startOfWeek');
@@ -24,11 +25,11 @@ var isSameMonth = require('date-fns/isSameMonth');
 var isBefore = require('date-fns/isBefore');
 var isAfter = require('date-fns/isAfter');
 var getDate = require('date-fns/getDate');
-var reactTheming = require('@zendeskgarden/react-theming');
 var addMonths = require('date-fns/addMonths');
 var subMonths = require('date-fns/subMonths');
 var isValid = require('date-fns/isValid');
 var parse = require('date-fns/parse');
+var containerUtilities = require('@zendeskgarden/container-utilities');
 var compareAsc = require('date-fns/compareAsc');
 var subDays = require('date-fns/subDays');
 
@@ -57,62 +58,12 @@ var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 const WEEK_STARTS_ON = [0, 1, 2, 3, 4, 5, 6];
-const SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
-const PLACEMENT = [...SHARED_PLACEMENT, 'end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom'];
-
-function getPopperPlacement(gardenPlacement) {
-  switch (gardenPlacement) {
-    case 'end':
-      return 'right';
-    case 'end-top':
-      return 'right-start';
-    case 'end-bottom':
-      return 'right-end';
-    case 'start':
-      return 'left';
-    case 'start-top':
-      return 'left-start';
-    case 'start-bottom':
-      return 'left-end';
-    default:
-      return gardenPlacement;
-  }
-}
-function getRtlPopperPlacement(gardenPlacement) {
-  const popperPlacement = getPopperPlacement(gardenPlacement);
-  switch (popperPlacement) {
-    case 'left':
-      return 'right';
-    case 'left-start':
-      return 'right-start';
-    case 'left-end':
-      return 'right-end';
-    case 'top-start':
-      return 'top-end';
-    case 'top-end':
-      return 'top-start';
-    case 'right':
-      return 'left';
-    case 'right-start':
-      return 'left-start';
-    case 'right-end':
-      return 'left-end';
-    case 'bottom-start':
-      return 'bottom-end';
-    case 'bottom-end':
-      return 'bottom-start';
-    default:
-      return popperPlacement;
-  }
-}
-function getMenuPosition(popperPlacement) {
-  return popperPlacement ? popperPlacement.split('-')[0] : 'bottom';
-}
+const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.1'
+  'data-garden-version': '9.0.0-next.3'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -127,7 +78,7 @@ const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
 })).withConfig({
   displayName: "StyledMenuWrapper",
   componentId: "sc-6fowoz-0"
-})(["", ";", ";"], props => reactTheming.menuStyles(getMenuPosition(props.placement), {
+})(["top:0;left:0;", ";", ";"], props => reactTheming.menuStyles(reactTheming.getMenuPosition(props.placement), {
   theme: props.theme,
   hidden: props.isHidden,
   margin: `${props.theme.space.base}px`,
@@ -150,13 +101,13 @@ const retrievePadding = _ref => {
   }
   return `margin: ${value}px;`;
 };
-const StyledDatepicker = styled__default.default.div.attrs({
+const StyledDatePicker = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$9
 }).withConfig({
-  displayName: "StyledDatepicker",
-  componentId: "sc-w3zqsp-0"
+  displayName: "StyledDatePicker",
+  componentId: "sc-15hwqzh-0"
 })(["direction:", ";", " background-color:", ";color:", ";", ";"], props => props.theme.rtl && 'rtl', retrievePadding, props => props.theme.colors.background, props => props.theme.colors.foreground, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
-StyledDatepicker.defaultProps = {
+StyledDatePicker.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
@@ -166,7 +117,7 @@ const StyledRangeCalendar = styled__default.default.div.attrs({
 }).withConfig({
   displayName: "StyledRangeCalendar",
   componentId: "sc-1og46sy-0"
-})(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatepicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
+})(["display:flex;overflow:auto;", "{margin:0;", "}", ";"], StyledDatePicker, props => props.theme.rtl ? `&:last-of-type {margin-right: ${props.theme.space.base * 5}px}` : `&:first-of-type {margin-right: ${props.theme.space.base * 5}px}`, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
 StyledRangeCalendar.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
@@ -351,9 +302,9 @@ StyledDay.defaultProps = {
   theme: reactTheming.DEFAULT_THEME
 };
 
-const DatepickerContext = React.createContext(undefined);
-const useDatepickerContext$1 = () => {
-  return React.useContext(DatepickerContext);
+const DatePickerContext = React.createContext(undefined);
+const useDatePickerContext$1 = () => {
+  return React.useContext(DatePickerContext);
 };
 
 const REGION_MAPPINGS = {
@@ -477,7 +428,7 @@ const MonthSelector = _ref => {
   const {
     state,
     dispatch
-  } = useDatepickerContext$1();
+  } = useDatePickerContext$1();
   const headerLabelFormatter = React.useCallback(date => {
     const formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -518,7 +469,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
   const {
     state,
     dispatch
-  } = useDatepickerContext$1();
+  } = useDatePickerContext$1();
   const preferredWeekStartsOn = weekStartsOn || getStartOfWeek(locale);
   const monthStartDate = startOfMonth.startOfMonth(state.previewDate);
   const monthEndDate = endOfMonth.endOfMonth(monthStartDate);
@@ -580,7 +531,7 @@ const Calendar$1 = React.forwardRef((_ref, ref) => {
       }
     }, formattedDayLabel));
   });
-  return React__namespace.default.createElement(StyledDatepicker, {
+  return React__namespace.default.createElement(StyledDatePicker, {
     ref: ref,
     isCompact: isCompact,
     onMouseDown: e => {
@@ -768,12 +719,76 @@ function retrieveInitialState$1(initialProps) {
   };
 }
 
-const Datepicker = React.forwardRef((props, calendarRef) => {
+const Input = React.forwardRef((_ref, ref) => {
+  let {
+    element,
+    dispatch,
+    state,
+    refKey
+  } = _ref;
+  const isInputMouseDownRef = React.useRef(false);
+  const handleBlur = () => {
+    dispatch({
+      type: 'CLOSE'
+    });
+  };
+  const handleChange = e => {
+    dispatch({
+      type: 'MANUALLY_UPDATE_INPUT',
+      value: e.target.value
+    });
+  };
+  const handleClick = () => {
+    if (isInputMouseDownRef.current && !state.isOpen) {
+      dispatch({
+        type: 'OPEN'
+      });
+    }
+  };
+  const handleKeyDown = e => {
+    switch (e.key) {
+      case containerUtilities.KEYS.ESCAPE:
+      case containerUtilities.KEYS.ENTER:
+        dispatch({
+          type: 'CLOSE'
+        });
+        break;
+      case containerUtilities.KEYS.UP:
+      case containerUtilities.KEYS.DOWN:
+      case containerUtilities.KEYS.SPACE:
+        dispatch({
+          type: 'OPEN'
+        });
+        break;
+    }
+  };
+  const handleMouseDown = () => {
+    isInputMouseDownRef.current = true;
+  };
+  const handleMouseUp = () => {
+    setTimeout(() => {
+      isInputMouseDownRef.current = false;
+    }, 0);
+  };
+  return React.cloneElement(element, {
+    [refKey]: ref,
+    onMouseDown: containerUtilities.composeEventHandlers(element.props.onMouseDown, handleMouseDown),
+    onMouseUp: containerUtilities.composeEventHandlers(element.props.onMouseUp, handleMouseUp),
+    onClick: containerUtilities.composeEventHandlers(element.props.onClick, handleClick),
+    onBlur: containerUtilities.composeEventHandlers(element.props.onBlur, handleBlur),
+    onChange: containerUtilities.composeEventHandlers(element.props.onChange, handleChange),
+    onKeyDown: containerUtilities.composeEventHandlers(element.props.onKeyDown, handleKeyDown),
+    autoComplete: 'off',
+    value: state.inputValue
+  });
+});
+Input.displayName = 'Input';
+
+const PLACEMENT_DEFAULT = 'bottom-start';
+const DatePicker = React.forwardRef((props, calendarRef) => {
   const {
     children,
-    placement,
-    popperModifiers,
-    eventsEnabled,
+    placement: _placement,
     zIndex,
     isAnimated,
     refKey,
@@ -788,7 +803,7 @@ const Datepicker = React.forwardRef((props, calendarRef) => {
     customParseDate,
     ...menuProps
   } = props;
-  const theme = React.useContext(styled.ThemeContext);
+  const theme = React.useContext(styled.ThemeContext) || reactTheming.DEFAULT_THEME;
   const memoizedReducer = React.useCallback(datepickerReducer({
     value,
     formatDate,
@@ -797,15 +812,39 @@ const Datepicker = React.forwardRef((props, calendarRef) => {
     onChange
   }), [value, formatDate, locale, onChange, customParseDate]);
   const [state, dispatch] = React.useReducer(memoizedReducer, retrieveInitialState$1(props));
-  const scheduleUpdateRef = React.useRef(undefined);
-  const inputRef = React.useRef(null);
-  const isInputMouseDownRef = React.useRef(false);
-  React.useEffect(() => {
-    if (state.isOpen && scheduleUpdateRef.current) {
-      scheduleUpdateRef.current();
+  const triggerRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
+  const [isVisible, setIsVisible] = React.useState(state.isOpen);
+  const contextValue = React.useMemo(() => ({
+    state,
+    dispatch
+  }), [state, dispatch]);
+  const [floatingPlacement] = reactTheming.getFloatingPlacements(theme, _placement === 'auto' ? PLACEMENT_DEFAULT : _placement);
+  const {
+    refs,
+    placement,
+    update,
+    floatingStyles: {
+      transform
     }
+  } = reactDom.useFloating({
+    elements: {
+      reference: triggerRef?.current,
+      floating: floatingRef?.current
+    },
+    placement: floatingPlacement,
+    middleware: [_placement === 'auto' ? reactDom.autoPlacement() : reactDom.flip()]
   });
-  const [isVisible, setIsVisible] = React.useState(state.isOpen);
+  const Child = React__namespace.default.Children.only(children);
+  React.useEffect(() => {
+    let cleanup;
+    if (state.isOpen && refs.reference.current && refs.floating.current) {
+      cleanup = reactDom.autoUpdate(refs.reference.current, refs.floating.current, update, {
+        elementResize: typeof ResizeObserver === 'function'
+      });
+    }
+    return () => cleanup && cleanup();
+  }, [state.isOpen, refs.reference, refs.floating, update]);
   React.useEffect(() => {
     let timeout;
     if (state.isOpen) {
@@ -828,102 +867,35 @@ const Datepicker = React.forwardRef((props, calendarRef) => {
       type: 'CONTROLLED_LOCALE_CHANGE'
     });
   }, [locale]);
-  const popperPlacement = theme.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
-  const contextValue = React.useMemo(() => ({
-    state,
-    dispatch
-  }), [state, dispatch]);
-  return React__namespace.default.createElement(DatepickerContext.Provider, {
+  return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(Input, {
+    element: Child,
+    dispatch: dispatch,
+    state: state,
+    refKey: refKey,
+    ref: reactMergeRefs.mergeRefs([triggerRef, Child.ref ? Child.ref : null])
+  }), React__namespace.default.createElement(DatePickerContext.Provider, {
     value: contextValue
-  }, React__namespace.default.createElement(reactPopper.Manager, null, React__namespace.default.createElement(reactPopper.Reference, null, _ref => {
-    let {
-      ref
-    } = _ref;
-    const childElement = React__namespace.default.Children.only(children);
-    return React__namespace.default.cloneElement(childElement, {
-      [refKey]: refValue => {
-        ref(refValue);
-        inputRef.current = refValue;
-      },
-      onMouseDown: containerUtilities.composeEventHandlers(childElement.props.onMouseDown, () => {
-        isInputMouseDownRef.current = true;
-      }),
-      onMouseUp: containerUtilities.composeEventHandlers(childElement.props.onMouseUp, () => {
-        setTimeout(() => {
-          isInputMouseDownRef.current = false;
-        }, 0);
-      }),
-      onClick: containerUtilities.composeEventHandlers(childElement.props.onClick, () => {
-        if (isInputMouseDownRef.current && !state.isOpen) {
-          dispatch({
-            type: 'OPEN'
-          });
-        }
-      }),
-      onBlur: containerUtilities.composeEventHandlers(childElement.props.onBlur, () => {
-        dispatch({
-          type: 'CLOSE'
-        });
-      }),
-      onChange: containerUtilities.composeEventHandlers(childElement.props.onChange, e => {
-        dispatch({
-          type: 'MANUALLY_UPDATE_INPUT',
-          value: e.target.value
-        });
-      }),
-      onKeyDown: containerUtilities.composeEventHandlers(childElement.props.onKeyDown, e => {
-        switch (e.key) {
-          case containerUtilities.KEYS.ESCAPE:
-          case containerUtilities.KEYS.ENTER:
-            dispatch({
-              type: 'CLOSE'
-            });
-            break;
-          case containerUtilities.KEYS.UP:
-          case containerUtilities.KEYS.DOWN:
-          case containerUtilities.KEYS.SPACE:
-            dispatch({
-              type: 'OPEN'
-            });
-            break;
-        }
-      }),
-      autoComplete: 'off',
-      value: state.inputValue
-    });
-  }), React__namespace.default.createElement(reactPopper.Popper, {
-    placement: popperPlacement,
-    modifiers: popperModifiers
-    ,
-    eventsEnabled: state.isOpen && eventsEnabled
-  }, _ref2 => {
-    let {
-      ref,
-      style,
-      scheduleUpdate,
-      placement: currentPlacement
-    } = _ref2;
-    scheduleUpdateRef.current = scheduleUpdate;
-    return React__namespace.default.createElement(StyledMenuWrapper, {
-      ref: ref,
-      style: style,
-      isHidden: !state.isOpen,
-      isAnimated: isAnimated && (state.isOpen || isVisible),
-      placement: currentPlacement,
-      zIndex: zIndex
-    }, (state.isOpen || isVisible) && React__namespace.default.createElement(StyledMenu, menuProps, React__namespace.default.createElement(Calendar$1, {
-      ref: calendarRef,
-      isCompact: isCompact,
-      value: value,
-      minValue: minValue,
-      maxValue: maxValue,
-      locale: locale,
-      weekStartsOn: weekStartsOn
-    })));
-  })));
+  }, React__namespace.default.createElement(StyledMenuWrapper, {
+    ref: floatingRef,
+    style: {
+      transform
+    },
+    isHidden: !state.isOpen,
+    isAnimated: isAnimated && (state.isOpen || isVisible),
+    placement: placement,
+    zIndex: zIndex
+  }, (state.isOpen || isVisible) && React__namespace.default.createElement(StyledMenu, menuProps, React__namespace.default.createElement(Calendar$1, {
+    ref: calendarRef,
+    isCompact: isCompact,
+    value: value,
+    minValue: minValue,
+    maxValue: maxValue,
+    locale: locale,
+    weekStartsOn: weekStartsOn
+  })))));
 });
-Datepicker.displayName = 'Datepicker';
-Datepicker.propTypes = {
+DatePicker.displayName = 'DatePicker';
+DatePicker.propTypes = {
   value: PropTypes__default.default.any,
   onChange: PropTypes__default.default.any,
   formatDate: PropTypes__default.default.func,
@@ -935,16 +907,13 @@ Datepicker.propTypes = {
   customParseDate: PropTypes__default.default.any,
   refKey: PropTypes__default.default.string,
   placement: PropTypes__default.default.oneOf(PLACEMENT),
-  popperModifiers: PropTypes__default.default.any,
   isAnimated: PropTypes__default.default.bool,
-  eventsEnabled: PropTypes__default.default.bool,
   zIndex: PropTypes__default.default.number
 };
-Datepicker.defaultProps = {
-  placement: 'bottom-start',
+DatePicker.defaultProps = {
+  placement: PLACEMENT_DEFAULT,
   refKey: 'ref',
   isAnimated: true,
-  eventsEnabled: true,
   zIndex: 1000,
   locale: 'en-US'
 };
@@ -1250,9 +1219,9 @@ function retrieveInitialState(initialProps) {
   };
 }
 
-const DatepickerRangeContext = React.createContext(undefined);
-const useDatepickerContext = () => {
-  return React.useContext(DatepickerRangeContext);
+const DatePickerRangeContext = React.createContext(undefined);
+const useDatePickerContext = () => {
+  return React.useContext(DatePickerRangeContext);
 };
 
 const Start = props => {
@@ -1264,7 +1233,7 @@ const Start = props => {
     endValue,
     startInputRef,
     customParseDate
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   const onChangeCallback = React.useCallback(e => {
     dispatch({
       type: 'START_INPUT_ONCHANGE',
@@ -1318,7 +1287,7 @@ const Start = props => {
     onBlur: containerUtilities.composeEventHandlers(childElement.props.onBlur, onBlurCallback)
   });
 };
-Start.displayName = 'DatepickerRange.Start';
+Start.displayName = 'DatePickerRange.Start';
 
 const End = props => {
   const {
@@ -1329,7 +1298,7 @@ const End = props => {
     endValue,
     endInputRef,
     customParseDate
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   const onChangeCallback = React.useCallback(e => {
     dispatch({
       type: 'END_INPUT_ONCHANGE',
@@ -1383,7 +1352,7 @@ const End = props => {
     onBlur: containerUtilities.composeEventHandlers(childElement.props.onBlur, onBlurCallback)
   });
 };
-End.displayName = 'DatepickerRange.End';
+End.displayName = 'DatePickerRange.End';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -1417,7 +1386,7 @@ const Month = React.forwardRef((_ref, ref) => {
     startValue,
     endValue,
     onChange
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   const headerLabelFormatter = React.useCallback(date => {
     const formatter = new Intl.DateTimeFormat(locale, {
       month: 'long',
@@ -1594,7 +1563,7 @@ const Month = React.forwardRef((_ref, ref) => {
       }
     }, formattedDayLabel));
   });
-  return React__namespace.default.createElement(StyledDatepicker, {
+  return React__namespace.default.createElement(StyledDatePicker, {
     ref: ref,
     isCompact: isCompact,
     onMouseDown: e => {
@@ -1635,11 +1604,11 @@ Month.displayName = 'Month';
 const Calendar = React.forwardRef((props, ref) => {
   const {
     state
-  } = useDatepickerContext();
+  } = useDatePickerContext();
   return React__namespace.default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.1'
+    "data-garden-version": '9.0.0-next.3'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true
@@ -1648,9 +1617,9 @@ const Calendar = React.forwardRef((props, ref) => {
     isPreviousHidden: true
   }));
 });
-Calendar.displayName = 'DatepickerRange.Calendar';
+Calendar.displayName = 'DatePickerRange.Calendar';
 
-const DatepickerRangeComponent = props => {
+const DatePickerRangeComponent = props => {
   const {
     startValue,
     locale,
@@ -1711,11 +1680,11 @@ const DatepickerRangeComponent = props => {
     endInputRef,
     customParseDate
   }), [state, dispatch, isCompact, locale, weekStartsOn, minValue, maxValue, startValue, endValue, onChange, startInputRef, endInputRef, customParseDate]);
-  return React__namespace.default.createElement(DatepickerRangeContext.Provider, {
+  return React__namespace.default.createElement(DatePickerRangeContext.Provider, {
     value: value
   }, children);
 };
-DatepickerRangeComponent.propTypes = {
+DatePickerRangeComponent.propTypes = {
   locale: PropTypes__default.default.string,
   weekStartsOn: PropTypes__default.default.number,
   startValue: PropTypes__default.default.instanceOf(Date),
@@ -1727,14 +1696,14 @@ DatepickerRangeComponent.propTypes = {
   customParseDate: PropTypes__default.default.func,
   isCompact: PropTypes__default.default.bool
 };
-DatepickerRangeComponent.defaultProps = {
+DatePickerRangeComponent.defaultProps = {
   locale: 'en-US',
   isCompact: false
 };
-const DatepickerRange = DatepickerRangeComponent;
-DatepickerRange.Calendar = Calendar;
-DatepickerRange.End = End;
-DatepickerRange.Start = Start;
+const DatePickerRange = DatePickerRangeComponent;
+DatePickerRange.Calendar = Calendar;
+DatePickerRange.End = End;
+DatePickerRange.Start = Start;
 
-exports.Datepicker = Datepicker;
-exports.DatepickerRange = DatepickerRange;
+exports.DatePicker = DatePicker;
+exports.DatePickerRange = DatePickerRange;