React-semantic-ui-datepickers NPM

📆 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.

📆 react-semantic-ui-datepickers

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, { useState } from 'react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';

const AppWithBasic = () => {
  const [currentDate, setNewDate] = useState(null);
  const onChange = (event, data) => setNewDate(data.value);

  return <SemanticDatepicker onChange={onChange} />;
};

const AppWithRangeAndInPortuguese = () => {
  const [currentRange, setNewRange] = useState([]);
  const onChange = (event, data) => setNewRange(data.value);

  return <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
autoComplete	string	no	--	Specifies if the input should have autocomplete enabled
clearIcon	SemanticICONS \| React.ReactElement	no	'close'	An icon from semantic-ui-react or a custom component. The custom component will get two props: `data-testid` and `onClick`.
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
datePickerOnly	boolean	no	false	Allows the date to be selected only via the date picker and disables the text input
filterDate	function	no	(date) => 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 to format the date using the date-fns' format
formatOptions	options	no	--	Specifies the options to format the date using the date-fns' format
icon	SemanticICONS \| React.ReactElement	no	'calendar'	An icon from semantic-ui-react or a custom component. The custom component will get two props: `data-testid` and `onClick`.
inline	boolean	no	false	Uses an inline variant, without the input and the features related to it, e.g. clearable datepicker
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	(event) => {}	Callback fired when the input loses focus
onFocus	function	no	(event) => {}	Callback fired when the input gets focused focus
onChange	function	no	(event, data) => {}	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'
showToday	boolean	no	true	Hides the "Today" button if false
type	string	no	basic	Type of input to render. Available options: 'basic' and 'range'
value	Date\|Date[]	no	--	The value of the datepicker

Form.Input Props

autoComplete
className
disabled
error
iconPosition
id
inverted
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.