Flexible, Reusable, Mobile friendly DatePicker Component
npm install react-datepicker-configurable
React DatePicker
 









> Flexible, Reusable, Mobile friendly DatePicker Component

* RangeDatePicker
* DatePicker
* Standalone Calendar
The components that you can use are as follows: If you want to configure the DatePicker yourself, you can configure it any way you want through the Default Calendar component.
* TypeScript
* Sass
* React
* Moment.js
In previous versions, moment.js were used. but now it is changed to Day.js to because of bundle size issue (#14)
* Day.js
Day.js is a javascript library for Parse, validate, manipulate, and display dates and times. this component use Day.js library to globalize and control date. You can check the locale list through this link.
``sh`
yarn add @y0c/react-datepickeror
npm install --save @y0c/react-datepicker
`javascript
// import Calendar Component
import React, { Component } from 'react';
import { DatePicker } from '@y0c/react-datepicker';
// import calendar style
// You can customize style by copying asset folder.
import '@y0c/react-datepicker/assets/styles/calendar.scss';
class DatePickerExample extends Component {
onChange = (date) => {
// Day.js object
console.log(date);
// to normal Date object
console.log(date.toDate());
}
render() {
return (
)
}
}
`
You can find more Exmaples and Demo in story book link
Features for i18n are provided by Day.js by default.
see locale list https://github.com/iamkun/dayjs/tree/dev/src/
and you can customize the locale object
`javascript
// use day.js locale
import 'dayjs/locale/ko'
// delivery prop locale string
// or define customize locale object
const locale = {
name: 'ko',
weekdays: 'μΌμμΌ_μμμΌ_νμμΌ_μμμΌ_λͺ©μμΌ_κΈμμΌ_ν μμΌ'.split('_'),
weekdaysShort: 'μΌ_μ_ν_μ_λͺ©_κΈ_ν '.split('_'),
months: '1μ_2μ_3μ_4μ_5μ_6μ_7μ_8μ_9μ_10μ_11μ_12μ'.split('_'),
};
// delivery propr locale object
`
Defaults locale en
1. Copy this project asset folder under scss file
2. Override scss variable you want(_variable.scss)
( red theme examples )
`scss
// red_theme.scss
$base-font-size: 12px;
$title-font-size: 1.3em;
// override scss variable
$primary-color-dark: #e64a19;
$primary-color: #ff5722;
$primary-color-light: #ffccbc;
$primary-color-text: #ffffff;
$accent-color: #ff5252;
$primary-text-color: #212121;
$secondary-text-color: #757575;
$divider-color: #e4e4e4;
$today-bg-color: #fff9c4;
// import mixin
@import "../node_modules/@y0c/react-datepicker/assets/styles/_mixin.scss";
// import app scss
// if you want other style customize
// app.scss copy & rewrite !
@import "../node_modules/@y0c/react-datepicker/assets/styles/app.scss";
`
if you want custom css rewrite app.scss file
Try this example!

This component is managed by a storybook which is combined with develop environment and documentation. If you want develop in local environment, clone project and develop through a storybook
`sh``clone this project
git clone https://github.com/y0c/react-datepicker.gitinstall dependency
yarnstart storybook
yarn run storybook
Open your browser and connect http://localhost:6006
Please fork and use https://codesandbox.io/s/pw6n17pk57 to reproduce your problem.
* Open a new issue(Bug or Feature) on Github
* Join the Gitter room to chat with other developers.
Issue and Pull Request are always welcome!