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,
-      showTime: Boolean,
+      showNow: { type: Boolean, default: undefined },
+      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,79 +20,79 @@ export type TimeUnitColumnProps = {
   onSelect?: (value: number) => void;
 };
 
-function TimeUnitColumn(props: TimeUnitColumnProps) {
-  const { prefixCls, units, onSelect, value, active, hideDisabledOptions } = props;
-  const cellPrefixCls = `${prefixCls}-cell`;
-  const { open } = useInjectPanel();
+export default defineComponent<TimeUnitColumnProps>({
+  name: 'TimeUnitColumn',
+  props: ['prefixCls', 'units', 'onSelect', 'value', 'active', 'hideDisabledOptions'] as any,
+  setup(props) {
+    const { open } = useInjectPanel();
 
-  const ulRef = ref<HTMLUListElement>(null);
-  const liRefs = ref<Map<number, HTMLElement | null>>(new Map());
-  const scrollRef = ref<Function>();
+    const ulRef = ref<HTMLUListElement>(null);
+    const liRefs = ref<Map<number, HTMLElement | null>>(new Map());
+    const scrollRef = ref<Function>();
 
-  watch(
-    () => props.value,
-    () => {
-      const li = liRefs.value.get(value!);
-      if (li && open.value !== false) {
-        scrollTo(ulRef.value!, li.offsetTop, 120);
-      }
-    },
-  );
-  onBeforeUnmount(() => {
-    scrollRef.value?.();
-  });
-
-  watch(open, () => {
-    scrollRef.value?.();
-    if (open.value) {
-      const li = liRefs.value.get(value!);
-      if (li) {
-        scrollRef.value = waitElementReady(li, () => {
-          scrollTo(ulRef.value!, li.offsetTop, 0);
-        });
-      }
-    }
-  });
-
-  return (
-    <ul
-      class={classNames(`${prefixCls}-column`, {
-        [`${prefixCls}-column-active`]: active,
-      })}
-      ref={ulRef}
-      style={{ position: 'relative' }}
-    >
-      {units!.map(unit => {
-        if (hideDisabledOptions && unit.disabled) {
-          return null;
+    watch(
+      () => props.value,
+      () => {
+        const li = liRefs.value.get(props.value!);
+        if (li && open.value !== false) {
+          scrollTo(ulRef.value!, li.offsetTop, 120);
         }
+      },
+    );
+    onBeforeUnmount(() => {
+      scrollRef.value?.();
+    });
 
-        return (
-          <li
-            key={unit.value}
-            ref={element => {
-              liRefs.value.set(unit.value, element as HTMLElement);
-            }}
-            class={classNames(cellPrefixCls, {
-              [`${cellPrefixCls}-disabled`]: unit.disabled,
-              [`${cellPrefixCls}-selected`]: value === unit.value,
-            })}
-            onClick={() => {
-              if (unit.disabled) {
-                return;
-              }
-              onSelect!(unit.value);
-            }}
-          >
-            <div class={`${cellPrefixCls}-inner`}>{unit.label}</div>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
+    watch(open, () => {
+      scrollRef.value?.();
+      if (open.value) {
+        const li = liRefs.value.get(props.value!);
+        if (li) {
+          scrollRef.value = waitElementReady(li, () => {
+            scrollTo(ulRef.value!, li.offsetTop, 0);
+          });
+        }
+      }
+    });
+    return () => {
+      const { prefixCls, units, onSelect, value, active, hideDisabledOptions } = props;
+      const cellPrefixCls = `${prefixCls}-cell`;
+      return (
+        <ul
+          class={classNames(`${prefixCls}-column`, {
+            [`${prefixCls}-column-active`]: active,
+          })}
+          ref={ulRef}
+          style={{ position: 'relative' }}
+        >
+          {units!.map(unit => {
+            if (hideDisabledOptions && unit.disabled) {
+              return null;
+            }
 
-TimeUnitColumn.displayName = 'TimeUnitColumn';
-TimeUnitColumn.inheritAttrs = false;
-
-export default TimeUnitColumn;
+            return (
+              <li
+                key={unit.value}
+                ref={element => {
+                  liRefs.value.set(unit.value, element as HTMLElement);
+                }}
+                class={classNames(cellPrefixCls, {
+                  [`${cellPrefixCls}-disabled`]: unit.disabled,
+                  [`${cellPrefixCls}-selected`]: value === unit.value,
+                })}
+                onClick={() => {
+                  if (unit.disabled) {
+                    return;
+                  }
+                  onSelect!(unit.value);
+                }}
+              >
+                <div class={`${cellPrefixCls}-inner`}>{unit.label}</div>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    };
+  },
+});

examples/App.vue

@@ -1,25 +1,32 @@
 <template>
   <a-space direction="vertical">
-    <!-- <a-date-picker v-model:value="value1" /> -->
-    <!-- <a-month-picker v-model:value="value2" placeholder="Select month" />
-    <a-week-picker v-model:value="value4" placeholder="Select week" /> -->
-    <a-range-picker v-model:value="value3" />
+    <a-date-picker show-time placeholder="Select Time" @change="onChange" @ok="onOk" />
+    <a-range-picker
+      :show-time="{ format: 'HH:mm' }"
+      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>();
-    watch(value1, () => {
-      console.log(value1);
-    });
+    const onChange = (value: Moment[], dateString: string[]) => {
+      console.log('Selected Time: ', value);
+      console.log('Formatted Selected Time: ', dateString);
+    };
+
+    const onOk = (value: Moment[]) => {
+      console.log('onOk: ', value);
+    };
+
     return {
-      value1,
-      value2: ref<Moment>(),
-      value3: ref<Moment[]>([]),
-      value4: ref<Moment>(),
+      onChange,
+      onOk,
     };
   },
 });