极客教程React MUI MobileDateRangePicker API
React MUI 是一个UI库，提供了完全加载的组件，将我们自己的设计系统带给我们的产品级别的组件。MUI是一个用户界面库，为快速、轻松的Web开发提供了预定义和可定制的React组件，这些Material-UI组件基于谷歌的Material Design。
在React Material-UI中， MobileDateRangePicker 组件是一个专门的选择器，允许用户选择一段日期范围。该组件提供了一个适用于移动设备的友好界面，用于选择日期范围，并且在触摸设备上工作良好。Material UI提供了一个可定制的<MobileDateRangePicker/>组件，我们可以通过其props使用它来实现多种目的。
导入语句:
import { MobileDateRangePicker } from
'@mui/x-date-pickers-pro/MobileDateRangePicker';
// or
import { MobileDateRangePicker } from
'@mui/x-date-pickers-pro';
道具清单：
- onChange： 这是一个回调函数，在选定日期改变时触发。
- renderInput： 这个属性允许我们自定义渲染的输入框。这是一个函数。
- value： 这是选择器的值。值的类型是数组。
- acceptRegex： 这是用于检测“接受”的符号的正则表达式。
- calendars： 这是在桌面上渲染的日历数量。
- className： 这是应用于根组件的类名。此属性的类型是字符串。
- closeOnSelect： 这是一个布尔属性。如果设置为true，弹出窗口或对话框在提交完整日期后将立即关闭。
- components: 此属性指定了可重写的组件。该属性的类型是对象。默认值为空对象。
- componentsProps: 此属性指定了每个组件槽位使用的props。该属性的类型是对象。该属性的默认值为空对象。
- dayOfWeekFormatter: 这是一个格式化在日历标题中显示的星期几的函数。该函数的默认值是(day) => day.charAt(0).toUpperCase()。
- defaultCalendarMonth: 当值等于null时，用于显示默认的日历月份。
- DialogProps: 这些是应用到对话框组件的props。该属性的类型是任意类型。
- disableAutoMonthSwitching: 这是一个布尔属性。如果设置为true，则在选择开始日期后，日历不会自动切换到结束日期所在的月份。此属性的默认值为false。
- disabled: 这是一个布尔属性。如果将此属性的值设置为true，则选择器和文本字段将被禁用。此属性的默认值为false。
- disableFuture: 这是一个布尔属性。如果将此属性设置为true，则禁用未来的日期。此属性的默认值为false。
- disableHighlightToday: 这是一个布尔属性。如果将此属性设置为true，则今天的日期将不会被圈出来突出显示。此属性的默认值为false。
- disableMaskedInput: 这是一个布尔属性。如果设置为true，则禁用键盘上的掩码。这要很少使用，并且必须传递适合您格式的正确掩码。此属性的默认值为false。
- disableOpenPicker: 这是一个布尔属性。如果设置为true，则不会渲染打开选择器按钮。此属性的默认值为false。
- disablePast: 这是一个布尔属性。如果设置为true，则禁用过去的日期。此属性的默认值为false。
- endText: 这是结束输入标签和工具栏占位符的文本。此属性的类型为’node’，默认值为’End’。
- getOpenDialogArialText: 这是一个获取打开选择器对话框的aria-label文本的函数。Aria-label文本必须包含选定的日期。
- getViewSwitchingButtonText: 这是一个获取在视图之间切换按钮的arial-label文本的函数。
- InputAdornmentProps: 这些是传递给键盘输入修饰符的props。此prop的类型是对象。
- inputFormat: 这是一个指定输入格式的字符串。
- leftArrowButtonText: 这是一个指定左箭头图标arial-label文本的字符串。
- loading: 这是一个布尔prop。如果设置为true，则在日历视图中渲染LoadingComponent而不是列表视图。它可以用于预加载信息并在日历中显示该信息。此prop的默认值为false。
- mask: 这是一个自定义的掩码。可以用它来覆盖 generate from format。此属性的类型为字符串。
- maxDate: 这是可选择的最大日期。您不能选择大于 maxDate 的日期。
- minDate: 这是可选择的最小日期。您不能选择小于 minDate 的日期。
- onAccept: 这是一个当日期被接受时触发的回调函数。
- onClose: 这是一个当弹出窗口请求关闭时触发的回调函数。必须在受控模式下使用。
- onError: 这是一个当输入值或新值属性验证返回新的验证错误时触发的回调函数。
- onMonthChange: 这是一个回调函数，每当用户更改月份时调用。
- onOpen: 这是一个回调函数，每当弹出窗口请求打开时调用。这应该在受控模式下使用。
- onViewChange: 这是一个回调函数，每当视图发生改变时触发。
- open: 这是一个布尔属性。这控制弹出窗口或对话框的打开状态。该属性的默认值为 false。
- OpenPickerButtonProps: 这些是要传递给键盘装饰按钮的属性。该属性的类型为对象。
- readOnly: 这是一个布尔属性。该属性使选择器为只读。默认值为 false。
- reduceAnimations: 这是一个布尔值属性。此属性禁用繁重的动画。
- renderDay: 这是一个自定义渲染器函数，用于渲染日期。
- renderLoading: 这是一个函数，当加载为真时，显示组件。
- rifmFormatter: 这是一个自定义格式化函数，用于传递给Rifm组件。
- rightArrowButtonText: 这是一个字符串，显示右箭头图标的aria-label文本。
- onYearChange: 这是一个回调函数，每当年份发生变化时被触发。
- shouldDisableDate: 这是一个用于禁用特定日期的函数。
- shouldDisableMonth: 这是一个用于禁用特定日期的函数。
- shouldDisableYear: 这是一个用于禁用特定年份的函数。
- showDaysOutsideCurrentMonth: 这是一个布尔属性。如果设置为true，则显示当前月份外的日期。
- showToolbar: 这是一个布尔属性。如果设置为true，则即使在桌面模式下也显示工具栏。默认值为false。
- startText: 这是一个属性，指定开始输入标签和工具栏占位符的文本。此属性的类型为’node’，默认值为’Start’。
- toolbarFormat:
- 这是一个日期格式，在工具栏中显示。这个属性的类型是字符串。
- toolbarTitle: 这是移动选择器的标题，显示在工具栏中。默认值是“选择日期范围”。
插槽列表： 这是MobileDateRangePicker组件中可用插槽的列表：
- ActionBar： 操作栏，位于选择器视图下方。默认值为PickersActionBar。
- LeftArrowButton： 这是一个按钮，允许您切换到左侧视图。默认值为IconButton。
- LeftArrowIcon： 这是一个出现在左侧视图切换按钮上的图标。默认值为ArrowLeft。
- OpenPickerIcon： 这是一个显示在打开选择器按钮中的图标。默认值为calendar或clock。
- RightArrowButton： 这是一个按钮，允许您切换到右侧视图。默认值为IconButton。
- RightArrowIcon： 这是一个显示在右侧视图切换按钮上的图标。默认值为ArrowRight。
- SwitchViewButton： 这是一个显示在不同日历视图之间切换的按钮。默认值为IconButton。
- SwitchViewIcon： 这是出现在SwitchViewButton中的图标。默认值为ArrowDropDown。
语法：
<MobileDateRangePicker
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
安装React应用：
步骤1： 使用下面的命令创建一个React应用。
npx create-react-app mobile-date-range-picker example
步骤2： 现在进入项目目录。
cd mobile-date-range-picker-example
安装Material-UI： 通过npm/yarn安装Material-UI的源文件，并且它们自动注入所需的CSS。
npm install @material-ui/core
OR
yarn add @material-ui/core
安装所需软件包：
npm install @mui/material @emotion/react @emotion/styled
npm install @mui/x-date-pickers dayjs @mui/x-date-pickers-pro
项目结构：
运行应用程序的步骤：
npm start
示例1：
- App.js
import * as React from "react";
import TextField from "@mui/material/TextField";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import { LocalizationProvider } from
"@mui/x-date-pickers-pro";
import { AdapterDayjs } from
"@mui/x-date-pickers-pro/AdapterDayjs";
import { MobileDateRangePicker } from
"@mui/x-date-pickers-pro/MobileDateRangePicker";
export default function ResponsiveDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
return (
<Stack spacing={3}>
<LocalizationProvider
dateAdapter={AdapterDayjs}
localeText={{
start: "Start Date",
end: "End date"
}}
>
<h1 style={{ color: "green" }}>
GeeksForGeeks
</h1>
<h3>React MUI MobileDateRangePicker API</h3>
<MobileDateRangePicker
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
</Stack>
);
}
输出：
示例2： 这些显示的日期可以通过renderDay函数属性进行自定义。您可以利用内部的DateRangePickerDay组件。
App.js
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import TextField from '@mui/material/TextField';
import { LocalizationProvider } from
'@mui/x-date-pickers-pro';
import { AdapterDayjs } from
'@mui/x-date-pickers-pro/AdapterDayjs';
import { StaticDateRangePicker } from
'@mui/x-date-pickers-pro/StaticDateRangePicker';
import { DateRangePickerDay as MuiDateRangePickerDay }
from '@mui/x-date-pickers-pro/DateRangePickerDay';
const DateRangePickerDay = styled(MuiDateRangePickerDay)(
({
theme,
isHighlighting,
isStartOfHighlighting,
isEndOfHighlighting,
outsideCurrentMonth,
}) => ({
...(!outsideCurrentMonth &&
isHighlighting && {
borderRadius: 0,
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
'&:hover, &:focus': {
backgroundColor: theme.palette.primary.dark,
},
}),
...(isStartOfHighlighting && {
borderTopLeftRadius: '50%',
borderBottomLeftRadius: '50%',
}),
...(isEndOfHighlighting && {
borderTopRightRadius: '50%',
borderBottomRightRadius: '50%',
}),
}),
);
export default function CustomDateRangePickerDay() {
const [value, setValue] = React.useState([null, null]);
const renderWeekPickerDay = (date, dateRangePickerDayProps) => {
return <DateRangePickerDay {...dateRangePickerDayProps} />;
};
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<StaticDateRangePicker
displayStaticWrapperAs="desktop"
label="date range"
value={value}
onChange={(newValue) => setValue(newValue)}
renderDay={renderWeekPickerDay}
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
);
}
输出：
参考: https://mui.com/x/api/date-pickers/mobile-date-range-picker/