fm453/nocobase
1
0
Fork 0
mirror of https://gitee.com/nocobase/nocobase.git synced 2025-05-08 06:59:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Katherine 2025-01-15 12:15:46 +08:00 committed by GitHub
parent 8ba098faeb
commit 5bdada4c1f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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,

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

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

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

@ -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': {

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

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

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

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

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

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

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

@ -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) {