Itpc-react-calendar NPM

Calendar

Calendar for your React app.

Pick days, months, years

Getting started

Installation

Install by executing npm install itpc-react-calendar or yarn add itpc-react-calendar.

Usage

Import by adding import Calendar from 'itpc-react-calendar'.
Use by adding <Calendar />. Use onChangeDate prop for getting new values.

Here's an example of basic usage:

import React, { useState } from 'react';
import Calendar from 'Calendar';

function MyApp() {
  const [value, onChange] = useState(new Date());
  
  const onChangeDate = (value: string) => {
    onChange(value)
  } 
  
  return (
    <div>
      <Calendar
        onChangeDate={onChangeDate}
        currentValue="2021-01-01"
      />
    </div>
  );
}

User guide

Calendar

Displays a complete, interactive calendar.

Props

Prop name	Type	Description	Default value	Example values
currentValue	string	Format date: YYYY-MM-DD	today	`'2000-01-01'`
offsetYear	number	The parameter is the display of years. Before and after the current year	10	`10`
show	boolean	If true, then the element is visible, otherwise hidden	false	`true`
onChangeDate(date: string)	void	Takes in the value of the selected date