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

react-dates

Package Overview
Dependencies
Maintainers
11
Versions
163
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dates

A responsive and accessible date range picker component built with React

  • 21.8.0
  • unpublished
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
352K
decreased by-10.77%
Maintainers
11
Weekly downloads
 
Created

What is react-dates?

The react-dates package is a flexible and customizable date picker component for React applications. It is designed to handle a variety of date selection use cases, including single date pickers, date range pickers, and more. The package is highly configurable and supports internationalization, custom styling, and various input formats.

What are react-dates's main functionalities?

Single Date Picker

This feature allows you to select a single date from a calendar. The code sample demonstrates how to integrate the SingleDatePicker component into a React application, manage its state, and handle date changes.

import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class MyComponent extends React.Component {
  state = {
    date: null,
    focused: false
  };

  render() {
    return (
      <SingleDatePicker
        date={this.state.date}
        onDateChange={date => this.setState({ date })}
        focused={this.state.focused}
        onFocusChange={({ focused }) => this.setState({ focused })}
        id="your_unique_id"
      />
    );
  }
}

Date Range Picker

This feature allows you to select a range of dates from a calendar. The code sample demonstrates how to integrate the DateRangePicker component into a React application, manage its state, and handle date range changes.

import 'react-dates/initialize';
import { DateRangePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class MyComponent extends React.Component {
  state = {
    startDate: null,
    endDate: null,
    focusedInput: null
  };

  render() {
    return (
      <DateRangePicker
        startDate={this.state.startDate}
        startDateId="your_start_date_id"
        endDate={this.state.endDate}
        endDateId="your_end_date_id"
        onDatesChange={({ startDate, endDate }) => this.setState({ startDate, endDate })}
        focusedInput={this.state.focusedInput}
        onFocusChange={focusedInput => this.setState({ focusedInput })}
      />
    );
  }
}

Custom Day Styles

This feature allows you to customize the appearance of individual days in the calendar. The code sample demonstrates how to use the renderDayContents prop to apply custom styles to the days.

import 'react-dates/initialize';
import { SingleDatePicker } from 'react-dates';
import 'react-dates/lib/css/_datepicker.css';

class MyComponent extends React.Component {
  state = {
    date: null,
    focused: false
  };

  render() {
    return (
      <SingleDatePicker
        date={this.state.date}
        onDateChange={date => this.setState({ date })}
        focused={this.state.focused}
        onFocusChange={({ focused }) => this.setState({ focused })}
        id="your_unique_id"
        daySize={50}
        renderDayContents={day => <div style={{ color: 'red' }}>{day.format('D')}</div>}
      />
    );
  }
}

Other packages similar to react-dates

FAQs

Package last updated on 29 Jan 2020

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