datePicker 添加默认渲染slot支持 (#957)

* datePicker  添加默认渲染slot支持

* 功能优化

Author: SnowWinterMaye

components/date-picker/RangePicker.jsx

@@ -409,6 +409,7 @@ export default {
           openChange: this.handleOpenChange,
         },
         style: popupStyle,
+        scopedSlots: { default: input, ...$scopedSlots },
       },
     );
     return (
@@ -422,7 +423,7 @@ export default {
         onMouseenter={this.onMouseEnter}
         onMouseleave={this.onMouseLeave}
       >
-        <VcDatePicker {...vcDatePickerProps}>{input}</VcDatePicker>
+        <VcDatePicker {...vcDatePickerProps} />
       </span>
     );
   },

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

@@ -70,6 +70,12 @@ exports[`renders ./components/date-picker/demo/suffix.md correctly 1`] = `
     </svg></i></span></span> <br> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><i class="anticon anticon-smile ant-calendar-picker-icon"><svg viewBox="64 64 896 896" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M288 421a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm352 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 0 1 248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 0 1 249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 0 1 775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 0 1 775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 0 0-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 0 0-8-8.4z"></path></svg></i></span></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span class="ant-calendar-picker"><div class=""><input readonly="true" placeholder="Select month" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></div></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon">ab</span></span></span> <br> <span class="ant-calendar-picker"><span class="" style="display: inline-block; width: 100%;"><input readonly="true" placeholder="Select week" class="ant-calendar-picker-input ant-input"><span class="ant-calendar-picker-icon">ab</span></span></span></div>
 `;
 
+exports[`renders ./components/date-picker/demo/text.md correctly 1`] = `
+<div><span class="ant-calendar-picker"><span class="">SelectTime</span></span> <br> <span tabindex="0" class="ant-calendar-picker"><span class="">
+    请选择
+    </span></span></div>
+`;
+
 exports[`renders ./components/date-picker/demo/time.md correctly 1`] = `
 <div><span class="ant-calendar-picker" style="width: 195px;"><div class=""><input readonly="true" placeholder="Select Time" class="ant-calendar-picker-input ant-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><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"></path></svg></i></div></span> <br> <span tabindex="0" class="ant-calendar-picker" style="width: 350px;"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start Time" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End Time" tabindex="-1" class="ant-calendar-range-picker-input"><i class="ant-calendar-picker-icon anticon anticon-calendar"><svg viewBox="64 64 896 896" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
       <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"></path>

components/date-picker/createPicker.js

@@ -244,6 +244,7 @@ export default function createPicker(TheCalendar, props) {
           onOpenChange: this.handleOpenChange,
         },
         style: props.popupStyle,
+        scopedSlots: { default: input, ...$scopedSlots },
       };
       return (
         <span
@@ -255,7 +256,7 @@ export default function createPicker(TheCalendar, props) {
           onMouseenter={this.onMouseEnter}
           onMouseleave={this.onMouseLeave}
         >
-          <VcDatePicker {...vcDatePickerProps}>{input}</VcDatePicker>
+          <VcDatePicker {...vcDatePickerProps} />
         </span>
       );
     },

components/date-picker/demo/index.vue

@@ -11,6 +11,7 @@ import Size from './size';
 import StartEnd from './start-end';
 import Time from './time';
 import Suffix from './suffix';
+import Text from './text';
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
 const md = {
@@ -47,6 +48,7 @@ export default {
         <Size/>
         <StartEnd/>
         <Time/>
+        <Text />
         <Suffix />
         <api>
           <CN slot='cn' />

components/date-picker/demo/text.md

@@ -0,0 +1,55 @@
+
+<cn>
+#### 自定义渲染
+增加自定义渲染功能，在默认 `slot` 中，你可以设置任何你想渲染的组件。
+</cn>
+
+<us>
+#### Custum Time
+Added custom rendering function, in the default `slot', you can set any component you want to render..
+</us>
+
+```html
+<template>
+  <div>
+    <a-date-picker
+      placeholder="Select Time"
+      v-model="time1"
+      @change="onChange"
+      @ok="onOk"
+    >
+      <span>{{time1?time1:'SelectTime'}}</span>
+    </a-date-picker>
+    <br />
+    <a-range-picker v-model="time2">
+      <span>
+      {{time2?time2:'请选择'}}
+      </span>
+    </a-range-picker>
+  </div>
+</template>
+<script>
+import moment from 'moment'
+export default {
+    data(){
+        return {
+            time1:undefined,
+            time2:undefined
+        }
+    },
+  methods: {
+    onChange(value, dateString) {
+      console.log('Selected Time: ', value);
+      console.log('Formatted Selected Time: ', dateString);
+    },
+    onOk(value) {
+      console.log('onOk: ', value);
+    },
+    clearTime(){
+      this.time1 = undefined
+    }
+  }
+}
+</script>
+```
+