fix(date-picker): input-readonly not set in datetime or datetimerange's panel input (#6173)

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -14,9 +14,10 @@
 - Fix `n-slider`'s rail may have styling issue in `vertical` mode when global box-sizing is overrided, closes [#6114](https://github.com/tusen-ai/naive-ui/issues/6114).
 - Fix `n-tabs` has style issue when using `prefix` slot, `suffix` slot or `addable` prop with vertical placement, closes [#6059](https://github.com/tusen-ai/naive-ui/issues/6059), [#6060](https://github.com/tusen-ai/naive-ui/pull/6060).
 - Fix `n-upload` can only upload a maximum of 100 files in certain old browsers when uploading directories, closes [#6027](https://github.com/tusen-ai/naive-ui/issues/6027).
+- Fix `n-date-picker`'s `input-readonly` prop not work in the panel's input for `'datetime'` or `'datetimerange'`.
 - Fix `n-menu` can't apply HTML attributes correctly on the component when `responsive` is set.
 - Fix `n-float-button` error when used with `popover` component, closes [#5933](https://github.com/tusen-ai/naive-ui/issues/5933).
-- Fix 'n-badge' unable to mask focus element border, closes [#5929](https://github.com/tusen-ai/naive-ui/issues/5929)
+- Fix `n-badge` unable to mask focus element border, closes [#5929](https://github.com/tusen-ai/naive-ui/issues/5929)
 
 ### Features
 

CHANGELOG.zh-CN.md

@@ -14,9 +14,10 @@
 - 修复 `n-slider` 在垂直模式下的宽度样式可能会被全局 CSS box-sizing override 影响，关闭[#6114](https://github.com/tusen-ai/naive-ui/issues/6114)
 - 修复 `n-tabs` 在垂直模式下使用 `prefix` slot、`suffix` slot 和 `addable` 属性的时候可能出现样式问题，关闭 [#6059](https://github.com/tusen-ai/naive-ui/issues/6059)，[#6060](https://github.com/tusen-ai/naive-ui/pull/6060)
 - 修复 `n-upload` 在某些老浏览器下目录上传最多只能上传 100 个文件，关闭 [#6027](https://github.com/tusen-ai/naive-ui/issues/6027)
+- 修复 `n-date-picker` 的 `input-readonly` 属性在 `'datetime'`、`'datetimerange'` 类型的面板输入框中不生效
 - 修复 `n-menu` 在 `responsive` 被设定的情况下，HTML 属性无法正确的应用到组件上
 - 修复 `n-float-button` 和 `popover` 一起使用会报错, 关闭 [#5933](https://github.com/tusen-ai/naive-ui/issues/5933)
-- 修复 `n-badge` 中 无法遮盖聚焦元素边框问题，关闭 [#5929](https://github.com/tusen-ai/naive-ui/issues/5929)
+- 修复 `n-badge` 中无法遮盖聚焦元素边框问题，关闭 [#5929](https://github.com/tusen-ai/naive-ui/issues/5929)
 
 ### Features
 

src/date-picker/src/DatePicker.tsx

@@ -950,6 +950,7 @@ export default defineComponent({
       defaultTime: this.defaultTime,
       themeClass: this.themeClass,
       panel: this.panel,
+      inputReadonly: this.inputReadonly || this.mergedDisabled,
       onRender: this.onRender,
       onNextMonth: this.onNextMonth,
       onPrevMonth: this.onPrevMonth,

src/date-picker/src/panel/datetime.tsx

@@ -61,6 +61,7 @@ export default defineComponent({
             themeOverrides={mergedTheme.peerOverrides.Input}
             stateful={false}
             size={this.timePickerSize}
+            readonly={this.inputReadonly}
             class={`${mergedClsPrefix}-date-panel-date-input`}
             textDecoration={this.isDateInvalid ? 'line-through' : ''}
             placeholder={this.locale.selectDate}

src/date-picker/src/panel/datetimerange.tsx

@@ -64,6 +64,7 @@ export default defineComponent({
             themeOverrides={mergedTheme.peerOverrides.Input}
             size={this.timePickerSize}
             stateful={false}
+            readonly={this.inputReadonly}
             class={`${mergedClsPrefix}-date-panel-date-input`}
             textDecoration={this.isStartValueInvalid ? 'line-through' : ''}
             placeholder={this.locale.selectDate}
@@ -95,6 +96,7 @@ export default defineComponent({
             themeOverrides={mergedTheme.peerOverrides.Input}
             stateful={false}
             size={this.timePickerSize}
+            readonly={this.inputReadonly}
             class={`${mergedClsPrefix}-date-panel-date-input`}
             textDecoration={this.isEndValueInvalid ? 'line-through' : ''}
             placeholder={this.locale.selectDate}

src/date-picker/src/panel/use-panel-common.ts

@@ -32,6 +32,7 @@ const usePanelCommonProps = {
   },
   shortcuts: Object as PropType<Shortcuts>,
   defaultTime: [Number, String, Array] as PropType<DefaultTime>,
+  inputReadonly: Boolean,
   onClear: Function,
   onConfirm: Function as PropType<(value: Value | null) => void>,
   onClose: Function as PropType<OnClose>,

src/date-picker/tests/DatePicker.spec.tsx

@@ -151,6 +151,18 @@ describe('n-date-picker', () => {
       inputReadonly: true
     })
     expect(wrapper.find('input').attributes('readonly')).toBe('')
+    await wrapper.setProps({
+      type: 'datetime',
+      panel: true,
+      inputReadonly: true
+    })
+    expect(wrapper.find('input').attributes('readonly')).toBe('')
+    await wrapper.setProps({
+      type: 'datetimerange',
+      panel: true,
+      inputReadonly: true
+    })
+    expect(wrapper.find('input').attributes('readonly')).toBe('')
     wrapper.unmount()
   })