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

Table of Contents

• 📆 react-semantic-ui-datepickers
  • Overview
  • Table of Contents
  • Installation
  • Usage
  • Supported Props
    • Own Props
    • Form.Input Props
    • Dayzed 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, { 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.

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):

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

LICENSE

MIT