https://github.com/eason-dev/react-datepicker

https://github.com/eason-dev/react-datepicker

Last synced: 9 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/eason-dev/react-datepicker
• Owner: eason-dev
• Created: 2021-03-04T05:33:05.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-08-18T09:16:49.000Z (almost 4 years ago)
• Last Synced: 2025-06-29T08:36:17.959Z (11 months ago)
• Language: JavaScript
• Size: 1.32 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-datepicker

My custom react datepicker component

作者: Eason Chang

![](preview.png)

Live Demo: https://kamigami55.github.io/react-datepicker/

Repo: https://github.com/Kamigami55/react-datepicker

## 成果

- 可選擇並顯示日期的 Calendar 元件

- 可鍵盤輸入或用 Calendar 選日期的 DatePicker input

- 包含一個 DemoPage

## 技術重點

- React.js 專用

- 自建專案架構，使用 Parcel.js 和 Babel

- RWD，支援手機版

- styled-components 注入 CSS 樣式

- 使用 [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) 模式來分類元件

- 使用 [Hygen](http://www.hygen.io/) code generator 來生成元件檔案架構，加速開發

- eslint, prettier, stylelint 統一程式碼風格

## 專案架構

- _templates：hygen 模板（for code generating）

- src

  - components：按照 Atomic Design 模式分類元件

    - atoms：基礎元件（按鈕等）

    - molecules：複合元件（Header 等）

    - organisms：完整功能元件

      - Calendar

      - DatePicker

    - templates

      - DemoPageTemplate：Demo 頁樣式

    - pages

      - DemoPage：Demo 頁功能

  - constants

  - utils

## Local 啟動方法

```bash

yarn start

# or

npm start

```