fix: fix timepicker / datepicker fragment error (#1009)

packages/date-picker/__tests__/date-picker.spec.ts

@@ -21,15 +21,20 @@ afterEach(() => {
 
 
 describe('DatePicker', () => {
-  it('create', async () => {
+  it('create & custom class & style', async () => {
     const wrapper = _mount(`<el-date-picker
         :readonly="true"
         placeholder='test_'
         format='HH-mm-ss'
+        :style="{color:'red'}"
+        class="customClass"
     />`)
     const input = wrapper.find('input')
     expect(input.attributes('placeholder')).toBe('test_')
     expect(input.attributes('readonly')).not.toBeUndefined()
+    const outterInput = wrapper.find('.el-input')
+    expect(outterInput.classes()).toContain('customClass')
+    expect(outterInput.attributes().style).toBeDefined()
   })
 
   it('select date', async () => {

packages/date-picker/src/date-picker.ts

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue'
 import { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_DATEPICKER } from '@element-plus/time-picker'
-import { CommonPicker } from '@element-plus/time-picker'
+import { CommonPicker, defaultProps } from '@element-plus/time-picker'
 import DatePickPanel from './date-picker-com/panel-date-pick.vue'
 import DateRangePickPanel from './date-picker-com/panel-date-range.vue'
 import MonthRangePickPanel from './date-picker-com/panel-month-range.vue'
@@ -36,17 +36,19 @@ export default defineComponent({
   name: 'ElDatePicker',
   install: null,
   props: {
+    ...defaultProps,
     type: {
       type: String,
       default: 'date',
     },
   },
-  setup(props) {
+  setup(props, ctx) {
     const format = DEFAULT_FORMATS_DATEPICKER[props.type] || DEFAULT_FORMATS_DATE
     return () => h(CommonPicker, {
       format,
+      ...props, // allow format to be overwrite
       type: props.type,
-      ...props,
+      'onUpdate:modelValue': value => ctx.emit('update:modelValue', value),
     },
     {
       default: scopedProps => h(getPanel(props.type), scopedProps),

packages/element-plus/index.ts

@@ -84,6 +84,8 @@ import ElTree from '@element-plus/tree'
 import ElUpload from '@element-plus/upload'
 import ElVirtualList from '@element-plus/virtual-list'
 import { use } from '@element-plus/locale'
+// if you encountered problems alike "Can't resolve './version'"
+// please run `yarn bootstrap` first
 import { version as version_ } from './version'
 import { setConfig } from '@element-plus/utils/config'
 import type { InstallOptions } from '@element-plus/utils/config'

packages/time-picker/__tests__/time-picker.spec.ts

@@ -32,15 +32,20 @@ afterEach(() => {
 })
 
 describe('TimePicker', () => {
-  it('create', async () => {
+  it('create & custom class & style', async () => {
     const wrapper = _mount(`<el-time-picker
     :placeholder="placeholder"
     :readonly="readonly"
+    :style="{color:'red'}"
+    class="customClass"
   />`, () => ({ placeholder: 'test_',
       readonly: true }))
     const input = wrapper.find('input')
     expect(input.attributes('placeholder')).toBe('test_')
     expect(input.attributes('readonly')).not.toBeUndefined()
+    const outterInput = wrapper.find('.el-input')
+    expect(outterInput.classes()).toContain('customClass')
+    expect(outterInput.attributes().style).toBeDefined()
   })
 
   it('set format && default value && set AM/PM spinner', async () => {

packages/time-picker/index.ts

@@ -4,6 +4,7 @@ import CommonPicker from './src/common/picker.vue'
 import TimePickPanel from './src/time-picker-com/panel-time-pick.vue'
 export * from './src/common/date-utils'
 export * from './src/common/constant'
+export * from './src/common/props'
 
 TimePicker.install = (app: App): void => {
   app.component(TimePicker.name, TimePicker)

packages/time-picker/src/common/picker.vue

@@ -138,11 +138,9 @@ import ElInput from '@element-plus/input'
 import ElPopper from '@element-plus/popper'
 import { EVENT_CODE } from '@element-plus/utils/aria'
 import { useGlobalConfig } from '@element-plus/utils/util'
-import { isValidComponentSize } from '@element-plus/utils/validators'
 import { elFormKey, elFormItemKey } from '@element-plus/form'
-
-import type { PropType } from 'vue'
 import type { ElFormContext, ElFormItemContext } from '@element-plus/form'
+import { defaultProps } from './props'
 
 interface PickerOptions {
   isValidValue: any
@@ -189,99 +187,7 @@ export default defineComponent({
     ElPopper,
   },
   directives: { clickoutside: ClickOutside },
-  props: {
+  props: defaultProps,
-    name: {
-      type: [Array, String],
-      default: '',
-    },
-    format: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: '',
-    },
-    clearable: {
-      type: Boolean,
-      default: true,
-    },
-    clearIcon: {
-      type: String,
-      default: 'el-icon-circle-close',
-    },
-    editable: {
-      type: Boolean,
-      default: true,
-    },
-    prefixIcon:{
-      type: String,
-      default: '',
-    },
-    size: {
-      type: String as PropType<ComponentSize>,
-      validator: isValidComponentSize,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: [Date, Array, String] as PropType<string | Date | Date[]>,
-      default: '',
-    },
-    rangeSeparator: {
-      type: String,
-      default: '-',
-    },
-    startPlaceholder: String,
-    endPlaceholder: String,
-    defaultValue: {
-      type: [Date, Array] as PropType<Date | Date[]>,
-    },
-    defaultTime: {
-      type: [Date, Array] as PropType<Date | Date[]>,
-    },
-    isRange: {
-      type: Boolean,
-      default: false,
-    },
-    disabledHours: {
-      type: Function,
-    },
-    disabledMinutes: {
-      type: Function,
-    },
-    disabledSeconds: {
-      type: Function,
-    },
-    disabledDate: {
-      type: Function,
-    },
-    cellClassName: {
-      type: Function,
-    },
-    shortcuts: {
-      type: Array,
-      default: () => ([]),
-    },
-    arrowControl: {
-      type: Boolean,
-      default: false,
-    },
-    validateEvent: {
-      type: Boolean,
-      default: true,
-    },
-  },
   emits: ['update:modelValue', 'change', 'focus', 'blur'],
   setup(props, ctx) {
     const ELEMENT = useGlobalConfig()

packages/time-picker/src/common/props.ts

@@ -0,0 +1,94 @@
+import type { PropType } from 'vue'
+import { isValidComponentSize } from '@element-plus/utils/validators'
+export const defaultProps = {
+  name: {
+    type: [Array, String],
+    default: '',
+  },
+  format: {
+    type: String,
+  },
+  type: {
+    type: String,
+    default: '',
+  },
+  clearable: {
+    type: Boolean,
+    default: true,
+  },
+  clearIcon: {
+    type: String,
+    default: 'el-icon-circle-close',
+  },
+  editable: {
+    type: Boolean,
+    default: true,
+  },
+  prefixIcon:{
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String as PropType<ComponentSize>,
+    validator: isValidComponentSize,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: [Date, Array, String] as PropType<string | Date | Date[]>,
+    default: '',
+  },
+  rangeSeparator: {
+    type: String,
+    default: '-',
+  },
+  startPlaceholder: String,
+  endPlaceholder: String,
+  defaultValue: {
+    type: [Date, Array] as PropType<Date | Date[]>,
+  },
+  defaultTime: {
+    type: [Date, Array] as PropType<Date | Date[]>,
+  },
+  isRange: {
+    type: Boolean,
+    default: false,
+  },
+  disabledHours: {
+    type: Function,
+  },
+  disabledMinutes: {
+    type: Function,
+  },
+  disabledSeconds: {
+    type: Function,
+  },
+  disabledDate: {
+    type: Function,
+  },
+  cellClassName: {
+    type: Function,
+  },
+  shortcuts: {
+    type: Array,
+    default: () => ([]),
+  },
+  arrowControl: {
+    type: Boolean,
+    default: false,
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true,
+  },
+}

packages/time-picker/src/time-picker.ts

@@ -5,25 +5,27 @@ import { DEFAULT_FORMATS_TIME } from './common/constant'
 import Picker from './common/picker.vue'
 import TimePickPanel from './time-picker-com/panel-time-pick.vue'
 import TimeRangePanel from './time-picker-com/panel-time-range.vue'
-
+import { defaultProps } from './common/props'
 dayjs.extend(customParseFormat)
 
 export default defineComponent({
   name: 'ElTimePicker',
   install: null,
   props: {
+    ...defaultProps,
     isRange: {
       type: Boolean,
       default: false,
     },
   },
-  setup(props) {
+  setup(props, ctx) {
     const type = props.isRange ? 'timerange' : 'time'
     const panel = props.isRange ? TimeRangePanel : TimePickPanel
     return () => h(Picker, {
       format: DEFAULT_FORMATS_TIME,
-      ...props,
+      ...props, // allow format to be overwrite
       type,
+      'onUpdate:modelValue': value => ctx.emit('update:modelValue', value),
     },
     {
       default: scopedProps => h(panel, scopedProps),