📆 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
Usage
Supported Props
Customization
Roadmap
Contributors
LICENSE

Installation

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

yarn add react-semantic-ui-datepickers

This package also depends on react 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 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';

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

const AppWithRangeAndInPortuguese = ({ onChange }) => (
  <SemanticDatepicker locale="pt-BR" onChange={onChange} type="range" />
);

More examples here.

Supported Props

Own Props

property	type	required	default	description
allowOnlyNumbers	boolean	no	true	Allows the user enter only numbers
clearOnSameDateClick	boolean	no	true	Controls whether the datepicker's state resets if the same date is selected in succession.
clearable	boolean	no	true	Allows the user to clear the value
filterDate	function	no	() => true	Function that receives each date and returns a boolean to indicate whether it is enabled or not
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	string	no	'en-US'	Filename of the locale to be used. PS: Feel free to submit PR's with more locales!
onBlur	function	no	() => {}	Callback fired when the input loses focus
onChange	function	no	() => {}	Callback fired when the value changes
pointing	string	no	'left'	Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'
type	string	no	basic	Type of input to render. Available options: 'basic' and 'range'
datePickerOnly	boolean	no	false	Allows the date to be selected only via the date picker and disables the text input

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 an 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 😕

Feel free to open issues and/or create PRs to improve other aspects of the library!

Contributors

Thanks goes to these wonderful people (emoji key):

_{Arthur Denner} 💻 🎨 📖 💡 🤔	_{Emerson Laurentino} 💻 🤔 📖 💡	_{Lucas Borges} 💻 📖 💡	_Rallysson 📖	_{Samin Yousefnia} 🌍	_{James J. Alavosus} 💻 💡 🤔	_{Jakub Wietrzyk} 💻 🌍
_{Ben Hancock} 💻	_Gallevy 🌍	_{Adam Grawender} 🌍	_xzessmedia 🌍	_oriolhub 🌍	_{Colin Ramsay} 💻	_{Gencer W. Genç} 🌍
_{pivotal-james-zcheng} 💻