React-Styled-Calendar

A simple React Datepicker component built with styled-components and date-fns

DEMO

DatePicker

RangePicker

Play with them on Storybook

Installation

npm install react-styled-calendar --save

Example Usage

import react from 'react';
import ReactDOM from 'react-dom';
import { DatePicker } from 'react-styled-calendar';


function App() {
  return (
    <div>
      <DatePicker />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Feature

• support IE9+, Chrome, Firefox, Safari, and Opera
• support en_US and zh_CN locale(UI)
• support several select panels(hour, date, week, month)
• support Range Selector

API

API for DatePicker

name	type	default	description
showTimeSelector	Boolean	false	control the display of the TimeSelector
showConfirmButton	Boolean	false	control the display of the Confirm Button
showCancelButton	Boolean	true	control the display of the Cancel Button
formatWeek	String	'dddd'	A string used to override the default formattting of the weekday in the Calendar Header
formatMonthYear	String	'MMMM YYYY'	A string used to override the default formatting of the month and year in Calendar Header
formatDateInput	String	'YYYY-MM-DD HH:mm'	A string used to specify the format of the date in dateinput component
confirmButtonMessage	String	'Confirm'	A string specify the message shows up at the confirm button
cancelButtonMessage	String	'Cancel'	A string specify the message shows up at the cancel button
timeSelectorMessage	String	'Pick Up A Time !'	A string specify the content of the switch of the time selector
withLabel	Boolean	false	Whether show up the label of the Date input
labelMessage	String	'Date'	The content of the date input label
minDate	Date	undefined	The minimum date that can be selected from the calendar
maxDate	Date	undefined	The maximum date that can be selected from the calendar
onDateSelected	Function	( dateSelected ) => { console.log(dateSelected.toLocaleDateString()) };	The handler function which is called once a date is selected
view	String	'day'	It specifies the view of the datepicker, it can be one of ['day', 'week', 'month']
defaultDate	Date	new Date()	It specifies the initial selected date of the DatePicker component

API for RangePicker

name	type	default	description
minDate	Date	undefined	The minimum date that can be selected from the calendar
maxDate	Date	undefined	The maximum date that can be selected from the calendar
className	String	''	The customized className which is used on the wrapper of the RangePicker
withLabel	Boolean	false	Whether show up the label of the Date input
fromInputLabel	String	'From'	Specify the content of the first date input label
toInputLael	String	'To'	Specify the content of the second date input label
onRangeSelected	Function	(from, to) => { console.log(from, to); }	The handler function which is called once a range is selected
defaultFromDate	Date	new Date()	Specify the initial selected date of the first (from) input
defaultToDate	Date	new Date()	Specify the initial selected date of the second (to) input

Todos

• Implement the customized theme.
• test