Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mui/x-date-pickers-pro

Package Overview
Dependencies
Maintainers
5
Versions
173
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mui/x-date-pickers-pro

The commercial edition of the date picker components (MUI X).

  • 5.0.0-alpha.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
324K
increased by10.78%
Maintainers
5
Weekly downloads
 
Created

What is @mui/x-date-pickers-pro?

@mui/x-date-pickers-pro is a comprehensive set of date and time picker components for React applications. It is part of the MUI (Material-UI) library and provides advanced features for handling date and time inputs, including keyboard navigation, localization, and validation.

What are @mui/x-date-pickers-pro's main functionalities?

Date Picker

The Date Picker component allows users to select a date from a calendar view. It supports various customization options, including different date formats and localization.

import * as React from 'react';
import { DatePicker } from '@mui/x-date-pickers-pro/DatePicker';
import TextField from '@mui/material/TextField';

function BasicDatePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <DatePicker
      label="Basic example"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

export default BasicDatePicker;

Date Time Picker

The Date Time Picker component combines date and time selection in a single interface. It is useful for applications that require precise date and time inputs.

import * as React from 'react';
import { DateTimePicker } from '@mui/x-date-pickers-pro/DateTimePicker';
import TextField from '@mui/material/TextField';

function BasicDateTimePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <DateTimePicker
      label="DateTime picker"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

export default BasicDateTimePicker;

Time Picker

The Time Picker component allows users to select a specific time. It provides a user-friendly interface for time selection and supports various time formats.

import * as React from 'react';
import { TimePicker } from '@mui/x-date-pickers-pro/TimePicker';
import TextField from '@mui/material/TextField';

function BasicTimePicker() {
  const [value, setValue] = React.useState(null);

  return (
    <TimePicker
      label="Time picker"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      renderInput={(params) => <TextField {...params} />}
    />
  );
}

export default BasicTimePicker;

Date Range Picker

The Date Range Picker component allows users to select a range of dates. It is useful for applications that require start and end date inputs, such as booking systems or reporting tools.

import * as React from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import TextField from '@mui/material/TextField';

function BasicDateRangePicker() {
  const [value, setValue] = React.useState([null, null]);

  return (
    <DateRangePicker
      startText="Start"
      endText="End"
      value={value}
      onChange={(newValue) => {
        setValue(newValue);
      }}
      renderInput={(startProps, endProps) => (
        <>
          <TextField {...startProps} />
          <TextField {...endProps} />
        </>
      )}
    />
  );
}

export default BasicDateRangePicker;

Other packages similar to @mui/x-date-pickers-pro

Keywords

FAQs

Package last updated on 04 Apr 2022

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc