fix(components): [data-picker] the panel disabled state should the same as component (#23029)

* fix(components): [DatePickerPanel] fix disabled

* add import

* fix style

* test: dataPicker add case

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

Co-authored-by: rzzf <cszhjh@gmail.com>

* Remove unused useFormDisabled import

Remove unused import of useFormDisabled from form components.

* test: update name

---------

Co-authored-by: huangjunfeng <huangjunfeng@jilinxiangyun.com>
Co-authored-by: rzzf <cszhjh@gmail.com>

packages/components/date-picker/__tests__/date-picker.test.ts

@@ -16,7 +16,7 @@ import zhCn from '@element-plus/locale/lang/zh-cn'
 import enUs from '@element-plus/locale/lang/en'
 import 'dayjs/locale/zh-cn'
 import { EVENT_CODE } from '@element-plus/constants'
-import { ElFormItem } from '@element-plus/components/form'
+import { ElForm, ElFormItem } from '@element-plus/components/form'
 import DatePicker from '../src/date-picker'
 import DatePickerRange from '@element-plus/components/date-picker-panel/src/date-picker-com/panel-date-range.vue'
 
@@ -25,6 +25,7 @@ const _mount = (template: string, data = () => ({}), otherObj?) =>
     {
       components: {
         'el-date-picker': DatePicker,
+        'el-form': ElForm,
         'el-form-item': ElFormItem,
         'el-config-provider': ConfigProvider,
       },
@@ -2672,6 +2673,26 @@ describe('MonthRange', () => {
       const formItem = wrapper.find('[data-test-ref="item"]')
       expect(formItem.attributes().role).toBe('group')
     })
+
+    it('should give its own disabled prop higher priority within a form', async () => {
+      const wrapper = _mount(
+        `<el-form :disabled="true">
+          <el-form-item>
+            <el-date-picker :disabled="false" v-model="value"/>
+          </el-form-item>
+        </el-form>`,
+        () => ({ value: '' })
+      )
+
+      await nextTick()
+      const datePickerInput = wrapper.find('.el-input__inner')
+      expect(datePickerInput.attributes('disabled')).toBeUndefined()
+
+      datePickerInput.trigger('focus')
+      await nextTick()
+      const panel = document.querySelector('.el-picker-panel')
+      expect(panel?.classList.contains('is-disabled')).toBeFalsy()
+    })
   })
 
   it('The year which is disabled should not be selectable', async () => {

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

@@ -32,7 +32,6 @@ export default defineComponent({
       PICKER_POPPER_OPTIONS_INJECTION_KEY,
       reactive(toRef(props, 'popperOptions'))
     )
-
     const commonPicker = ref<InstanceType<typeof CommonPicker>>()
     const refProps: DatePickerExpose = {
       focus: () => {
@@ -72,7 +71,11 @@ export default defineComponent({
         >
           {{
             default: (scopedProps: /**FIXME: remove any type */ any) => (
-              <ElDatePickerPanel border={false} {...scopedProps}>
+              <ElDatePickerPanel
+                disabled={props.disabled}
+                border={false}
+                {...scopedProps}
+              >
                 {slots}
               </ElDatePickerPanel>
             ),