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

fix: date range picker in filter form/action not showing time picker when showTime=true is set (#5956)

Browse Source
This commit is contained in:
Katherine 2024-12-28 21:28:46 +08:00 committed by GitHub
parent 31ddbc402f
commit 2fd614fd64
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,7 @@ import { DatePicker as AntdDatePicker, DatePickerProps as AntdDatePickerProps, S
import { RangePickerProps } from 'antd/es/date-picker'; import { RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { getPickerFormat } from '@nocobase/utils/client'; import { getPickerFormat, getDateTimeFormat } from '@nocobase/utils/client';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ReadPretty, ReadPrettyComposed } from './ReadPretty'; import { ReadPretty, ReadPrettyComposed } from './ReadPretty';
import { getDateRanges, mapDatePicker, mapRangePicker, inferPickerType } from './util'; import { getDateRanges, mapDatePicker, mapRangePicker, inferPickerType } from './util';
@ -167,7 +167,7 @@ export const DatePicker: ComposedDatePicker = (props: any) => {
DatePicker.ReadPretty = ReadPretty.DatePicker; DatePicker.ReadPretty = ReadPretty.DatePicker;
DatePicker.RangePicker = function RangePicker(props: any) { DatePicker.RangePicker = function RangePicker(props: any) {
const { value, picker = 'date', format } = props; const { value, picker = 'date', format, showTime, timeFormat } = props;
const { t } = useTranslation(); const { t } = useTranslation();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const field: any = useField(); const field: any = useField();
@ -198,14 +198,14 @@ DatePicker.RangePicker = function RangePicker(props: any) {
]; ];
const targetPicker = value ? inferPickerType(value?.[0]) : picker; const targetPicker = value ? inferPickerType(value?.[0]) : picker;
const targetFormat = getPickerFormat(targetPicker) || format; const targetDateFormat = getPickerFormat(targetPicker) || format;
const newProps: any = { const newProps: any = {
utc, utc,
presets, presets,
...props, ...props,
format: targetFormat, format: getDateTimeFormat(targetPicker, targetDateFormat, showTime, timeFormat),
picker: targetPicker, picker: targetPicker,
showTime: props.showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('00:00:00', 'HH:mm:ss')] } : false, showTime: showTime ? { defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('00:00:00', 'HH:mm:ss')] } : false,
}; };
const [stateProps, setStateProps] = useState(newProps); const [stateProps, setStateProps] = useState(newProps);
@ -240,17 +240,18 @@ DatePicker.RangePicker = function RangePicker(props: any) {
])} ])}
onChange={(value) => { onChange={(value) => {
const format = getPickerFormat(value); const format = getPickerFormat(value);
const dateTimeFormat = getDateTimeFormat(value, format, showTime, timeFormat);
field.setComponentProps({ field.setComponentProps({
picker: value, picker: value,
format, format,
}); });
newProps.picker = value; newProps.picker = value;
newProps.format = format; newProps.format = dateTimeFormat;
setStateProps(newProps); setStateProps(newProps);
fieldSchema['x-component-props'] = { fieldSchema['x-component-props'] = {
...props, ...props,
picker: value, picker: value,
format, format: dateTimeFormat,
}; };
field.value = undefined; field.value = undefined;
}} }}
@ -263,19 +264,19 @@ DatePicker.RangePicker = function RangePicker(props: any) {
}; };
DatePicker.FilterWithPicker = function FilterWithPicker(props: any) { DatePicker.FilterWithPicker = function FilterWithPicker(props: any) {
const { picker = 'date', format } = props; const { picker = 'date', format, showTime, timeFormat } = props;
const { utc = true } = useDatePickerContext(); const { utc = true } = useDatePickerContext();
const value = Array.isArray(props.value) ? props.value[0] : props.value; const value = Array.isArray(props.value) ? props.value[0] : props.value;
const compile = useCompile(); const compile = useCompile();
const fieldSchema = useFieldSchema(); const fieldSchema = useFieldSchema();
const targetPicker = value ? inferPickerType(value) : picker; const targetPicker = value ? inferPickerType(value) : picker;
const targetFormat = getPickerFormat(targetPicker) || format; const targetDateFormat = getPickerFormat(targetPicker) || format;
const newProps = { const newProps = {
utc, utc,
...props, ...props,
underFilter: true, underFilter: true,
showTime: props.showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false, showTime: showTime ? { defaultValue: dayjs('00:00:00', 'HH:mm:ss') } : false,
format: targetFormat, format: getDateTimeFormat(targetPicker, targetDateFormat, showTime, timeFormat),
picker: targetPicker, picker: targetPicker,
onChange: (val) => { onChange: (val) => {
props.onChange(undefined); props.onChange(undefined);
@ -316,17 +317,18 @@ DatePicker.FilterWithPicker = function FilterWithPicker(props: any) {
])} ])}
onChange={(value) => { onChange={(value) => {
const format = getPickerFormat(value); const format = getPickerFormat(value);
const dateTimeFormat = getDateTimeFormat(value, format, showTime, timeFormat);
field.setComponentProps({ field.setComponentProps({
picker: value, picker: value,
format, format,
}); });
newProps.picker = value; newProps.picker = value;
newProps.format = format; newProps.format = dateTimeFormat;
setStateProps(newProps); setStateProps(newProps);
fieldSchema['x-component-props'] = { fieldSchema['x-component-props'] = {
...props, ...props,
picker: value, picker: value,
format, format: dateTimeFormat,
}; };
field.value = null; field.value = null;
}} }}

10
packages/core/utils/src/date.ts
View File

@ -225,3 +225,13 @@ export const getPickerFormat = (picker) => {
return 'YYYY-MM-DD'; return 'YYYY-MM-DD';
} }
}; };
export const getDateTimeFormat = (picker, format, showTime, timeFormat) => {
if (picker === 'date') {
if (showTime) {
return format + timeFormat || 'HH:mm:ss';
}
return format;
}
return format;
};