feat: date-picker add inputreadonly

Author: tangjinzhou

components/date-picker/RangePicker.jsx

@@ -292,6 +292,7 @@ export default {
       localeCode,
       format,
       separator,
+      inputReadOnly,
     } = props;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('calendar', customizePrefixCls);
@@ -351,6 +352,7 @@ export default {
         value: showDate,
         hoverValue,
         showToday,
+        inputReadOnly,
       },
       on: {
         change: calendarChange,

components/date-picker/createPicker.js

@@ -140,7 +140,7 @@ export default function createPicker(TheCalendar, props) {
       const { panelChange = noop, focus = noop, blur = noop, ok = noop } = listeners;
       const props = getOptionProps(this);
 
-      const { prefixCls: customizePrefixCls, locale, localeCode } = props;
+      const { prefixCls: customizePrefixCls, locale, localeCode, inputReadOnly } = props;
       const getPrefixCls = this.configProvider.getPrefixCls;
       const prefixCls = getPrefixCls('calendar', customizePrefixCls);
       this._prefixCls = prefixCls;
@@ -189,6 +189,7 @@ export default function createPicker(TheCalendar, props) {
           monthCellContentRender,
           renderFooter: this.renderFooter,
           value: showDate,
+          inputReadOnly,
         },
         on: {
           ok,

components/date-picker/interface.js

@@ -36,6 +36,7 @@ export const PickerProps = () => ({
   tagPrefixCls: PropTypes.string,
   tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   align: PropTypes.object.def(() => ({})),
+  inputReadOnly: PropTypes.bool,
 });
 
 export const SinglePickerProps = () => ({

components/vc-calendar/src/Calendar.jsx

@@ -54,6 +54,7 @@ const Calendar = {
     clearIcon: PropTypes.any,
     focusablePanel: PropTypes.bool.def(true),
     inputMode: PropTypes.string,
+    inputReadOnly: PropTypes.bool,
   },
 
   mixins: [BaseMixin, CommonMixin, CalendarMixin],
@@ -250,6 +251,7 @@ const Calendar = {
       sMode,
       renderFooter,
       inputMode,
+      inputReadOnly,
       monthCellRender,
       monthCellContentRender,
       $props: props,
@@ -303,6 +305,7 @@ const Calendar = {
         clearIcon={clearIcon}
         onSelect={this.onDateInputSelect}
         inputMode={inputMode}
+        inputReadOnly={inputReadOnly}
       />
     ) : null;
     const children = [];

components/vc-calendar/src/RangeCalendar.jsx

@@ -119,6 +119,7 @@ const RangeCalendar = {
     renderSidebar: PropTypes.func.def(() => null),
     dateRender: PropTypes.func,
     clearIcon: PropTypes.any,
+    inputReadOnly: PropTypes.bool,
   },
 
   mixins: [BaseMixin, CommonMixin],

components/vc-calendar/src/date/DateInput.jsx

@@ -26,6 +26,7 @@ const DateInput = {
     selectedValue: PropTypes.object,
     clearIcon: PropTypes.any,
     inputMode: PropTypes.string,
+    inputReadOnly: PropTypes.bool,
   },
 
   data() {
@@ -166,7 +167,17 @@ const DateInput = {
   },
 
   render() {
-    const { invalid, str, locale, prefixCls, placeholder, disabled, showClear, inputMode } = this;
+    const {
+      invalid,
+      str,
+      locale,
+      prefixCls,
+      placeholder,
+      disabled,
+      showClear,
+      inputMode,
+      inputReadOnly,
+    } = this;
     const clearIcon = getComponentFromProp(this, 'clearIcon');
     const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
     return (
@@ -193,6 +204,7 @@ const DateInput = {
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             inputMode={inputMode}
+            readOnly={inputReadOnly}
           />
         </div>
         {showClear ? (

components/vc-calendar/src/range-calendar/CalendarPart.jsx

@@ -33,6 +33,7 @@ const CalendarPart = {
     clearIcon: PropTypes.any,
     dateRender: PropTypes.func,
     inputMode: PropTypes.string,
+    inputReadOnly: PropTypes.bool,
   },
   render() {
     const { $props: props } = this;
@@ -59,6 +60,7 @@ const CalendarPart = {
       showWeekNumber,
       showClear,
       inputMode,
+      inputReadOnly,
     } = props;
     const clearIcon = getComponentFromProp(this, 'clearIcon');
     const {
@@ -117,6 +119,7 @@ const CalendarPart = {
         onSelect={inputSelect}
         clearIcon={clearIcon}
         inputMode={inputMode}
+        inputReadOnly={inputReadOnly}
       />
     );
     const headerProps = {

types/date-picker/common.d.ts

@@ -86,4 +86,6 @@ export declare class DatepickerCommon extends AntdComponent {
    * @type any (VNode | slot)
    */
   suffixIcon: any;
+
+  inputReadOnly: boolean;
 }