React WinDatepicker

Description

A react custom date picker with Windows 10 skin and customizable colors

Functionalities

• Navigate through dates or months
• Switch from dates to months or months to dates
• Set up a min and max range for clickable dates/months
• Multiple language support to translate months and weekdays (english and french for now)

Installation

npm i react-windatepicker

Usage

import "react-windatepicker/style.css";
import { WinDatePicker } from "react-windatepicker";

const App = () => {

  function handleDateChange(date) {
    console.log(date)
  }

  return (
    <WinDatePicker
      inputProps={{
        onDateChange: handleDateChange
      }}
    />
  )
}

Props

Props	Description	Required
inputProps	props to apply on input	true
calendarColors	custom colors to apply on calendar	false

inputProps

Key name	Type	Description	required
setTodayByDefault	boolean	Sets input value to today, default to false	false
onDateChange	function	Date update callback. The argument will give back an object with the raw retrieved date and the date formatted as a YYYY-MM-DD string format	true
React input props	any	You can pass any react input props to complete	false

calendarColors

Key name	Type	Description
background	string	Calendar background color
headerButtons	string	Color of calendar header buttons (up/down arrows and months/dates switch)
headerButtonsHover	string	Color of header buttons on hover
weekDays	string	Color of weekdays
datesButtonsBorderHover	string	Color of date/month buttons border on hover
datesFromChosenMonthButtons	string	Color of date/month buttons from the chosen month/year
datesFromChosenMonthButtonsBackground	string	Background color of date/month buttons from the chosen month/year
datesFromChosenMonthButtonsBorder	string	Border color of date/month buttons from the chosen month/year
date/monthsOutsideChosenMonthButtons	string	Color of date/month buttons outside the chosen month/year
selectedDateButton	string	Color of selected date/month button
selectedDateButtonBackground	string	Background color of selected date/month button
selectedDateButtonBorder	string	Border color of selected date/month button
todayButton	string	Color of today's date/month button
todayButtonBackground	string	Background color of today's date/month button
todayButtonBorder	string	Border color of today's date/month button
todayButtonSecondBorder	string	Second border color of today's date/month button (smaller than the first one)
weekendsButtonsBackground	string	Background color of weekend date/month buttons
disabledButtons	string	Color of disabled date/month buttons (dates / month and up/down arrows buttons)
disabledButtonsBackground	string	Background color of disabled date/month buttons
clickedButton	string	Color of clicked date/month button

Types

type Color = string

interface CalendarColors {
    background?: Color
    headerButtons?: Color
    headerButtonsHover?: Color
    weekDays?: Color
    datesButtonsBorderHover?: Color
    datesFromChosenMonthButtons?: Color
    datesFromChosenMonthButtonsBackground?: Color
    datesFromChosenMonthButtonsBorder?: Color
    datesOutsideChosenMonthButtons?: Color
    selectedDateButton?: Color
    selectedDateButtonBackground?: Color
    selectedDateButtonBorder?: Color
    todayButton?: Color
    todayButtonBackground?: Color
    todayButtonBorder?: Color
    todayButtonSecondBorder?: Color
    weekendsButtonsBackground?: Color
    disabledButtons?: Color
    disabledButtonsBackground?: Color
    clickedButton?: Color
}

type OnDateChange = {
    /** "YYYY-MM-DD" format */
    formatted: string | ""
    /** Date format */
    raw: Date | null
}

WinDatePickerProps {
  inputProps:
  /** Any react input props */
  ComponentProps<"input"> & {
    /** required date update callback */
    onDateChange: (date: OnDateChange) => any
    /** sets input value to today, default to false */
    setTodayByDefault?: boolean
  }
  calendarColors?: CalendarColors
}

Examples

You can find some examples here : Link

CodeSandbox examples :

Basic (With TypeScript): Link

Colors : Link

Range : Link

TBA

• More translated langs
• Accessibility improvement with keyboard navigation