RangePicker support customize separator (#15055)

* support separator

* add version

* fix css

components/date-picker/RangePicker.tsx

@@ -73,6 +73,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
   static defaultProps = {
     allowClear: true,
     showToday: false,
+    separator: '~',
   };
 
   static getDerivedStateFromProps(nextProps: any, prevState: any) {
@@ -278,6 +279,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
       dateRender,
       onCalendarChange,
       suffixIcon,
+      separator,
     } = props;
 
     const prefixCls = getPrefixCls('calendar', customizePrefixCls);
@@ -326,6 +328,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
     const calendar = (
       <RangeCalendar
         {...calendarProps}
+        seperator={separator}
         onChange={onCalendarChange}
         format={format}
         prefixCls={prefixCls}
@@ -388,7 +391,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
             className={`${prefixCls}-range-picker-input`}
             tabIndex={-1}
           />
-          <span className={`${prefixCls}-range-picker-separator`}> ~ </span>
+          <span className={`${prefixCls}-range-picker-separator`}> {separator} </span>
           <input
             disabled={props.disabled}
             readOnly

components/date-picker/__tests__/RangePicker.test.js

@@ -314,4 +314,9 @@ describe('RangePicker', () => {
     wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
     expect(handleOpenChange).toBeCalledWith(false);
   });
+
+  it('customize separator', () => {
+    const wrapper = mount(<RangePicker separator="test" />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/date-picker/__tests__/__snapshots__/RangePicker.test.js.snap

@@ -1,5 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RangePicker customize separator 1`] = `
+<span
+  class="ant-calendar-picker"
+  tabindex="0"
+>
+  <span
+    class="ant-calendar-picker-input ant-input"
+  >
+    <input
+      class="ant-calendar-range-picker-input"
+      placeholder="Start date"
+      readonly=""
+      tabindex="-1"
+      value=""
+    />
+    <span
+      class="ant-calendar-range-picker-separator"
+    >
+       test 
+    </span>
+    <input
+      class="ant-calendar-range-picker-input"
+      placeholder="End date"
+      readonly=""
+      tabindex="-1"
+      value=""
+    />
+    <i
+      aria-label="icon: calendar"
+      class="anticon anticon-calendar ant-calendar-picker-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="calendar"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+        />
+      </svg>
+    </i>
+  </span>
+</span>
+`;
+
 exports[`RangePicker show month panel according to value 1`] = `
 <div>
   <div

components/date-picker/index.en-US.md

@@ -114,20 +114,21 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
 
 ### RangePicker
 
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
-| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - |
-| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - |
-| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
-| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |
-| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
-| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
-| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |
-| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
-| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - |
-| onChange | a callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - |
-| onOk | callback when click ok button | function(dates: [moment](http://momentjs.com/)\[]) | - |
+| Property | Description | Type | Default | Version |
+| -------- | ----------- | ---- | ------- | --------------- |
+| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
+| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
+| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
+| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" | |
+| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
+| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
+| separator | set separator between inputs | string | '~' | 3.14.0 |
+| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
+| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
+| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
+| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
+| onChange | a callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
+| onOk | callback when click ok button | function(dates: [moment](http://momentjs.com/)\[]) | - | |
 
 <style>
 .code-box-demo .ant-calendar-picker {

components/date-picker/index.zh-CN.md

@@ -117,20 +117,21 @@ moment.locale('zh-cn');
 
 ### RangePicker
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 |
-| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 |
-| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
-| ranges       | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
-| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |
-| value | 日期 | [moment](http://momentjs.com/)\[] | 无 |
-| onCalendarChange | 待选日期发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 |
-| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 |
-| onOk | 点击确定按钮的回调 | function(dates: [moment](http://momentjs.com/)\[]) | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | |
+| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 | |
+| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 | |
+| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | |
+| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 | |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
+| separator | 设置分隔符 | string | '~' | 3.14.0 |
+| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
+| value | 日期 | [moment](http://momentjs.com/)\[] | 无 | |
+| onCalendarChange | 待选日期发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
+| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
+| onOk | 点击确定按钮的回调 | function(dates: [moment](http://momentjs.com/)\[]) | - | |
 
 <style>
 .code-box-demo .ant-calendar-picker {

components/date-picker/style/RangePicker.less

@@ -16,9 +16,11 @@
 
 .@{calendar-prefix-cls}-range-picker-separator {
   display: inline-block;
-  width: 10px;
+  min-width: 10px;
   height: 100%;
   color: @text-color-secondary;
+  white-space: nowrap;
+  text-align: center;
   vertical-align: top;
 }
 
@@ -61,20 +63,23 @@
   &-middle {
     position: absolute;
     left: 50%;
-    width: 20px;
+    z-index: 1;
     height: @input-box-height;
-    margin-left: -132px;
+    margin: 1px 0 0 0;
+    padding: 0 200px 0 0;
     color: @text-color-secondary;
     line-height: @input-box-height;
     text-align: center;
+    transform: translateX(-50%);
   }
 
   &-right .@{calendar-prefix-cls}-date-input-wrap {
-    margin-left: -118px;
+    margin-left: -90px;
   }
 
   &.@{calendar-prefix-cls}-time &-middle {
-    margin-left: -12px;
+    padding: 0 10px 0 0;
+    transform: translateX(-50%);
   }
 
   &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {