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

react-datepicker

Package Overview
Dependencies
Maintainers
2
Versions
187
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-datepicker

A simple and reusable datepicker component for React

  • 7.5.0
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created

What is react-datepicker?

The react-datepicker npm package is a simple and reusable date-picker component for React applications. It allows users to select dates and date ranges with ease and provides various customization options to suit different needs.

What are react-datepicker's main functionalities?

Basic date selection

This feature allows users to select a single date. The DatePicker component is imported and used within a React component, with state management to handle the selected date.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker selected={startDate} onChange={date => setStartDate(date)} />
  );
}

export default App;

Date range selection

This feature enables users to select a date range. The DatePicker component is configured to allow range selection, and the state is managed for both the start and end dates.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  const [endDate, setEndDate] = useState(new Date());
  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={dates => {
        const [start, end] = dates;
        setStartDate(start);
        setEndDate(end);
      }}
    />
  );
}

export default App;

Custom date format

This feature allows customization of the date format displayed in the date picker. The dateFormat prop is used to specify the desired date format.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      dateFormat='yyyy/MM/dd'
    />
  );
}

export default App;

Inline calendar

This feature displays the date picker as an inline calendar, rather than a dropdown. The inline prop is set to true to enable this mode.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

function App() {
  const [startDate, setStartDate] = useState(new Date());
  return (
    <DatePicker
      inline
      selected={startDate}
      onChange={date => setStartDate(date)}
    />
  );
}

export default App;

Other packages similar to react-datepicker

Keywords

FAQs

Package last updated on 17 Oct 2024

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