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

react-datetime

Package Overview
Dependencies
Maintainers
2
Versions
83
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-datetime

A lightweight but complete datetime picker React.js component.

  • 2.8.10
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
216K
decreased by-2.88%
Maintainers
2
Weekly downloads
 
Created

What is react-datetime?

The react-datetime package is a versatile and flexible date and time picker component for React applications. It allows users to select dates, times, or both, and provides various customization options to fit different use cases.

What are react-datetime's main functionalities?

Basic Date Picker

This feature allows users to select a date from a calendar view. The basic date picker is easy to implement and provides a straightforward way to choose dates.

import React from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

const BasicDatePicker = () => (
  <Datetime />
);

export default BasicDatePicker;

Time Picker

This feature allows users to select a time without selecting a date. By setting the dateFormat prop to false, the component will only display the time picker.

import React from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

const TimePicker = () => (
  <Datetime dateFormat={false} />
);

export default TimePicker;

Date and Time Picker

This feature combines both date and time selection in a single component. Users can pick both a date and a time, making it useful for scheduling events.

import React from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

const DateTimePicker = () => (
  <Datetime />
);

export default DateTimePicker;

Custom Date Format

This feature allows customization of the date format. By setting the dateFormat prop, users can specify how the date should be displayed.

import React from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

const CustomDateFormat = () => (
  <Datetime dateFormat="DD-MM-YYYY" />
);

export default CustomDateFormat;

Disable Past Dates

This feature disables the selection of past dates. By using the isValidDate prop, users can define a function to restrict date selection.

import React from 'react';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

const DisablePastDates = () => (
  <Datetime isValidDate={(current) => current.isAfter(Datetime.moment().subtract(1, 'day'))} />
);

export default DisablePastDates;

Other packages similar to react-datetime

Keywords

FAQs

Package last updated on 24 Apr 2017

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