chore: set inputReadOnly for DatePicker based on device type (#6065)

packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx

@@ -15,7 +15,7 @@ import React, { useState } from 'react';
 import { getPickerFormat, getDateTimeFormat } from '@nocobase/utils/client';
 import { useTranslation } from 'react-i18next';
 import { ReadPretty, ReadPrettyComposed } from './ReadPretty';
-import { getDateRanges, mapDatePicker, mapRangePicker, inferPickerType } from './util';
+import { getDateRanges, mapDatePicker, mapRangePicker, inferPickerType, isMobile } from './util';
 import { useCompile } from '../../';
 
 interface IDatePickerProps {
@@ -54,7 +54,6 @@ export const DatePicker: ComposedDatePicker = (props: any) => {
   const value = Array.isArray(props.value) ? props.value[0] : props.value;
   const newProps = {
     utc,
-    inputReadOnly: true,
     ...props,
     showTime: props.showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
   };
@@ -99,7 +98,6 @@ DatePicker.RangePicker = function RangePicker(props: any) {
   const newProps: any = {
     utc,
     presets,
-    inputReadOnly: true,
     ...props,
     format: getDateTimeFormat(targetPicker, targetDateFormat, showTime, timeFormat),
     picker: targetPicker,
@@ -163,6 +161,7 @@ DatePicker.RangePicker = function RangePicker(props: any) {
 
 DatePicker.FilterWithPicker = function FilterWithPicker(props: any) {
   const { picker = 'date', format, showTime, timeFormat } = props;
+  const isMobileMedia = isMobile();
   const { utc = true } = useDatePickerContext();
   const value = Array.isArray(props.value) ? props.value[0] : props.value;
   const compile = useCompile();
@@ -171,7 +170,7 @@ DatePicker.FilterWithPicker = function FilterWithPicker(props: any) {
   const targetDateFormat = getPickerFormat(targetPicker) || format;
   const newProps = {
     utc,
-    inputReadOnly: true,
+    inputReadOnly: isMobileMedia,
     ...props,
     underFilter: true,
     showTime: showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,

packages/core/client/src/schema-component/antd/date-picker/demos/demo1.tsx

@@ -16,7 +16,6 @@ const schema = {
       'x-component-props': {
         dateFormat: 'YYYY/MM/DD',
         showTime: true,
-        inputReadOnly: false,
       },
       'x-reactions': {
         target: '*(read1,read2)',

packages/core/client/src/schema-component/antd/date-picker/demos/demo2.tsx

@@ -17,7 +17,6 @@ const schema = {
         dateFormat: 'YYYY/MM/DD',
         showTime: true,
         gmt: true,
-        inputReadOnly: false,
       },
       default: '2022-06-04T15:00:00.000Z',
       'x-reactions': {

packages/core/client/src/schema-component/antd/date-picker/demos/demo3.tsx

@@ -17,7 +17,6 @@ const schema = {
         dateFormat: 'YYYY/MM/DD',
         showTime: false,
         utc: false,
-        inputReadOnly: false,
       },
       'x-reactions': {
         target: '*(read1,read2)',

packages/core/client/src/schema-component/antd/date-picker/demos/demo7.tsx

@@ -18,7 +18,6 @@ const schema = {
         showTime: false,
         gmt: true,
         utc: true,
-        inputReadOnly: false,
       },
       'x-reactions': {
         target: '*(read1,read2)',

packages/core/client/src/schema-component/antd/date-picker/demos/demo8.tsx

@@ -18,7 +18,6 @@ const schema = {
         showTime: false,
         gmt: false,
         utc: true,
-        inputReadOnly: false,
       },
       'x-reactions': {
         target: '*(read1,read2)',

packages/core/client/src/schema-component/antd/date-picker/util.ts

@@ -106,12 +106,14 @@ export const handleDateChangeOnForm = (value, dateOnly, utc, picker, showTime, g
 };
 
 export const mapDatePicker = function () {
+  const isMobileMedia = isMobile();
   return (props: any) => {
     const { dateOnly, showTime, picker = 'date', utc, gmt, underFilter } = props;
     const format = getDefaultFormat(props);
     const onChange = props.onChange;
     return {
       ...props,
+      inputReadOnly: isMobileMedia,
       format: format,
       value: str2moment(props.value, props),
       onChange: (value: Dayjs | null, dateString) => {
@@ -126,8 +128,12 @@ export const mapDatePicker = function () {
     };
   };
 };
+export function isMobile() {
+  return window.matchMedia('(max-width: 768px)').matches;
+}
 
 export const mapRangePicker = function () {
+  const isMobileMedia = isMobile();
   return (props: any) => {
     const format = getDefaultFormat(props) as any;
     const onChange = props.onChange;
@@ -136,6 +142,7 @@ export const mapRangePicker = function () {
       ...props,
       format: format,
       value: str2moment(props.value, props),
+      inputReadOnly: isMobileMedia,
       onChange: (value: Dayjs[]) => {
         if (onChange) {
           if (underFilter) {