Giter VIP home page Giter VIP logo

react-day-picker's Introduction

React DayPicker

React DayPicker is a date picker component for React. Renders a calendar where the user can browse months to select days. DayPicker is customizable, works great with input fields and can be styled to match any design.

➡️ react-day-picker.js.org for guides, examples and API reference.

Shows a screenshot of the React DayPicker component in a browser’s window.

Main features

  • ☀️ Select days, ranges or whatever
  • 🧘‍♀️ using date-fns as date library
  • 🌎 Localizable into any language
  • ➡️ Keyboard navigation
  • ♿️ WAI-ARIA support
  • 🤖 Written in TypeScript
  • 🎨 Easy to style and customize
  • 🗓 Support multiple calendars
  • 📄 Easy to integrate input fields

Installation

npm install react-day-picker date-fns  # using npm
pnpm install react-day-picker date-fns # using pnpm
yarn add react-day-picker date-fns     # using yarn
npm version npm downloads stars sponsors

Example

import React from 'react';

import { format } from 'date-fns';
import { DayPicker } from 'react-day-picker';
import 'react-day-picker/dist/style.css';

export default function Example() {
  const [selected, setSelected] = React.useState<Date>();

  let footer = <p>Please pick a day.</p>;
  if (selected) {
    footer = <p>You picked {format(selected, 'PP')}.</p>;
  }
  return (
    <DayPicker
      mode="single"
      selected={selected}
      onSelect={setSelected}
      footer={footer}
    />
  );
}

Documentation

See react-day-picker.js.org for guides, examples and API reference of the latest version. Docs for version 7 are at react-day-picker-v7.netlify.app.

react-day-picker's People

Contributors

adidahiya avatar bartpeeters avatar boatkorachal avatar davidspiess avatar eldritchideen avatar gpbl avatar greenkeeper[bot] avatar hannescalibrate avatar hydrognomik avatar johnjesse avatar juhq avatar kimamula avatar kradical avatar limscoder avatar makenosound avatar mjomble avatar pwolfert avatar raisiqueira avatar rnons avatar rolandsfr avatar ryangiordano avatar saenglert avatar smesgr avatar srph avatar stanislav-ermakov avatar strax avatar susielu avatar tjfred35 avatar tomasberg avatar trysound avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.