rsu
react-semantic-ui-datepickers
npm i react-semantic-ui-datepickers
rsu

react-semantic-ui-datepickers

Datepickers built with Semantic UI for React and Dayzed.

by Arthur Denner

2.17.1 (see all)License:MITTypeScript:Built-In
npm i react-semantic-ui-datepickers
Readme

📆 react-semantic-ui-datepickers

Datepickers built with Semantic UI for React and Dayzed

version MIT License All Contributors

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.

Table of Contents

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

propertytyperequireddefaultdescription
allowOnlyNumbersbooleannotrueAllows the user enter only numbers
autoCompletestringno--Specifies if the input should have autocomplete enabled
clearIconSemanticICONS | React.ReactElementno'close'An icon from semantic-ui-react or a custom component. The custom component will get two props: data-testid and onClick.
clearOnSameDateClickbooleannotrueControls whether the datepicker's state resets if the same date is selected in succession.
clearablebooleannotrueAllows the user to clear the value
datePickerOnlybooleannofalseAllows the date to be selected only via the date picker and disables the text input
filterDatefunctionno(date) => trueFunction that receives each date and returns a boolean to indicate whether it is enabled or not
formatstringno'YYYY-MM-DD'Specifies how to format the date using the date-fns' format
formatOptionsoptionsno--Specifies the options to format the date using the date-fns' format
iconSemanticICONS | React.ReactElementno'calendar'An icon from semantic-ui-react or a custom component. The custom component will get two props: data-testid and onClick.
inlinebooleannofalseUses an inline variant, without the input and the features related to it, e.g. clearable datepicker
keepOpenOnClearbooleannofalseKeeps the datepicker open (or opens it if it's closed) when the clear icon is clicked
keepOpenOnSelectbooleannofalseKeeps the datepicker open when a date is selected
localestringno'en-US'Filename of the locale to be used. PS: Feel free to submit PR's with more locales!
onBlurfunctionno(event) => {}Callback fired when the input loses focus
onFocusfunctionno(event) => {}Callback fired when the input gets focused focus
onChangefunctionno(event, data) => {}Callback fired when the value changes
pointingstringno'left'Location to render the component around input. Available options: 'left', 'right', 'top left', 'top right'
showTodaybooleannotrueHides the "Today" button if false
typestringnobasicType of input to render. Available options: 'basic' and 'range'
valueDate|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.

Roadmap

  • Add more tests (including e2e)

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

💻

Christian Moen

🌍

Artawood Chitamitara

📖

unbugged

💻 🐛

Shin YeongJae

🌍

Jørgen Vatle

🌍

Denis

💻

kmoutzou

💻

JurajFE

💻

Daniel Huisman

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

Downloads/wk

4.2K

GitHub Stars

88

LAST COMMIT

2mos ago

MAINTAINERS

1

CONTRIBUTORS

27

OPEN ISSUES

5

OPEN PRs

6
VersionTagPublished
2.17.1
latest
1mo ago
2.15.1-beta.1
beta
4mos ago
No alternatives found