React Design Date Picker

A clean Date Picker to be used with React functional components.

Features

• Date Picker for React Functional Components.
• 2 different layouts.
• Binding for useState hooks.
• Start date & End date or Single date option.
• Set weekday to start on monday or sunday.
• Translation & Locales setting.

How-to

Install

npm i react-design-date-picker

Import the dependency

import DatePicker from "./DatePicker"

Edit the options

const options = {
    Design: "Classic", // Classic or Compact
    Locales: "se-sv", // Locales - Set "en-us" for default
    StartWeekOnSunday: true, // False sets the start on monday
    FullFunctionality: true, // True = Start & End Date | False = Only one date
    Hooks: {
      start: startDate, // Set state if FullFunctionality is true or false
      setStart: setStartDate, // Set setState if FullFunctionality is true or false
      end: endDate, // Set state if FullFunctionality is true and false if FullFunctionality is false
      setEnd: setEndDate, // Set setState if FullFunctionality is true and false if FullFunctionality is false
    },
    Translate: true, // Set to true if you want to enable Translation object below. If false then it's english as default.
    Translation: {
      change: "Byt datum",
      startDate: "Start Datum",
      endDate: "Slut Datum",
      pickMonth: "Välj månad",
      pickYear: "Välj år"
    },
  }; 

Add the module

<DatePicker options={options} />

To-Do

• Design the draggable element.
• Create a mobile design.
• Create and verify Responsive design.
• Add main color and sub-color options.
• Add accessability keyboard support.
• Validate that it's working as expected in different timezones.
• Add Framer animations.
• Create a infinity scroll layout.
• Connect outer setHooks with internal date values.
• Fix minor design issues on Compact design.
• Create tests using Jest framework.
• Add a time input.

Known Bugs

License

Copyright (c) 2020 Johannes Eklund and individual contributors. Licensed under MIT license, see LICENSE for the full license.