indproblr-react-datepicker
Version:
Flexible, Reusable, Mobile friendly DatePicker Component
205 lines (137 loc) β’ 6.61 kB
Markdown
<p align="center">
<img src="https://user-images.githubusercontent.com/2585676/52951566-75d55580-33c5-11e9-8e00-b8e227dc0280.png" alt="drawing" width="200"/>
</p>
<h1 align="center">
React DatePicker
</h1>
<p align="center">
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/%40y0c%2Freact-datepicker)
[](https://travis-ci.com/y0c/react-datepicker)
[](https://codecov.io/gh/y0c/react-datepicker)
[](https://codeclimate.com/github/y0c/react-datepicker/maintainability)
[](https://github.com/prettier/prettier)
[](https://david-dm.org/y0c/react-datepicker)
[](https://david-dm.org/y0c/react-datepicker?type=dev)
[](https://y0c.github.io/react-datepicker)
[](https://www.npmjs.com/package/@y0c/react-datepicker)
[](https://gitter.im/react-datepicker/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
</p>
> Flexible, Reusable, Mobile friendly DatePicker Component
## π¬ Intro
### DatePicker
### RangeDatePicker
[Demo in Storybook](https://y0c.github.io/react-datepicker)
[](https://codesandbox.io/s/pw6n17pk57)
## β¨ Major 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`.
## π§ Built With
* TypeScript
* Sass
* React
## π¦ Dependency
* 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](https://github.com/iamkun/dayjs)
`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](https://github.com/iamkun/dayjs/tree/dev/src/locale).
## π² Installation
```sh
yarn add @y0c/react-datepicker
# or
npm install --save @y0c/react-datepicker
```
## π‘ Examples
### Simple 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 (
<DatePicker onChange={this.onChange}/>
)
}
}
```
You can find more Exmaples and Demo in story book link
## π i18n
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
<DatePicker locale="ko" />
// 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
<DatePicker locale={locale} />
```
Defaults locale `en`
### π¨ Themeing
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!
[](https://codesandbox.io/s/1rw1lp8w7j)
## βοΈ Local Development
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.git
# install dependency
yarn
# start storybook
yarn run storybook
```
Open your browser and connect http://localhost:6006
## πΌ Get Support
Please fork and use [https://codesandbox.io/s/pw6n17pk57](https://codesandbox.io/s/pw6n17pk57) to reproduce your problem.
* Open a new issue(Bug or Feature) on [Github](https://github.com/y0c/react-datepicker/issues/new/choose)
* Join the [Gitter room](https://gitter.im/react-datepicker/community) to chat with other developers.
## π¨βπ¦βπ¦ Contribution
Issue and Pull Request are always welcome!
## π License
MIT