amis 1.7.0 → 1.8.0-beta.13

package/src/components/DateRangePicker.tsx

@@ -7,7 +7,6 @@
 import React from 'react';
 import moment from 'moment';
 import {findDOMNode} from 'react-dom';
-import cx from 'classnames';
 import {Icon} from './icons';
 import Overlay from './Overlay';
 import {ShortCuts, ShortCutDateRange} from './DatePicker';
@@ -19,11 +18,13 @@ import {PlainObject} from '../types';
 import {isMobile, noop, ucFirst} from '../utils/helper';
 import {LocaleProps, localeable} from '../locale';
 import CalendarMobile from './CalendarMobile';
+import Input from './Input';
 
 export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   className?: string;
   popoverClassName?: string;
-  placeholder?: string;
+  startPlaceholder?: string;
+  endPlaceholder?: string;
   theme?: any;
   format: string;
   utc?: boolean;
@@ -52,6 +53,7 @@ export interface DateRangePickerProps extends ThemeProps, LocaleProps {
   useMobileUI?: boolean;
   onFocus?: Function;
   onBlur?: Function;
+  type?: string;
 }
 
 export interface DateRangePickerState {
@@ -59,6 +61,9 @@ export interface DateRangePickerState {
   isFocused: boolean;
   startDate?: moment.Moment;
   endDate?: moment.Moment;
+  editState?: 'start' | 'end'; // 编辑开始时间还是结束时间
+  startInputValue?: string;
+  endInputValue?: string;
 }
 
 export const availableRanges: {[propName: string]: any} = {
@@ -82,8 +87,19 @@ export const availableRanges: {[propName: string]: any} = {
     }
   },
 
-  '1dayago': {
-    label: 'DateRange.1dayago',
+  'tomorrow': {
+    label: 'Date.tomorrow',
+    startDate: (now: moment.Moment) => {
+      return now.add(1, 'days').startOf('day');
+    },
+    endDate: (now: moment.Moment) => {
+      return now.add(1, 'days').endOf('day');
+    }
+  },
+
+  // 兼容一下错误的用法
+  '1daysago': {
+    label: 'DateRange.1daysago',
     startDate: (now: moment.Moment) => {
       return now.add(-1, 'days');
     },
@@ -203,12 +219,184 @@ export const availableRanges: {[propName: string]: any} = {
   }
 };
 
+export const advancedRanges = [
+  {
+    regexp: /^(\d+)hoursago$/,
+    resolve: (__: any, _: string, hours: string) => {
+      return {
+        label: __('DateRange.hoursago', {hours}),
+        startDate: (now: moment.Moment) => {
+          return now.add(-hours, 'hours').startOf('hour');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(-1, 'hours').endOf('hours');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)hourslater$/,
+    resolve: (__: any, _: string, hours: string) => {
+      return {
+        label: __('DateRange.hourslater', {hours}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('hour');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(hours, 'hours').endOf('hour');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)daysago$/,
+    resolve: (__: any, _: string, days: string) => {
+      return {
+        label: __('DateRange.daysago', {days}),
+        startDate: (now: moment.Moment) => {
+          return now.add(-days, 'days').startOf('day');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)dayslater$/,
+    resolve: (__: any, _: string, days: string) => {
+      return {
+        label: __('DateRange.dayslater', {days}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('day');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.add(days, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)weeksago$/,
+    resolve: (__: any, _: string, weeks: string) => {
+      return {
+        label: __('DateRange.weeksago', {weeks}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('week').add(-weeks, 'weeks');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('week').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)weekslater$/,
+    resolve: (__: any, _: string, weeks: string) => {
+      return {
+        label: __('DateRange.weekslater', {weeks}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('week');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('week').add(weeks, 'weeks').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)monthsago$/,
+    resolve: (__: any, _: string, months: string) => {
+      return {
+        label: __('DateRange.monthsago', {months}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('months').add(-months, 'months');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('month').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)monthslater$/,
+    resolve: (__: any, _: string, months: string) => {
+      return {
+        label: __('DateRange.monthslater', {months}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('month');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('month').add(months, 'months').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)quartersago$/,
+    resolve: (__: any, _: string, quarters: string) => {
+      return {
+        label: __('DateRange.quartersago', {quarters}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('quarters').add(-quarters, 'quarters');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('quarter').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)quarterslater$/,
+    resolve: (__: any, _: string, quarters: string) => {
+      return {
+        label: __('DateRange.quarterslater', {quarters}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('quarter');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('quarter').add(quarters, 'quarters').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)yearsago$/,
+    resolve: (__: any, _: string, years: string) => {
+      return {
+        label: __('DateRange.yearsago', {years}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('years').add(-years, 'years');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('year').add(-1, 'days').endOf('day');
+        }
+      };
+    }
+  },
+  {
+    regexp: /^(\d+)yearslater$/,
+    resolve: (__: any, _: string, years: string) => {
+      return {
+        label: __('DateRange.yearslater', {years}),
+        startDate: (now: moment.Moment) => {
+          return now.startOf('year');
+        },
+        endDate: (now: moment.Moment) => {
+          return now.startOf('year').add(years, 'years').endOf('day');
+        }
+      };
+    }
+  }
+];
+
 export class DateRangePicker extends React.Component<
   DateRangePickerProps,
   DateRangePickerState
 > {
   static defaultProps = {
-    placeholder: 'DateRange.placeholder',
+    startPlaceholder: 'Calendar.startPick',
+    endPlaceholder: 'Calendar.endPick',
     format: 'X',
     inputFormat: 'YYYY-MM-DD',
     joinValues: true,
@@ -272,14 +460,29 @@ export class DateRangePicker extends React.Component<
   }
 
   dom: React.RefObject<HTMLDivElement>;
+  calendarRef: React.RefObject<HTMLDivElement>;
   nextMonth = moment().add(1, 'months');
 
+  startInputRef: React.RefObject<HTMLInputElement>;
+  endInputRef: React.RefObject<HTMLInputElement>;
+
   constructor(props: DateRangePickerProps) {
     super(props);
 
+    this.startInputRef = React.createRef();
+    this.endInputRef = React.createRef();
+    this.calendarRef = React.createRef();
     this.open = this.open.bind(this);
+    this.openStart = this.openStart.bind(this);
+    this.openEnd = this.openEnd.bind(this);
     this.close = this.close.bind(this);
-    this.handleSelectChange = this.handleSelectChange.bind(this);
+    this.startInputChange = this.startInputChange.bind(this);
+    this.endInputChange = this.endInputChange.bind(this);
+    this.handleDateChange = this.handleDateChange.bind(this);
+    this.handleStartDateChange = this.handleStartDateChange.bind(this);
+    this.handeleEndDateChange = this.handeleEndDateChange.bind(this);
+    this.handleTimeStartChange = this.handleTimeStartChange.bind(this);
+    this.handleTimeEndChange = this.handleTimeEndChange.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleBlur = this.handleBlur.bind(this);
     this.checkStartIsValidDate = this.checkStartIsValidDate.bind(this);
@@ -293,22 +496,63 @@ export class DateRangePicker extends React.Component<
     this.renderDay = this.renderDay.bind(this);
     this.renderQuarter = this.renderQuarter.bind(this);
     this.handleMobileChange = this.handleMobileChange.bind(this);
-    const {format, joinValues, delimiter, value} = this.props;
-
+    this.handleOutClick = this.handleOutClick.bind(this);
+    const {format, joinValues, delimiter, value, inputFormat} = this.props;
+    const {startDate, endDate} = DateRangePicker.unFormatValue(
+      value,
+      format,
+      joinValues,
+      delimiter
+    );
     this.state = {
       isOpened: false,
       isFocused: false,
-      ...DateRangePicker.unFormatValue(value, format, joinValues, delimiter)
+      startDate,
+      endDate,
+      startInputValue: startDate?.format(inputFormat),
+      endInputValue: endDate?.format(inputFormat)
     };
   }
+  componentDidMount() {
+    document.body.addEventListener('click', this.handleOutClick, true);
+  }
+
+  componentWillUnmount() {
+    document.body.removeEventListener('click', this.handleOutClick, true);
+  }
+
+  handleOutClick(e: Event) {
+    if (
+      !e.target ||
+      !this.dom.current ||
+      this.dom.current.contains(e.target as HTMLElement) ||
+      !this.calendarRef.current ||
+      this.calendarRef.current.contains(e.target as HTMLElement)
+    ) {
+      return;
+    }
+    if (this.state.isOpened) {
+      e.preventDefault();
+      this.close();
+    }
+  }
 
   componentDidUpdate(prevProps: DateRangePickerProps) {
     const props = this.props;
-    const {value, format, joinValues, delimiter} = props;
+    const {value, format, joinValues, inputFormat, delimiter} = props;
 
     if (prevProps.value !== value) {
+      const {startDate, endDate} = DateRangePicker.unFormatValue(
+        value,
+        format,
+        joinValues,
+        delimiter
+      );
       this.setState({
-        ...DateRangePicker.unFormatValue(value, format, joinValues, delimiter)
+        startDate,
+        endDate,
+        startInputValue: startDate?.format(inputFormat),
+        endInputValue: endDate?.format(inputFormat)
       });
     }
   }
@@ -355,10 +599,31 @@ export class DateRangePicker extends React.Component<
     });
   }
 
+  openStart() {
+    if (this.props.disabled) {
+      return;
+    }
+    this.setState({
+      isOpened: true,
+      editState: 'start'
+    });
+  }
+
+  openEnd() {
+    if (this.props.disabled) {
+      return;
+    }
+    this.setState({
+      isOpened: true,
+      editState: 'end'
+    });
+  }
+
   close() {
     this.setState(
       {
-        isOpened: false
+        isOpened: false,
+        editState: undefined
       },
       this.blur
     );
@@ -428,55 +693,223 @@ export class DateRangePicker extends React.Component<
     return value;
   }
 
-  handleSelectChange(newValue: moment.Moment) {
-    const {embed, timeFormat, minDuration, maxDuration, minDate} = this.props;
+  handleDateChange(newValue: moment.Moment) {
+    let {editState} = this.state;
+    if (editState === 'start') {
+      this.handleStartDateChange(newValue);
+    } else if (editState === 'end') {
+      this.handeleEndDateChange(newValue);
+    }
+  }
+
+  handleStartDateChange(newValue: moment.Moment) {
+    const {timeFormat, minDate, inputFormat, type} = this.props;
+    let {startDate} = this.state;
+    if (minDate && newValue.isBefore(minDate)) {
+      newValue = minDate;
+    }
+    const date = this.filterDate(
+      newValue,
+      startDate || minDate,
+      timeFormat,
+      'start'
+    );
+    const newState = {
+      startDate: date,
+      startInputValue: date.format(inputFormat)
+    } as any;
+    // 这些没有时间的选择点第一次后第二次就是选结束时间
+    if (
+      type === 'input-date-range' ||
+      type === 'input-year-range' ||
+      type === 'input-quarter-range'
+    ) {
+      newState.editState = 'end';
+    }
+    this.setState(newState);
+  }
+
+  handeleEndDateChange(newValue: moment.Moment) {
+    const {embed, timeFormat, inputFormat} = this.props;
     let {startDate, endDate} = this.state;
+    newValue = this.getEndDateByDuration(newValue);
 
-    // 第一次点击只标记起始时间，或者点击了开始时间前面的时间
-    if (this.isFirstClick || newValue.isBefore(startDate)) {
-      // 这种情况说明第二次点击点击了前面的时间，这时要标记为第二次点击
-      if (newValue.isBefore(startDate)) {
-        this.isFirstClick = true;
-      }
-      if (minDate && newValue.isBefore(minDate)) {
-        newValue = minDate;
-      }
+    // 如果结束时间在前面，需要清空开始时间
+    if (newValue.isBefore(startDate)) {
       this.setState({
-        startDate: this.filterDate(
-          newValue,
-          startDate || minDate,
-          timeFormat,
-          'start'
-        ),
-        endDate: undefined
+        startDate: undefined,
+        startInputValue: ''
       });
-    } else {
-      // 第二次点击作为结束时间
-      if (!startDate) {
-        // 不大可能，但只能作为开始时间了
-        startDate = newValue;
-      }
+    }
 
-      if (minDuration && newValue.isAfter(startDate.clone().add(minDuration))) {
-        newValue = startDate.clone().add(minDuration);
+    const date = this.filterDate(newValue, endDate, timeFormat, 'end');
+    this.setState(
+      {
+        endDate: date,
+        endInputValue: date.format(inputFormat)
+      },
+      () => {
+        embed && this.confirm();
       }
-      if (
-        maxDuration &&
-        newValue.isBefore(startDate.clone().add(maxDuration))
-      ) {
-        newValue = startDate.clone().add(maxDuration);
+    );
+  }
+
+  // 手动控制输入时间
+  startInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {onChange, inputFormat, format, utc} = this.props;
+    const value = e.currentTarget.value;
+    this.setState({startInputValue: value});
+    if (value === '') {
+      onChange('');
+    } else {
+      let newDate = this.getStartDateByDuration(moment(value, inputFormat));
+      this.setState({startDate: newDate});
+    }
+  }
+
+  endInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {onChange, inputFormat, format, utc} = this.props;
+    const value = e.currentTarget.value;
+    this.setState({endInputValue: value});
+    if (value === '') {
+      onChange('');
+    } else {
+      let newDate = this.getEndDateByDuration(moment(value, inputFormat));
+      this.setState({endDate: newDate});
+    }
+  }
+
+  // 根据 duration 修复结束时间
+  getEndDateByDuration(newValue: moment.Moment) {
+    const {minDuration, maxDuration, type} = this.props;
+    let {startDate, endDate, editState} = this.state;
+    if (!startDate) {
+      return newValue;
+    }
+
+    // 时间范围必须统一成同一天，不然会不一致
+    if (type === 'input-time-range' && startDate) {
+      newValue.set({
+        year: startDate.year(),
+        month: startDate.month(),
+        date: startDate.date()
+      });
+    }
+
+    if (minDuration && newValue.isBefore(startDate.clone().add(minDuration))) {
+      newValue = startDate.clone().add(minDuration);
+    }
+
+    if (maxDuration && newValue.isAfter(startDate.clone().add(maxDuration))) {
+      newValue = startDate.clone().add(maxDuration);
+    }
+
+    return newValue;
+  }
+
+  // 根据 duration 修复起始时间
+  getStartDateByDuration(newValue: moment.Moment) {
+    const {minDuration, maxDuration, type} = this.props;
+    let {endDate, editState} = this.state;
+    if (!endDate) {
+      return newValue;
+    }
+    // 时间范围必须统一成同一天，不然会不一致
+    if (type === 'input-time-range' && endDate) {
+      newValue.set({
+        year: endDate.year(),
+        month: endDate.month(),
+        date: endDate.date()
+      });
+    }
+
+    if (
+      minDuration &&
+      newValue.isBefore(endDate.clone().subtract(minDuration))
+    ) {
+      newValue = endDate.clone().subtract(minDuration);
+    }
+
+    if (
+      maxDuration &&
+      newValue.isAfter(endDate.clone().subtract(maxDuration))
+    ) {
+      newValue = endDate.clone().subtract(maxDuration);
+    }
+
+    return newValue;
+  }
+
+  // 主要用于处理时间的情况
+  handleTimeStartChange(newValue: moment.Moment) {
+    const {embed, timeFormat, inputFormat, minDuration, maxDuration, minDate} =
+      this.props;
+    const {startDate, endDate} = this.state;
+
+    // 时间范围必须统一成同一天，不然会不一致
+    if (endDate) {
+      newValue.set({
+        year: endDate.year(),
+        month: endDate.month(),
+        date: endDate.date()
+      });
+    }
+
+    if (minDate && newValue && newValue.isBefore(minDate, 'second')) {
+      newValue = minDate;
+    }
+
+    this.setState(
+      {
+        startDate: newValue,
+        startInputValue: newValue.format(inputFormat)
+      },
+      () => {
+        embed && this.confirm();
       }
-      this.setState(
-        {
-          endDate: this.filterDate(newValue, endDate, timeFormat, 'end')
-        },
-        () => {
-          embed && this.confirm();
-        }
-      );
+    );
+  }
+
+  handleTimeEndChange(newValue: moment.Moment) {
+    const {embed, timeFormat, inputFormat, minDuration, maxDuration, maxDate} =
+      this.props;
+    const {startDate, endDate} = this.state;
+    if (startDate) {
+      newValue.set({
+        year: startDate.year(),
+        month: startDate.month(),
+        date: startDate.date()
+      });
+    }
+
+    if (maxDate && newValue && newValue.isAfter(maxDate, 'second')) {
+      newValue = maxDate;
+    }
+
+    if (
+      startDate &&
+      minDuration &&
+      newValue.isAfter(startDate.clone().add(minDuration))
+    ) {
+      newValue = startDate.clone().add(minDuration);
+    }
+    if (
+      startDate &&
+      maxDuration &&
+      newValue.isBefore(startDate.clone().add(maxDuration))
+    ) {
+      newValue = startDate.clone().add(maxDuration);
     }
 
-    this.isFirstClick = !this.isFirstClick;
+    this.setState(
+      {
+        endDate: newValue,
+        endInputValue: newValue.format(inputFormat)
+      },
+      () => {
+        embed && this.confirm();
+      }
+    );
   }
 
   handleMobileChange(data: any, callback?: () => void) {
@@ -528,8 +961,20 @@ export class DateRangePicker extends React.Component<
           }
           let range: PlainObject = {};
           if (typeof item === 'string') {
-            range = availableRanges[item];
-            range.key = item;
+            if (availableRanges[item]) {
+              range = availableRanges[item];
+              range.key = item;
+            } else {
+              // 通过正则尝试匹配
+              for (let i = 0, len = advancedRanges.length; i < len; i++) {
+                let value = advancedRanges[i];
+                const m = value.regexp.exec(item);
+                if (m) {
+                  range = value.resolve.apply(item, [__, ...m]);
+                  range.key = item;
+                }
+              }
+            }
           } else if (
             (item as ShortCutDateRange).startDate &&
             (item as ShortCutDateRange).endDate
@@ -558,7 +1003,7 @@ export class DateRangePicker extends React.Component<
     e.preventDefault();
     e.stopPropagation();
     const {resetValue, onChange} = this.props;
-
+    this.setState({startInputValue: '', endInputValue: ''});
     onChange(resetValue);
   }
 
@@ -672,19 +1117,28 @@ export class DateRangePicker extends React.Component<
       ranges,
       locale,
       embed,
+      type,
       viewMode = 'days'
     } = this.props;
     const __ = this.props.translate;
 
     const {startDate, endDate} = this.state;
+
     return (
-      <div className={`${ns}DateRangePicker-wrap`}>
+      <div className={`${ns}DateRangePicker-wrap`} ref={this.calendarRef}>
         {this.renderRanges(ranges)}
-
         <Calendar
           className={`${ns}DateRangePicker-start`}
           value={startDate}
-          onChange={this.handleSelectChange}
+          // 区分的原因是 time-range 左侧就只能选起始时间，而其它都能在左侧同时同时选择起始和结束
+          // TODO: 后续得把 time-range 代码拆分出来
+          onChange={
+            type === 'input-datetime-range'
+              ? this.handleStartDateChange
+              : viewMode === 'time'
+              ? this.handleTimeStartChange
+              : this.handleDateChange
+          }
           requiredConfirm={false}
           dateFormat={dateFormat}
           inputFormat={inputFormat}
@@ -697,11 +1151,16 @@ export class DateRangePicker extends React.Component<
           renderQuarter={this.renderQuarter}
           locale={locale}
         />
-
         <Calendar
           className={`${ns}DateRangePicker-end`}
           value={endDate}
-          onChange={this.handleSelectChange}
+          onChange={
+            type === 'input-datetime-range'
+              ? this.handeleEndDateChange
+              : viewMode === 'time'
+              ? this.handleTimeEndChange
+              : this.handleDateChange
+          }
           requiredConfirm={false}
           dateFormat={dateFormat}
           inputFormat={inputFormat}
@@ -724,7 +1183,10 @@ export class DateRangePicker extends React.Component<
             </a>
             <a
               className={cx('Button', 'Button--primary', 'm-l-sm', {
-                'is-disabled': !this.state.startDate || !this.state.endDate
+                'is-disabled':
+                  !this.state.startDate ||
+                  !this.state.endDate ||
+                  this.state.endDate?.isBefore(this.state.startDate)
               })}
               onClick={this.confirm}
             >
@@ -741,8 +1203,10 @@ export class DateRangePicker extends React.Component<
       className,
       popoverClassName,
       classPrefix: ns,
+      classnames: cx,
       value,
-      placeholder,
+      startPlaceholder,
+      endPlaceholder,
       popOverContainer,
       inputFormat,
       format,
@@ -770,21 +1234,6 @@ export class DateRangePicker extends React.Component<
 
     const {isOpened, isFocused, startDate, endDate} = this.state;
 
-    const selectedDate = DateRangePicker.unFormatValue(
-      value,
-      format,
-      joinValues,
-      delimiter
-    );
-    const startViewValue = selectedDate.startDate
-      ? selectedDate.startDate.format(inputFormat)
-      : '';
-    const endViewValue = selectedDate.endDate
-      ? selectedDate.endDate.format(inputFormat)
-      : '';
-    const arr = [];
-    startViewValue && arr.push(startViewValue);
-    endViewValue && arr.push(endViewValue);
     const __ = this.props.translate;
 
     const calendarMobile = (
@@ -849,17 +1298,32 @@ export class DateRangePicker extends React.Component<
           className
         )}
         ref={this.dom}
-        onClick={this.handleClick}
       >
-        {arr.length ? (
-          <span className={`${ns}DateRangePicker-value`}>
-            {arr.join(__('DateRange.valueConcat'))}
-          </span>
-        ) : (
-          <span className={`${ns}DateRangePicker-placeholder`}>
-            {__(placeholder)}
-          </span>
-        )}
+        <Input
+          className={cx('DateRangePicker-input', {
+            isActive: this.state.editState === 'start'
+          })}
+          onChange={this.startInputChange}
+          onClick={this.openStart}
+          ref={this.startInputRef}
+          placeholder={__(startPlaceholder)}
+          autoComplete="off"
+          value={this.state.startInputValue || ''}
+          disabled={disabled}
+        />
+        <span className={cx('DateRangePicker-input-separator')}>~</span>
+        <Input
+          className={cx('DateRangePicker-input', {
+            isActive: this.state.editState === 'end'
+          })}
+          onChange={this.endInputChange}
+          onClick={this.openEnd}
+          ref={this.endInputRef}
+          placeholder={__(endPlaceholder)}
+          autoComplete="off"
+          value={this.state.endInputValue || ''}
+          disabled={disabled}
+        />
 
         {clearable && !disabled && value ? (
           <a className={`${ns}DateRangePicker-clear`} onClick={this.clearValue}>
@@ -896,7 +1360,6 @@ export class DateRangePicker extends React.Component<
                 className={cx(`${ns}DateRangePicker-popover`, popoverClassName)}
                 onHide={this.close}
                 onClick={this.handlePopOverClick}
-                overlay
               >
                 {this.renderCalendar()}
               </PopOver>