# react-styled-date-time-picker

> ```javascript import React, { Component } from 'react'; import DateTimePicker from 'react-styled-date-time-picker'; import { DateTime } from 'luxon';

Latest version **3.0.2** (published 2020-12-24) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install react-styled-date-time-picker
pnpm add react-styled-date-time-picker
yarn add react-styled-date-time-picker
bun add react-styled-date-time-picker
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2020-12-24 |
| First published | 2018-02-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 88.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | w01fgang |
| Maintainers | w01fgang |

## Links

- npm: https://www.npmjs.com/package/react-styled-date-time-picker
- Repository: https://github.com/w01fgang/react-styled-date-time-picker
- Homepage: https://github.com/w01fgang/react-styled-date-time-picker#readme
- Issues: https://github.com/w01fgang/react-styled-date-time-picker/issues
- npm.io page: https://npm.io/package/react-styled-date-time-picker

## Recent versions

- 3.0.2 (latest) — 2020-12-24
- 3.0.1 — 2020-12-24
- 3.0.0 — 2020-12-24
- 2.0.10 — 2019-09-22
- 2.0.9 — 2019-08-08
- 2.0.8 — 2019-08-08
- 2.0.7 — 2019-08-08
- 2.0.6 — 2019-08-08
- 2.0.5 — 2019-08-08
- 2.0.4 — 2019-08-08
- 2.0.3 — 2019-08-08
- 2.0.2 — 2019-08-08
- 2.0.1 — 2019-08-08
- 2.0.0 — 2019-08-08
- 1.0.4 — 2019-08-03
- … 19 more at https://npm.io/package/react-styled-date-time-picker/versions

## README

## Minimal example

```javascript
import React, { Component } from 'react';
import DateTimePicker from 'react-styled-date-time-picker';
import { DateTime } from 'luxon';

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dateFrom: DateTime.local(),
      dateTo: DateTime.local().plus({ day: 1 }),
      open: false,
    };
  }

  setDate = (dateFrom, dateTo) =>
    this.setState(() => ({ dateFrom, dateTo }), this.togglePicker);

  togglePicker = () => this.setState(({ open }) => ({ open: !open }));

  render() {
    const { open, dateFrom, dateTo } = this.state;

    return (
      <div>
        <input
          onClick={this.togglePicker}
          value={this.state.dateFrom.toFormat('dd/MM/yyyy HH:mm')}
          readOnly
        />
        <input
          onClick={this.togglePicker}
          value={this.state.dateTo.toFormat('dd/MM/yyyy HH:mm')}
          readOnly
        />
        <DateTimePicker
          dateFrom={dateFrom}
          dateTo={dateTo}
          open={open}
          onChange={this.setDate}
          onClose={this.togglePicker}
          language="ru"
          label="Some Label"
          labelStyle={{
            fontSize: 20,
            color: 'red',
          }}
        />
      </div>
    );
  }
}

export default Test;
```

### Supported languages
- Russian
- English
- Italian
- Spanish
- Portuguese

### Dependencies
```
{
  "lodash.chunk": "^4.2.0",
  "lodash.range": "^3.2.0",
  "luxon": "^0.4.0",
  "react": "^16.0.0",
  "react-dom": "^16.0.0",
  "styled-components": "^3.1.6"
}
```

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