All Projects → tresko → React Datepicker

tresko / React Datepicker

Licence: mit
An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to React Datepicker

React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (-65.08%)
Mutual labels:  grid, styled-components
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (-52.38%)
Mutual labels:  grid, styled-components
Griz
Grid library for React; Rescue the cat
Stars: ✭ 99 (-60.71%)
Mutual labels:  grid, styled-components
Gridiron
Feature-Packed React Grid Framework
Stars: ✭ 8 (-96.83%)
Mutual labels:  grid, styled-components
Hugo Theme Bootstrap4 Blog
A blogging-centric Bootstrap v4 theme for the Hugo static site generator.
Stars: ✭ 191 (-24.21%)
Mutual labels:  i18n, rtl
React Boilerplate Cra Template
🔥 Setup Create React App with React Boilerplate. Highly scalable & Best DX & Performance Focused & Best practices.
Stars: ✭ 859 (+240.87%)
Mutual labels:  i18n, styled-components
Re Jok
A React UI Component library built with styled-components
Stars: ✭ 102 (-59.52%)
Mutual labels:  grid, styled-components
React Boilerplate Typescript
🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices ( Typescript )
Stars: ✭ 279 (+10.71%)
Mutual labels:  i18n, styled-components
Grid
This package has moved and renamed
Stars: ✭ 2,079 (+725%)
Mutual labels:  grid, styled-components
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (-37.7%)
Mutual labels:  grid, styled-components
React Boilerplate
🔥 A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
Stars: ✭ 28,151 (+11071.03%)
Mutual labels:  i18n, styled-components
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+841.67%)
Mutual labels:  i18n, datepicker
Styled Css Grid
🍱 A tiny CSS grid layout for React
Stars: ✭ 562 (+123.02%)
Mutual labels:  grid, styled-components
Veluxi Starter
Veluxi Vue.js Starter Project with Nuxt JS and Vuetify
Stars: ✭ 39 (-84.52%)
Mutual labels:  i18n, rtl
React Styled Flexboxgrid
Grid system based on styled-components and flexbox for React
Stars: ✭ 515 (+104.37%)
Mutual labels:  grid, styled-components
Rtlcss
Framework for transforming Cascading Style Sheets (CSS) from Left-To-Right (LTR) to Right-To-Left (RTL)
Stars: ✭ 1,363 (+440.87%)
Mutual labels:  i18n, rtl
awrora-starter
Landing page template built with one of most popular javascript library Vue.JS, Vuetify (Material Design) and Nuxt.JS with SSR.
Stars: ✭ 38 (-84.92%)
Mutual labels:  i18n, rtl
web-starter-kit
An opinionated starter kit with styled-system, graphql-hooks, mobx and nextjs (PWA)
Stars: ✭ 17 (-93.25%)
Mutual labels:  styled-components, rtl
React Next Boilerplate
🚀 A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: ✭ 129 (-48.81%)
Mutual labels:  i18n, styled-components
Styled Bootstrap Components
The bootstrap components made with styled-components 💅
Stars: ✭ 196 (-22.22%)
Mutual labels:  grid, styled-components

@datepicker-react/styled

Gzip size Coverage Status Build Status Netlify Status

NPM

An easily internationalizable, accessible, mobile-friendly datepicker library for the web, build with styled-components.

example

if anyone would like to continue developing this project, please contact me at [email protected] and I will transfer the ownership of the project. I don’t intend to maintain the project anymore because I don’t have enough time.

How to build your own datepicker?

Simple. Use React hooks (@datepicker-react/hooks).

Live Playground

For examples of the datepicker in action, go to https://react-datepicker.netlify.com/.

OR

To run that demo on your own computer:

Getting Started

Install

yarn add @datepicker-react/styled styled-components

Include component

import {DateRangeInput, DateSingleInput, Datepicker} from '@datepicker-react/styled'

DateRangeInput

The DateRangeInput is a fully controlled component that allows users to select a date range. You can control the selected dates using the startDate, endDate, and onDatesChange props as shown below. Similarly, you can control which input is focused as well as calendar visibility (the calendar is only visible if focusedInput is defined) with the focusedInput and onFocusChange props as shown below.

Here is the minimum REQUIRED setup you need to get the DateRangeInput working:

IE11 is not supported

import React, {useReducer} from 'react'
import {DateRangeInput} from '@datepicker-react/styled'

const initialState = {
  startDate: null,
  endDate: null,
  focusedInput: null,
}

function reducer(state, action) {
  switch (action.type) {
    case 'focusChange':
      return {...state, focusedInput: action.payload}
    case 'dateChange':
      return action.payload
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <DateRangeInput
      onDatesChange={data => dispatch({type: 'dateChange', payload: data})}
      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
      startDate={state.startDate} // Date or null
      endDate={state.endDate} // Date or null
      focusedInput={state.focusedInput} // START_DATE, END_DATE or null
    />
  )
}

The following is a list of other OPTIONAL props you may provide to the DateRangeInput to customize appearance and behavior to your heart's desire.

displayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'
phrases?: DateRangeInputPhrases
showStartDateCalendarIcon?: boolean // Default: true
showEndDateCalendarIcon?: boolean // Default: true
onClose?(): void
vertical?: boolean // Default: false
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
rtl?: boolean // Default: false
placement?: 'top' | 'bottom' // Default: bottom
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 1
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
startDateInputId?: string
endDateInputId?: string

Datepicker

The Datepicker is a fully controlled component that allows users to select a date range. You can control the selected dates using the startDate, endDate, and onDatesChange props as shown below. Similarly, you can control which input is focused with the focusedInput prop.

Here is the minimum REQUIRED setup you need to get the Datepicker working:

IE11 is not supported

import React, {useState} from 'react'
import {Datepicker, START_DATE} from '@datepicker-react/styled'

function App() {
  const [state, setState] = useState({
    startDate: null,
    endDate: null,
    focusedInput: START_DATE,
  })

  function handleDatesChange(data: OnDatesChangeProps) {
    if (!data.focusedInput) {
      setState({...data, focusedInput: START_DATE})
    } else {
      setState(data)
    }
  }

  return (
    <Datepicker
      onDatesChange={handleDatesChange}
      startDate={state.startDate} // Date or null
      endDate={state.endDate} // Date or null
      focusedInput={state.focusedInput} // START_DATE, END_DATE or null
    />
  )
}

The following is a list of other OPTIONAL props you may provide to the Datepicker to customize appearance and behavior to your heart's desire.

phrases?: DatepickerPhrases
displayFormat?: string | FormatFunction // Default: 'MM/DD/YYYY'
onClose?(): void
showResetDates?: boolean // Default: true
showSelectedDates?: boolean // Default: true
showClose?: boolean // Default: true
vertical?: boolean // Default: false
rtl?: boolean // Default: false
unavailableDates?: Date[] // Default: []
minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number // Default: 2
minBookingDays?: number // Default: 1
exactMinBookingDays?: boolean // Default: false
firstDayOfWeek?: FirstDayOfWeek // Default: 0
initialVisibleMonth?: Date
isDateBlocked?(date: Date): boolean
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode

DateSingleInput

The DateSingleInput is a fully controlled component that allows users to select a date. You can control the selected date using the date and onDateChange props as shown below. Similarly, you can control calendar visibility (the calendar is only visible if showDatepicker is true) with the showDatepicker and onFocusChange props as shown below.

Here is the minimum REQUIRED setup you need to get the DateSingleInput working:

IE11 is not supported

import React, {useReducer} from 'react'
import {DateSingleInput} from '@datepicker-react/styled'

const initialState = {
  date: null,
  showDatepicker: false,
}

function reducer(state, action) {
  switch (action.type) {
    case 'focusChange':
      return {...state, showDatepicker: action.payload}
    case 'dateChange':
      return action.payload
    default:
      throw new Error()
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  return (
    <DateSingleInput
      onDateChange={data => dispatch({type: 'dateChange', payload: data})}
      onFocusChange={focusedInput => dispatch({type: 'focusChange', payload: focusedInput})}
      date={state.date} // Date or null
      showDatepicker={state.showDatepicker} // Boolean
    />
  )
}

The following is a list of other OPTIONAL props you may provide to the DateSingleInput to customize appearance and behavior to your heart's desire.

minBookingDate?: Date
maxBookingDate?: Date
numberOfMonths?: number
firstDayOfWeek?: FirstDayOfWeek
displayFormat?: string | FormatFunction
phrases?: DateSingleInputPhrases
showCalendarIcon?: boolean
vertical?: boolean
showResetDate?: boolean
showClose?: boolean
rtl?: boolean
placement?: 'top' | 'bottom'
initialVisibleMonth?: Date
unavailableDates?: Date[] // Default: []
isDateBlocked?(date: Date): boolean
onClose?(): void
dayLabelFormat?(date: Date): string
weekdayLabelFormat?(date: Date): string
monthLabelFormat?(date: Date): string
onDayRender?(date: Date): React.ReactNode
inputId?: string

Theming

@datepicker-react/styled supports theming with Styled components ThemeProvider and Styled System theme-based style.

<ThemeProvider
  theme={{
    breakpoints: ['32em', '48em', '64em'],
    reactDatepicker: {
      daySize: [36, 40],
      fontFamily: 'system-ui, -apple-system',
      colors: {
        accessibility: '#D80249',
        selectedDay: '#f7518b',
        selectedDayHover: '#F75D95',
        primaryColor: '#d8366f',
      },
    },
  }}
>
  ...
</ThemeProvider>

Who's using

LifeOnScreen

Articles

License

Licensed under the MIT License, Copyright © 2019-present Miha Sedej.

See LICENSE for more information.


Buy me a coffee

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].