refactor: picker

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -23,7 +23,16 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
     return defineComponent<InnerPickerProps>({
       name: displayName,
       inheritAttrs: false,
-      props: ['size', 'prefixCls', 'direction', 'getPopupContainer', 'locale', 'value'] as any,
+      props: [
+        'size',
+        'prefixCls',
+        'direction',
+        'getPopupContainer',
+        'locale',
+        'value',
+        'showTime',
+        'showNow',
+      ] as any,
       slots: ['suffixIcon'],
       emits: ['change', 'panelChange', 'ok', 'openChange', 'update:value'],
       setup(props, { slots, expose, attrs, emit }) {
@@ -56,7 +65,8 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
             showToday = true,
             ...restProps
           } = p;
-          const { format, showTime } = p as any;
+          const showTime = p.showTime === '' ? true : p.showTime;
+          const { format } = p as any;
 
           let additionalOverrideProps: any = {};
           if (picker) {
@@ -66,7 +76,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
 
           additionalOverrideProps = {
             ...additionalOverrideProps,
-            ...(showTime ? getTimeProps({ format, picker: mergedPicker, ...showTime }) : {}),
+            ...(showTime
+              ? getTimeProps({
+                  format,
+                  picker: mergedPicker,
+                  ...(typeof showTime === 'object' ? showTime : {}),
+                })
+              : {}),
             ...(mergedPicker === 'time'
               ? getTimeProps({ format, ...p, picker: mergedPicker })
               : {}),

components/vc-picker/Picker.tsx

@@ -91,6 +91,7 @@ export type PickerSharedProps<DateType> = {
   autocomplete?: string;
   direction?: 'ltr' | 'rtl';
   showToday?: boolean;
+  showTime?: boolean | undefined | object;
 } & HtmlHTMLAttributes;
 
 type OmitPanelProps<Props> = Omit<

components/vc-picker/PickerPanel.tsx

@@ -134,8 +134,8 @@ function PickerPanel<DateType>() {
       mode: String,
       picker: { type: String, default: 'date' },
       tabindex: { type: [Number, String], default: 0 },
-      showNow: Boolean,
+      showNow: { type: Boolean, default: undefined },
-      showTime: Boolean,
+      showTime: [Boolean, Object],
       showToday: Boolean,
       renderExtraFooter: Function,
       hideHeader: Boolean,

components/vc-picker/panels/TimePanel/TimeUnitColumn.tsx

@@ -3,6 +3,7 @@ import { useInjectPanel } from '../../PanelContext';
 import classNames from '../../../_util/classNames';
 import { ref } from '@vue/reactivity';
 import { onBeforeUnmount, watch } from '@vue/runtime-core';
+import { defineComponent } from 'vue';
 
 export type Unit = {
   label: any;
@@ -19,9 +20,10 @@ export type TimeUnitColumnProps = {
   onSelect?: (value: number) => void;
 };
 
-function TimeUnitColumn(props: TimeUnitColumnProps) {
+export default defineComponent<TimeUnitColumnProps>({
-  const { prefixCls, units, onSelect, value, active, hideDisabledOptions } = props;
+  name: 'TimeUnitColumn',
-  const cellPrefixCls = `${prefixCls}-cell`;
+  props: ['prefixCls', 'units', 'onSelect', 'value', 'active', 'hideDisabledOptions'] as any,
+  setup(props) {
     const { open } = useInjectPanel();
 
     const ulRef = ref<HTMLUListElement>(null);
@@ -31,7 +33,7 @@ function TimeUnitColumn(props: TimeUnitColumnProps) {
     watch(
       () => props.value,
       () => {
-      const li = liRefs.value.get(value!);
+        const li = liRefs.value.get(props.value!);
         if (li && open.value !== false) {
           scrollTo(ulRef.value!, li.offsetTop, 120);
         }
@@ -44,7 +46,7 @@ function TimeUnitColumn(props: TimeUnitColumnProps) {
     watch(open, () => {
       scrollRef.value?.();
       if (open.value) {
-      const li = liRefs.value.get(value!);
+        const li = liRefs.value.get(props.value!);
         if (li) {
           scrollRef.value = waitElementReady(li, () => {
             scrollTo(ulRef.value!, li.offsetTop, 0);
@@ -52,7 +54,9 @@ function TimeUnitColumn(props: TimeUnitColumnProps) {
         }
       }
     });
-
+    return () => {
+      const { prefixCls, units, onSelect, value, active, hideDisabledOptions } = props;
+      const cellPrefixCls = `${prefixCls}-cell`;
       return (
         <ul
           class={classNames(`${prefixCls}-column`, {
@@ -89,9 +93,6 @@ function TimeUnitColumn(props: TimeUnitColumnProps) {
           })}
         </ul>
       );
-}
+    };
-
+  },
-TimeUnitColumn.displayName = 'TimeUnitColumn';
+});
-TimeUnitColumn.inheritAttrs = false;
-
-export default TimeUnitColumn;

examples/App.vue

@@ -1,25 +1,32 @@
 <template>
   <a-space direction="vertical">
-    <!-- <a-date-picker v-model:value="value1" /> -->
+    <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
-    <!-- <a-month-picker v-model:value="value2" placeholder="Select month" />
+    <a-range-picker
-    <a-week-picker v-model:value="value4" placeholder="Select week" /> -->
+      :show-time="{ format: 'HH:mm' }"
-    <a-range-picker v-model:value="value3" />
+      format="YYYY-MM-DD HH:mm"
+      :placeholder="['Start Time', 'End Time']"
+      @change="onChange"
+      @ok="onOk"
+    />
   </a-space>
 </template>
 <script lang="ts">
-import { defineComponent, ref, watch } from 'vue';
 import { Moment } from 'moment';
+import { defineComponent } from 'vue';
 export default defineComponent({
   setup() {
-    const value1 = ref<Moment>();
+    const onChange = (value: Moment[], dateString: string[]) => {
-    watch(value1, () => {
+      console.log('Selected Time: ', value);
-      console.log(value1);
+      console.log('Formatted Selected Time: ', dateString);
-    });
+    };
+
+    const onOk = (value: Moment[]) => {
+      console.log('onOk: ', value);
+    };
+
     return {
-      value1,
+      onChange,
-      value2: ref<Moment>(),
+      onOk,
-      value3: ref<Moment[]>([]),
-      value4: ref<Moment>(),
     };
   },
 });