react-awesome-date

React-awesome-date

Installation

---

via NPM

npm i react-awesome-date

via Yarn

yarn add react-awesome-date

via CDN (unpkg)

https://unpkg.com/react-awesome-date@latest/dest/react-awesome-date.js

Be sure to include the style sheet. It is located in the /styles folder. You must use two css files. One for calendar styles, and one for the styles user interface

import "react-awesome-date/styles/index.css"
import "react-awesome-date/styles/ui_default.css"

Or

<link rel="stylesheet" href="https://unpkg.com/react-awesome-date@latest/index.css">
<link rel="stylesheet" href="https://unpkg.com/react-awesome-date@latest/ui_default.css">

Usage

import Date from 'react-awesome-date';

<Date year={1998} month={3} />

By default, the date will be inserted for the current month and year

<Date />

Event

Get the selected date using onSelect

function onSelect(date){
	// ...
}
<Date onSelect={onSelect}/>

• value
  • date
    Current selected day of the month
  • day
    Current selected day of the week
  • month
    Returns the month
  • year
    Returns the year

Custom render

Organize your own rendering or use ready-made samples

import {headerRenderer as input} from 'react-awesome-date/ui/input';
import "react-awesome-date/styles/ui_input.css";

<Date headerRenderer={input}/>

The result is

import {headerRenderer as onlymonth} from 'react-awesome-date/ui/onlymonth';
import "react-awesome-date/styles/ui_onlymonth.css";

<Date headerRenderer={onlymonth}/>

The result is

Make your custom renderer