Datepickers built with Semantic UI for React and Dayzed
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.
npm install --save react-semantic-ui-datepickers
yarn add react-semantic-ui-datepickers
This package also depends on
react,prop-types, andsemantic-ui-react. Please make sure you have them installed as well.
import React from 'react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
const AppWithBasic = ({ onDateChange }) => (
<SemanticDatepicker onDateChange={onDateChange} />
);
const AppWithRange = ({ onDateChange }) => (
<SemanticDatepicker onDateChange={onDateChange} type="range" />
);| property | type | required | default | description |
|---|---|---|---|---|
| clearable | boolean | no | true | Allows the user to clear the value |
| 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 | object | no | en-US | Object with the labels to be used on the library PS: Feel free to submit PR's with more locales! |
| onDateChange | function | yes | Callback fired when the value changes | |
| type | string | no | basic | Type of input to render. Available options: 'basic' and 'range' |
- disabled
- error
- icon
- iconPosition
- id
- label
- loading
- name
- placeholder
- size
- transparent
- date
- maxDate
- minDate
- firstDayOfWeek
- showOutsideDays
- selected
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 a issue suggesting something else. This was the simplest solution I thought.
- 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 😕
- Add TypeScript definitions (or migrate to TypeScript)
Feel free to open issues and/or create PRs to improve other aspects of the library!
Thanks goes to these wonderful people (emoji key):
 Arthur Denner 💻 🎨 📖 💡 🤔 |
|---|
This project follows the all-contributors specification. Contributions of any kind welcome!
MIT