royair / react-datepicker

demo:

Home Page:https://royair.github.io/react-datepicker/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Datepicker

Create custom designed calendar component according the design in design folder.

  • The calendar should allow date selection between today till 12+ months.
  • Passed days of the current month are not selectable
  • Fonts are included in fonts folder

The main requirnments are:

  • usage of any other UI datepickers is disallowed. Everything should be custom code.
  • usage of CSS frameworks is disallowed
  • usage of date manipulation libraries is allowed
  • data model should be strictly separated from UI (use Redux, Mobx, React Context or any other state management). Calendar should be able to be easily cloned by providing another data model.
  • UI should be exactly the same as provided PNG images
  • calendar should be easalliy
  • add some transition effects to: hovers, menu openings, etc
  • when clicked, print selected date as Date() object of JS.
  • Only selectable dates can be clicked

Fonts

  • fonts are included in fonts folder
  • Calendar title - Almoni 19px bold
  • Dropdown - Almoni 15px
  • Day names - Almoni 14px
  • Day numbers - Open Sans 12px

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Final

Upload your work to github and provide link

About

demo:

https://royair.github.io/react-datepicker/


Languages

Language:JavaScript 75.1%Language:CSS 20.0%Language:HTML 4.8%