Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/misantronic/react-timebomb
yet another date- and timepicker based on typescript, react and styled-components.
https://github.com/misantronic/react-timebomb
datepicker daterangepicker datetimepicker moment react styled-components typescript
Last synced: about 1 month ago
JSON representation
yet another date- and timepicker based on typescript, react and styled-components.
- Host: GitHub
- URL: https://github.com/misantronic/react-timebomb
- Owner: misantronic
- License: mit
- Created: 2018-07-12T09:01:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-21T10:26:41.000Z (over 1 year ago)
- Last Synced: 2024-10-11T01:11:50.890Z (2 months ago)
- Topics: datepicker, daterangepicker, datetimepicker, moment, react, styled-components, typescript
- Language: TypeScript
- Homepage:
- Size: 8.5 MB
- Stars: 6
- Watchers: 0
- Forks: 1
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**⚠️ Warning:** This repo is no longer maintained.
# 💣 react-timebomb
## Examples 🃏
Check [here](https://rawgit.com/misantronic/react-timebomb/master/examples/dist/index.html) for examples.
## Usage
Basic
```jsx
import { ReactTimebomb } from 'react-timebomb';
;
```
Confirm date before changing value
```jsx
```
Min- and Max-Date (or either)
```jsx
```
Week-Selection
```jsx
```
Range-Selection
```jsx
```
Datetime-Picker
```jsx
```
Timepicker
```jsx
```
## Props
| Prop | Type | optional | default | |
| ---------------------- | ----------------------------------------------------------------------------- | :------: | ------------ | -------------------------------------------------------------------------------------------------- |
| `value` | `ReactTimebombDate` | | | |
| `onChange` | `onChange(dateA: Date ǀ undefined [, dateB: Date]): void` | | | Passes the changed date as first param. When `selectRange` isset, two date-params are passed. |
| `className` | `string` | x | | |
| `disabled` | `boolean` | x | | |
| `error` | `boolean` | x | | |
| `format` | `string` | x | 'YYYY-MM-DD' | |
| `menuWidth` | `number` | x | | |
| `timeStep` | `number` | x | 1 | |
| `minDate` | `Date` | x | | |
| `maxDate` | `Date` | x | | |
| `mobile` | `boolean` | x | | Display a mobile-optimized menu |
| `placeholder` | `string` | x | | |
| `selectRange` | `'week' ǀ boolean ǀ number` | x | | Pass true for free day selection, number for number of days selection or 'week' for week-selection |
| `showCalendarWeek` | `boolean` | x | | |
| `showConfirm` | `boolean` | x | | Displays a confirm-button. Submits the date when confirming via button or pressing enter. |
| `arrowButtonId` | `string` | x | | |
| `arrowButtonComponent` | `React.ComponentType` | x | | |
| `clearComponent` | `React.ComponentType` | x | | |
| `iconComponent` | `React.ComponentType` | x | | |
| `labelComponent` | `React.ComponentType` | x | | |
| `confirmComponent` | `React.ComponentType` | x | | |
| `onError` | `onError(error: ReactTimebombError, ...value: string[]): void` | x | | |
| `onOpen` | `onOpen(): void` | x | | |
| `onClose` | `onClose(): void` | x | | |
### Types
```ts
type ReactTimebombDate = Date | undefined | Date[];
type ReactTimebombError = 'outOfRange' | 'invalidDate';
```
## Localization
Timebomb is completely localized by [moment](http://momentjs.com/docs/#/i18n/changing-locale/).
The default locale is `en`. The fastest way to change it, is by importing the locale-file to your project:
```js
import 'moment/locale/de';
```
You can also use all other ways suggested by moment:
http://momentjs.com/docs/#/i18n/changing-locale/