{"id":20783030,"url":"https://github.com/misantronic/react-timebomb","last_synced_at":"2025-05-01T00:02:03.879Z","repository":{"id":48434555,"uuid":"140688542","full_name":"misantronic/react-timebomb","owner":"misantronic","description":"yet another date- and timepicker based on typescript, react and styled-components.","archived":false,"fork":false,"pushed_at":"2023-09-21T10:26:41.000Z","size":8913,"stargazers_count":6,"open_issues_count":17,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-20T23:32:24.426Z","etag":null,"topics":["datepicker","daterangepicker","datetimepicker","moment","react","styled-components","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/misantronic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-07-12T09:01:54.000Z","updated_at":"2023-09-21T10:27:58.000Z","dependencies_parsed_at":"2024-10-31T02:32:43.168Z","dependency_job_id":"db4338f1-2624-4b88-87fe-efeeaff5604c","html_url":"https://github.com/misantronic/react-timebomb","commit_stats":{"total_commits":536,"total_committers":5,"mean_commits":107.2,"dds":"0.17350746268656714","last_synced_commit":"b37251055c7acf37a40eba6bc53bbdd01c0bd386"},"previous_names":[],"tags_count":106,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misantronic%2Freact-timebomb","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misantronic%2Freact-timebomb/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misantronic%2Freact-timebomb/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/misantronic%2Freact-timebomb/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/misantronic","download_url":"https://codeload.github.com/misantronic/react-timebomb/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251801181,"owners_count":21645968,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["datepicker","daterangepicker","datetimepicker","moment","react","styled-components","typescript"],"created_at":"2024-11-17T14:16:35.111Z","updated_at":"2025-05-01T00:02:03.814Z","avatar_url":"https://github.com/misantronic.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"**⚠️ Warning:** This repo is no longer maintained.\n\n# 💣 react-timebomb\n\n## Examples 🃏\n\nCheck [here](https://rawgit.com/misantronic/react-timebomb/master/examples/dist/index.html) for examples.\n\n## Usage\n\nBasic\n\n```jsx\nimport { ReactTimebomb } from 'react-timebomb';\n\n\u003cReactTimebomb\n    format=\"DD.MM.YYYY\"\n    placeholder=\"Select date...\"\n    onChange={console.log}\n/\u003e;\n```\n\nConfirm date before changing value\n\n```jsx\n\u003cReactTimebomb\n    showConfirm\n    format=\"DD.MM.YYYY\"\n    placeholder=\"Select date and confirm...\"\n    onChange={console.log}\n/\u003e\n```\n\nMin- and Max-Date (or either)\n\n```jsx\n\u003cReactTimebomb\n    format=\"DD.MM.YYYY\"\n    placeholder=\"Select date with min- and max-date...\"\n    minDate={new Date('2000-02-01')}\n    maxDate={new Date('2004-10-10')}\n    onChange={console.log}\n/\u003e\n```\n\nWeek-Selection\n\n```jsx\n\u003cReactTimebomb\n    showCalendarWeek\n    selectRange=\"week\"\n    format=\"DD.MM.YYYY\"\n    placeholder=\"Select week...\"\n    onChange={console.log}\n/\u003e\n```\n\nRange-Selection\n\n```jsx\n\u003cReactTimebomb\n    selectRange\n    format=\"DD.MM.YYYY\"\n    placeholder=\"Select range...\"\n    onChange={console.log}\n/\u003e\n```\n\nDatetime-Picker\n\n```jsx\n\u003cReactTimebomb\n    format=\"DD.MM.YYYY HH:mm\"\n    placeholder=\"Select date and time...\"\n    onChange={console.log}\n/\u003e\n```\n\nTimepicker\n\n```jsx\n\u003cReactTimebomb\n    format=\"HH:mm\"\n    placeholder=\"Select time...\"\n    onChange={console.log}\n/\u003e\n```\n\n## Props\n\n| Prop                   | Type                                                                          | optional | default      |                                                                                                    |\n| ---------------------- | ----------------------------------------------------------------------------- | :------: | ------------ | -------------------------------------------------------------------------------------------------- |\n| `value`                | `ReactTimebombDate`                                                           |          |              |                                                                                                    |\n| `onChange`             | `onChange(dateA: Date ǀ undefined [, dateB: Date]): void`                     |          |              | Passes the changed date as first param. When `selectRange` isset, two date-params are passed.      |\n| `className`            | `string`                                                                      |    x     |              |                                                                                                    |\n| `disabled`             | `boolean`                                                                     |    x     |              |                                                                                                    |\n| `error`                | `boolean`                                                                     |    x     |              |                                                                                                    |\n| `format`               | `string`                                                                      |    x     | 'YYYY-MM-DD' |                                                                                                    |\n| `menuWidth`            | `number`                                                                      |    x     |              |                                                                                                    |\n| `timeStep`             | `number`                                                                      |    x     | 1            |                                                                                                    |\n| `minDate`              | `Date`                                                                        |    x     |              |                                                                                                    |\n| `maxDate`              | `Date`                                                                        |    x     |              |                                                                                                    |\n| `mobile`               | `boolean`                                                                     |    x     |              | Display a mobile-optimized menu                                                                    |\n| `placeholder`          | `string`                                                                      |    x     |              |                                                                                                    |\n| `selectRange`          | `'week' ǀ boolean ǀ number`                                                   |    x     |              | Pass true for free day selection, number for number of days selection or 'week' for week-selection |\n| `showCalendarWeek`     | `boolean`                                                                     |    x     |              |                                                                                                    |\n| `showConfirm`          | `boolean`                                                                     |    x     |              | Displays a confirm-button. Submits the date when confirming via button or pressing enter.          |\n| `arrowButtonId`        | `string`                                                                      |    x     |              |                                                                                                    |\n| `arrowButtonComponent` | `React.ComponentType\u003cArrowButtonProps\u003e`                                       |    x     |              |                                                                                                    |\n| `clearComponent`       | `React.ComponentType\u003cClearComponentProps\u003e`                                    |    x     |              |                                                                                                    |\n| `iconComponent`        | `React.ComponentType\u003cIconProps\u003e`                                              |    x     |              |                                                                                                    |\n| `labelComponent`       | `React.ComponentType\u003cReactTimebombValueProps ǀ ReactTimebombMultiValueProps\u003e` |    x     |              |                                                                                                    |\n| `confirmComponent`     | `React.ComponentType\u003cReactTimebombMenuProps\u003e`                                 |    x     |              |                                                                                                    |\n| `onError`              | `onError(error: ReactTimebombError, ...value: string[]): void`                |    x     |              |                                                                                                    |\n| `onOpen`               | `onOpen(): void`                                                              |    x     |              |                                                                                                    |\n| `onClose`              | `onClose(): void`                                                             |    x     |              |                                                                                                    |\n\n### Types\n\n```ts\ntype ReactTimebombDate = Date | undefined | Date[];\ntype ReactTimebombError = 'outOfRange' | 'invalidDate';\n```\n\n## Localization\n\nTimebomb is completely localized by [moment](http://momentjs.com/docs/#/i18n/changing-locale/).\nThe default locale is `en`. The fastest way to change it, is by importing the locale-file to your project:\n\n```js\nimport 'moment/locale/de';\n```\n\nYou can also use all other ways suggested by moment:\nhttp://momentjs.com/docs/#/i18n/changing-locale/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmisantronic%2Freact-timebomb","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmisantronic%2Freact-timebomb","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmisantronic%2Freact-timebomb/lists"}