diff --git a/packages/date-picker/__tests__/date-picker.spec.ts b/packages/date-picker/__tests__/date-picker.spec.ts
index caa5e1eb30..499e5009b9 100644
--- a/packages/date-picker/__tests__/date-picker.spec.ts
+++ b/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(``)
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 () => {
diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts
index 44bb6c7053..b45f13c168 100644
--- a/packages/date-picker/src/date-picker.ts
+++ b/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),
diff --git a/packages/element-plus/index.ts b/packages/element-plus/index.ts
index f7fcafd9d1..b54aec5633 100644
--- a/packages/element-plus/index.ts
+++ b/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'
diff --git a/packages/time-picker/__tests__/time-picker.spec.ts b/packages/time-picker/__tests__/time-picker.spec.ts
index 787493bbbb..cbf24dcd4a 100644
--- a/packages/time-picker/__tests__/time-picker.spec.ts
+++ b/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(``, () => ({ 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 () => {
diff --git a/packages/time-picker/index.ts b/packages/time-picker/index.ts
index 4f43297333..680fff2cf5 100644
--- a/packages/time-picker/index.ts
+++ b/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)
diff --git a/packages/time-picker/src/common/picker.vue b/packages/time-picker/src/common/picker.vue
index 103af3eb63..275040dc3c 100644
--- a/packages/time-picker/src/common/picker.vue
+++ b/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: {
- 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,
- validator: isValidComponentSize,
- },
- readonly: {
- type: Boolean,
- default: false,
- },
- disabled: {
- type: Boolean,
- default: false,
- },
- placeholder: {
- type: String,
- default: '',
- },
- modelValue: {
- type: [Date, Array, String] as PropType,
- default: '',
- },
- rangeSeparator: {
- type: String,
- default: '-',
- },
- startPlaceholder: String,
- endPlaceholder: String,
- defaultValue: {
- type: [Date, Array] as PropType,
- },
- defaultTime: {
- type: [Date, Array] as PropType,
- },
- 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,
- },
- },
+ props: defaultProps,
emits: ['update:modelValue', 'change', 'focus', 'blur'],
setup(props, ctx) {
const ELEMENT = useGlobalConfig()
diff --git a/packages/time-picker/src/common/props.ts b/packages/time-picker/src/common/props.ts
new file mode 100644
index 0000000000..ba0fe1803c
--- /dev/null
+++ b/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,
+ validator: isValidComponentSize,
+ },
+ readonly: {
+ type: Boolean,
+ default: false,
+ },
+ disabled: {
+ type: Boolean,
+ default: false,
+ },
+ placeholder: {
+ type: String,
+ default: '',
+ },
+ modelValue: {
+ type: [Date, Array, String] as PropType,
+ default: '',
+ },
+ rangeSeparator: {
+ type: String,
+ default: '-',
+ },
+ startPlaceholder: String,
+ endPlaceholder: String,
+ defaultValue: {
+ type: [Date, Array] as PropType,
+ },
+ defaultTime: {
+ type: [Date, Array] as PropType,
+ },
+ 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,
+ },
+}
diff --git a/packages/time-picker/src/time-picker.ts b/packages/time-picker/src/time-picker.ts
index ce68a17b7d..903c612bb7 100644
--- a/packages/time-picker/src/time-picker.ts
+++ b/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),