📆 react-semantic-ui-datepickers

Datepickers built with Semantic UI for React and Dayzed

Overview

Semantic UI for React doesn't have a datepicker and the best solutions don't fit with its design. This library tries to solve this problem providing a component that can act as a basic or range datepicker.

It supports most props of Form.Input and Dayzed components. Check the supported props section for more information.

Installation

npm install --save react-semantic-ui-datepickers

yarn add react-semantic-ui-datepickers

This package also depends on react, prop-types, and semantic-ui-react. Please make sure you have them installed as well.

Usage

import React from 'react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
import ptLocale from 'react-semantic-ui-datepickers/dist/locales/pt-BR';
import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';

const AppWithBasic = ({ onDateChange }) => (
  <SemanticDatepicker onDateChange={onDateChange} />
);

const AppWithRangeAndInPortuguese = ({ onDateChange }) => (
  <SemanticDatepicker
    locale={ptLocale}
    onDateChange={onDateChange}
    type="range"
  />
);

More examples here.

Supported Props

Own Props

property	type	required	default	description
clearable	boolean	no	true	Allows the user to clear the value
format	string	no	'YYYY-MM-DD'	Specifies how the date will be formatted using the date-fns' format
keepOpenOnClear	boolean	no	false	Keeps the datepicker open (or opens it if it's closed) when the clear icon is clicked
keepOpenOnSelect	boolean	no	false	Keeps the datepicker open when a date is selected
locale	object	no	en-US	Object with the labels to be used on the library PS: Feel free to submit PR's with more locales!
onDateChange	function	yes		Callback fired when the value changes
type	string	no	basic	Type of input to render. Available options: 'basic' and 'range'
filterDate	function	no	() => true	Function that receives each date and returns a boolean to indicate whether it is enabled or not
selected	Date, arrayOf(Date)	no		Default date selected
pointing	string	no	'left'	Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'
clearOnSameDateClick	boolean	no	true	Controls whether the datepicker's state resets if the same date is selected in succession.

Form.Input Props

disabled
error
icon
iconPosition
id
label
loading
name
placeholder
size
transparent
readOnly

Dayzed Props

date
maxDate
minDate
firstDayOfWeek
showOutsideDays
selected

Customization

In order to customize the elements, you can override the styles of the classes below:

clndr-cell
clndr-cell-today
clndr-cell-inrange
clndr-cell-disabled
clndr-cell-selected
clndr-cell-other-month

If you think this way of customizing is not a good idea, feel free to open a issue suggesting something else. This was the simplest solution I thought.

Roadmap

Improve accessibility

@donysukardi did some work on accessibility in the BaseDatePicker, but I couldn't get it working correcly. Feel free to help on this!
Add more tests (including e2e)

The current threshold is pretty useless 😕
Add TypeScript definitions (or migrate to TypeScript)