# react-datetimepicker-typescript

> get and set time with a frontent widget react-datetimepicker-typescript

Latest version **1.0.4** (published 2018-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-datetimepicker-typescript
pnpm add react-datetimepicker-typescript
yarn add react-datetimepicker-typescript
bun add react-datetimepicker-typescript
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-08-19 |
| First published | 2018-08-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 841 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Hariga Daniel Ionut |
| Maintainers | hdjonutzuser |
| Keywords | react, date, time, picker, webpack, lint, typescript |

## Links

- npm: https://www.npmjs.com/package/react-datetimepicker-typescript
- Repository: https://github.com/hdjonutz/react-datetimepicker-typescript
- Homepage: https://github.com/hdjonutz/react-datetimepicker-typescript#readme
- Issues: https://github.com/hdjonutz/react-datetimepicker-typescript/issues
- npm.io page: https://npm.io/package/react-datetimepicker-typescript

## Dependencies (16)

- [intl](https://npm.io/package/intl.md) ^1.2.5
- [react](https://npm.io/package/react.md) ^16.4.1
- [redux](https://npm.io/package/redux.md) ^4.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.10
- [moment](https://npm.io/package/moment.md) ^2.22.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.4.1
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2
- [react-color](https://npm.io/package/react-color.md) ^2.14.1
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [react-router](https://npm.io/package/react-router.md) ^4.3.1
- [react-ripples](https://npm.io/package/react-ripples.md) ^1.1.2
- [redux-actions](https://npm.io/package/redux-actions.md) ^2.4.0
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [@types/prop-types](https://npm.io/package/@types/prop-types.md) ^15.5.3
- [react-router-redux](https://npm.io/package/react-router-redux.md) ^4.0.8

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2018-08-19
- 1.0.3 — 2018-08-19
- 1.0.2 — 2018-08-18
- 1.0.0 — 2018-08-18

## README

# react-date-Time-Picker

![alt text](https://github.com/hdjonutz/react-datetimepicker-typescript/blob/master/dateTimePicker.png)




### Installation

```sh
$ npm install
```
```sh
http://localhost:3000/
```

```sh
-language:'isNotREQUIED' type:[string] default is 'en':
language={'de'}
```
```sh
-showTime:'isNotREQUIED' type:[boolean] default is 'false':
-display the Time, hours, seconds, mounths years on header. 
showTime={true}
```
```sh
-defaultOnDisplay:'isNotREQUIED' type:[number] default is 1:
-display the default presentation days, months or years:
defaultOnDisplay: 1-days, 2-months, 3-yers  defaultOnDisplay={1} 
```
```sh
-format:'isREQUIED' type:[string]
-datetime format displayed, it`s using the 'moment' format
format={'LL'}
```
```sh
-minDate and maxDate 'isNotREQUIED' type:[timestamp]: the data represented by these limits in the plugin can not be selected.
minDate={1521828754705}
maxDate={1539969110225}
```
```sh
element:'isNotREQUIED' type:['string'] default is 'input':
element={'input'} || element={'div'} || element={'span'} 
```
```sh
onClickChangeDate:'isREQUIED' only for 'input':
onClickChangeDate={'callbackFunction'}
```
```sh
onClose:'isNotREQUIED' will fire 'onClose':
onClose={'callbackFunction'}
```

License
----
MIT
   
```sh 
function onClickChangeDate(e: number) {
    console.log('onClickChangeDate', e);
}
function onCloseCallback(e: number) {
    console.log('onCloseCallback', e);
}
ReactDOM.render(
    <div>
        <ReactDateTimePicker language={'de'}
                             showTime={true}
                             defaultOnDisplay={1}
                             receiveSelectLevel={1}
                             format={'LL'}
                             minDate={1521828754705}
                             maxDate={1539969110225}
                             element={'input'}
                             onClickChangeDate={onClickChangeDate}
                             onClose={onCloseCallback} />
        <br/>
        <ReactDateTimePicker language={'de'}
                             showTime={true}
                             defaultOnDisplay={2}
                             receiveSelectLevel={2}
                             date={1532170459658}
                             format={'LL'}
                             minDate={1521828754705}
                             maxDate={1539969110225}
                             element={'span'}
                             onClickChangeDate={onClickChangeDate}
                             onClose={onCloseCallback} />
        <br/>
        <ReactDateTimePicker language={'de'}
                             showTime={true}
                             defaultOnDisplay={3}
                             receiveSelectLevel={3}
                             date={1469720797161}
                             minDate={1438109234438}
                             maxDate={1595961799111}
                             format={'YYYY'}
                             element={'div'}
                             onClickChangeDate={onClickChangeDate}
                             onClose={onCloseCallback} />
        <br/>
        <ReactDateTimePicker language={'de'}
                             showTime={false}
                             defaultOnDisplay={3}
                             receiveSelectLevel={3}
                             format={'LL'}
                             element={'input'}
                             minDate={1438109234438}
                             maxDate={1595961799111}
                             date={1500634459658}
                             onClickChangeDate={onClickChangeDate}
                             onClose={onCloseCallback} />
    </div>,
    document.getElementById('root_React_date_time_picker'));
```
![alt text](https://github.com/hdjonutz/react-datetimepicker-typescript/blob/master/dateTimePickerNoheader.png)

---
_Source: https://npm.io/package/react-datetimepicker-typescript · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._