Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@mui/x-date-pickers
Advanced tools
The @mui/x-date-pickers package provides date and time selection components that integrate with Material-UI. It allows developers to implement date pickers, time pickers, date-time pickers, and calendar views with ease, offering a consistent design language and user experience aligned with Material Design guidelines.
DatePicker
The DatePicker component allows users to select a date from a calendar dialog.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
TimePicker
The TimePicker component provides a way for users to select a time.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
function BasicTimePicker() {
const [value, setValue] = React.useState(null);
return (
<TimePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
DateTimePicker
The DateTimePicker combines date and time selection in one control.
import * as React from 'react';
import TextField from '@mui/material/TextField';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
function BasicDateTimePicker() {
const [value, setValue] = React.useState(null);
return (
<DateTimePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
Calendar
The Calendar component displays a full calendar view for date selection without a text field.
import * as React from 'react';
import { Calendar } from '@mui/x-date-pickers/Calendar';
function BasicCalendar() {
const [date, setDate] = React.useState(new Date());
return (
<Calendar
date={date}
onChange={(newDate) => setDate(newDate)}
/>
);
}
react-datepicker is a simple and reusable datepicker component for React. It is similar to @mui/x-date-pickers but does not require Material-UI and has its own styling and layout.
react-dates is an accessible, easily internationalizable, mobile-friendly datepicker library for the web. It is different from @mui/x-date-pickers in that it is built by Airbnb and has a different design aesthetic.
antd, or Ant Design, is a design system that includes a DatePicker component. It is similar to @mui/x-date-pickers but is part of a larger design system with a different design language.
react-day-picker is a flexible date picker component for React. Unlike @mui/x-date-pickers, it does not rely on Material-UI and offers more customization options for the calendar component.
This package is the community edition of the date and time picker components. It's part of MUI X, an open-core extension of MUI Core, with advanced components.
Install the package in your project directory with:
npm install @mui/x-date-pickers
Then install the date library of your choice (if not already installed). The pickers currently support the following date libraries:
// date-fns
npm install date-fns
// or dayjs
npm install dayjs
// or luxon
npm install luxon
// or moment
npm install moment
This component has the following peer dependencies that you will need to install as well.
"peerDependencies": {
"@mui/material": "^5.15.14",
"react": "^17.0.0 || ^18.0.0",
"react-dom": "^17.0.0 || ^18.0.0"
},
After completing the installation, you have to set the dateAdapter
prop of the LocalizationProvider
accordingly.
The supported adapters are exported from @mui/x-date-pickers
.
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
// date-fns
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
// or for dayjs
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
// or for luxon
import { AdapterLuxon } from '@mui/x-date-pickers/AdapterLuxon';
// or for moment
import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
function App({ children }) {
return <LocalizationProvider dateAdapter={AdapterDateFns}>{children}</LocalizationProvider>;
}
Visit https://mui.com/x/react-date-pickers/ to view the full documentation.
7.0.0
Mar 22, 2024
We're excited to announce the first v7 stable release! 🎉🚀
This is now the officially supported major version, where we'll keep rolling out new features, bug fixes, and improvements. Migration guides are available with a complete list of the breaking changes:
We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
viewRenderers
on DateTimePicker
(#12441) @LukasTydensity
for the Data Grid (#12332) @MBilalShafiThe density
is a controlled prop now, if you were previously passing the density
prop to the Data Grid, you will need to do one of the following:
initialState.density
to initialize it. <DataGrid
- density="compact"
+ initialState={{ density: "compact" }}
/>
onDensityChange
callback to update the density
prop accordingly for it to work as expected.+ const [density, setDensity] = React.useState<GridDensity>('compact');
<DataGrid
- density="compact"
+ density={density}
+ onDensityChange={(newDensity) => setDensity(newDensity)}
/>
The selector gridDensityValueSelector
was removed, use the gridDensitySelector
instead.
The props rowBuffer
and columnBuffer
were renamed to rowBufferPx
and columnBufferPx
.
Their value is now a pixel value rather than a number of items. Their default value is now 150
.
The props rowThreshold
and columnThreshold
have been removed.
If you had the rowThreshold
prop set to 0
to force new rows to be rendered more often – this is no longer necessary.
FAQs
The community edition of the Date and Time Picker components (MUI X).
The npm package @mui/x-date-pickers receives a total of 1,806,010 weekly downloads. As such, @mui/x-date-pickers popularity was classified as popular.
We found that @mui/x-date-pickers demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.