Skip to content

Datepickers built with Semantic UI for React and Dayzed.

License

Notifications You must be signed in to change notification settings

arthurdenner/react-semantic-ui-datepickers

Folders and files

NameName
Last commit message
Last commit date

Latest commit

73194e2 Β· Jan 14, 2020
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

πŸ“† 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

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

πŸ’»

Christian Moen

🌍

Artawood Chitamitara

πŸ“–

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

LICENSE

MIT