Improve design of RangePicker presets link

components/date-picker/RangePicker.tsx

@@ -5,6 +5,7 @@ import RangeCalendar from 'rc-calendar/lib/RangeCalendar';
 import RcDatePicker from 'rc-calendar/lib/Picker';
 import classNames from 'classnames';
 import Icon from '../icon';
+import Tag from '../tag';
 import warning from '../_util/warning';
 import interopDefault from '../_util/interopDefault';
 import { RangePickerValue, RangePickerPresetRange } from './interface';
@@ -211,14 +212,15 @@ export default class RangePicker extends React.Component<any, RangePickerState>
     const operations = Object.keys(ranges || {}).map((range) => {
       const value = ranges[range];
       return (
-        <a
+        <Tag
           key={range}
+          color="blue"
           onClick={() => this.handleRangeClick(value)}
           onMouseEnter={() => this.setState({ hoverValue: value })}
           onMouseLeave={this.handleRangeMouseLeave}
         >
           {range}
-        </a>
+        </Tag>
       );
     });
     const rangeNode = (

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

@@ -50,7 +50,7 @@ describe('RangePicker', () => {
     );
 
     const rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
-    rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
+    rangeCalendarWrapper.find('.ant-calendar-range-quick-selector Tag')
       .simulate('click');
     expect(render(wrapper.find('Trigger').instance().getComponent()))
       .toMatchSnapshot();
@@ -69,7 +69,7 @@ describe('RangePicker', () => {
     );
 
     let rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
-    rangeCalendarWrapper.find('.ant-calendar-range-quick-selector a')
+    rangeCalendarWrapper.find('.ant-calendar-range-quick-selector Tag')
       .simulate('mouseEnter');
     rangeCalendarWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(rangeCalendarWrapper.find('.ant-calendar-selected-day').length).toBe(2);
@@ -152,7 +152,7 @@ describe('RangePicker', () => {
         />
       );
       wrapper.find('.ant-calendar-picker-input').simulate('click');
-      wrapper.find('.ant-calendar-range-quick-selector a').simulate('click');
+      wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
       expect(
         wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value
       ).toBe(range[0].format(format));
@@ -171,7 +171,7 @@ describe('RangePicker', () => {
         />
       );
       wrapper.find('.ant-calendar-picker-input').simulate('click');
-      wrapper.find('.ant-calendar-range-quick-selector a').simulate('click');
+      wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
       expect(
         wrapper.find('.ant-calendar-range-picker-input').first().getDOMNode().value
       ).toBe(range[0].format(format));
@@ -200,7 +200,7 @@ describe('RangePicker', () => {
       />
     );
     wrapper.find('.ant-calendar-picker-input').simulate('click');
-    wrapper.find('.ant-calendar-range-quick-selector a').simulate('click');
+    wrapper.find('.ant-calendar-range-quick-selector Tag').simulate('click');
     expect(handleOk).toBeCalledWith(range);
   });
 

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

@@ -2990,9 +2990,12 @@ exports[`RangePicker switch to corresponding month panel when click presetted ra
           <div
             class="ant-calendar-footer-extra ant-calendar-range-quick-selector"
           >
-            <a>
+            <div
+              class="ant-tag ant-tag-blue"
+              data-show="true"
+            >
               My Birthday
-            </a>
+            </div>
           </div>
           <div
             class="ant-calendar-footer-btn"

components/date-picker/style/index.tsx

@@ -4,3 +4,4 @@ import './index.less';
 // style dependencies
 import '../../input/style';
 import '../../time-picker/style';
+import '../../tag/style';