fix(components): [date-picker] input should not be editable when editable is false (element-plus#23085)

fix(components): input should not be editable when editable is false

Author: keeplearning66

packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue

@@ -34,6 +34,7 @@
               size="small"
               :validate-event="false"
               :disabled="dateDisabled"
+              :readonly="!editable"
               @input="(val) => (userInputDate = val)"
               @change="handleVisibleDateChange"
             />
@@ -48,6 +49,7 @@
               size="small"
               :validate-event="false"
               :disabled="dateDisabled"
+              :readonly="!editable"
               @focus="onTimePickerInputFocus"
               @input="(val) => (userInputTime = val)"
               @change="handleVisibleTimeChange"

packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue

@@ -36,6 +36,7 @@
                 :class="drpNs.e('editor')"
                 :model-value="minVisibleDate"
                 :validate-event="false"
+                :readonly="!editable"
                 @input="(val) => handleDateInput(val, 'min')"
                 @change="(val) => handleDateChange(val, 'min')"
               />
@@ -51,6 +52,7 @@
                 :placeholder="t('el.datepicker.startTime')"
                 :model-value="minVisibleTime"
                 :validate-event="false"
+                :readonly="!editable"
                 @focus="minTimePickerVisible = true"
                 @input="(val) => handleTimeInput(val, 'min')"
                 @change="(val) => handleTimeChange(val, 'min')"
@@ -75,7 +77,7 @@
                 :disabled="rangeState.selecting || dateRangeDisabled"
                 :placeholder="t('el.datepicker.endDate')"
                 :model-value="maxVisibleDate"
-                :readonly="!minDate"
+                :readonly="!minDate || !editable"
                 :validate-event="false"
                 @input="(val) => handleDateInput(val, 'max')"
                 @change="(val) => handleDateChange(val, 'max')"
@@ -91,7 +93,7 @@
                 :disabled="rangeState.selecting || dateRangeDisabled"
                 :placeholder="t('el.datepicker.endTime')"
                 :model-value="maxVisibleTime"
-                :readonly="!minDate"
+                :readonly="!minDate || !editable"
                 :validate-event="false"
                 @focus="minDate && (maxTimePickerVisible = true)"
                 @input="(val) => handleTimeInput(val, 'max')"

packages/components/date-picker-panel/src/props/date-picker-panel.ts

@@ -119,6 +119,13 @@ export const datePickerPanelProps = buildProps({
     type: Boolean,
     default: true,
   },
+  /**
+   * @description whether the input is editable
+   */
+  editable: {
+    type: Boolean,
+    default: true,
+  },
 } as const)
 
 export type DatePickerPanelProps = ExtractPropTypes<typeof datePickerPanelProps>

packages/components/date-picker-panel/src/props/shared.ts

@@ -75,6 +75,10 @@ export const panelSharedProps = buildProps({
   showWeekNumber: Boolean,
   border: Boolean,
   disabled: Boolean,
+  editable: {
+    type: Boolean,
+    default: true,
+  },
 } as const)
 
 export const panelRangeSharedProps = buildProps({

packages/components/date-picker/__tests__/date-time-picker.test.tsx

@@ -505,6 +505,18 @@ describe('Datetime Picker', () => {
       '6',
     ])
   })
+
+  it('should work with editable prop', async () => {
+    const value = ref(new Date(2000, 10, 8, 10, 10))
+    const wrapper = _mount(() => (
+      <DatePicker v-model={value.value} editable={false} type="datetime" />
+    ))
+
+    const inputs = wrapper.findAllComponents({ name: 'ElInput' })
+    inputs.forEach((input) => {
+      expect(input.props().readonly).toBe(true)
+    })
+  })
 })
 
 describe('Datetimerange', () => {
@@ -1219,4 +1231,20 @@ describe('Datetimerange', () => {
         .textContent
     ).toBe('01')
   })
+
+  it('should work with editable prop', async () => {
+    const modelValue = ['2025-09-01', '2025-09-07']
+    _mount(() => (
+      <DatePicker
+        modelValue={modelValue}
+        editable={false}
+        type="datetimerange"
+      />
+    ))
+
+    const inputs = document.querySelectorAll('input')
+    inputs.forEach((input) => {
+      expect(input.readOnly).toBe(true)
+    })
+  })
 })

packages/components/date-picker/src/date-picker.tsx

@@ -73,6 +73,7 @@ export default defineComponent({
             default: (scopedProps: /**FIXME: remove any type */ any) => (
               <ElDatePickerPanel
                 disabled={props.disabled}
+                editable={props.editable}
                 border={false}
                 {...scopedProps}
               >