Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arthurdenner/react-semantic-ui-datepickers
Datepickers built with Semantic UI for React and Dayzed.
https://github.com/arthurdenner/react-semantic-ui-datepickers
calendar datepicker dayzed hacktoberfest semantic-ui-react
Last synced: 6 days ago
JSON representation
Datepickers built with Semantic UI for React and Dayzed.
- Host: GitHub
- URL: https://github.com/arthurdenner/react-semantic-ui-datepickers
- Owner: arthurdenner
- License: mit
- Created: 2018-04-06T20:53:28.000Z (over 6 years ago)
- Default Branch: develop
- Last Pushed: 2024-05-28T11:36:21.000Z (7 months ago)
- Last Synced: 2024-05-29T16:54:23.063Z (7 months ago)
- Topics: calendar, datepicker, dayzed, hacktoberfest, semantic-ui-react
- Language: TypeScript
- Homepage: https://react-semantic-ui-datepickers.vercel.app
- Size: 6.28 MB
- Stars: 96
- Watchers: 3
- Forks: 54
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# 📆 react-semantic-ui-datepickers
Datepickers built with [Semantic UI for React][semantic-ui-react] and [Dayzed][dayzed]
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
[](#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](#supported-props) for more information.
## Table of Contents
- [📆 react-semantic-ui-datepickers](#-react-semantic-ui-datepickers)
- [Overview](#overview)
- [Table of Contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Supported Props](#supported-props)
- [Own Props](#own-props)
- [Form.Input Props](#forminput-props)
- [Dayzed Props](#dayzed-props)
- [Customization](#customization)
- [Roadmap](#roadmap)
- [Contributors](#contributors)
- [LICENSE](#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
```jsx
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 ;
};
const AppWithRangeAndInPortuguese = () => {
const [currentRange, setNewRange] = useState([]);
const onChange = (event, data) => setNewRange(data.value);
return ;
};
```
More examples [here](https://react-semantic-ui-datepickers.now.sh).
## 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](https://react.semantic-ui.com/elements/icon/) 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](https://date-fns.org/v2.24.0/docs/format) |
| formatOptions | [options](https://date-fns.org/v2.24.0/docs/format#arguments) | no | -- | Specifies the options to format the date using the [date-fns' format](https://date-fns.org/v2.24.0/docs/format) |
| icon | SemanticICONS \| React.ReactElement | no | 'calendar' | An [icon from semantic-ui-react](https://react.semantic-ui.com/elements/icon/) 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](https://github.com/kentcdodds/all-contributors#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](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## LICENSE
MIT
[license-badge]: https://img.shields.io/npm/l/react-semantic-ui-datepickers.svg?style=flat-square
[license]: https://github.com/arthurdenner/react-semantic-ui-datepickers/blob/master/LICENSE
[version-badge]: https://img.shields.io/npm/v/react-semantic-ui-datepickers.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-semantic-ui-datepickers
[dayzed]: https://github.com/deseretdigital/dayzed
[semantic-ui-react]: https://react.semantic-ui.com/