# react-datetime-slider-picker

> React datetime picker component

Latest version **1.0.1** (published 2018-11-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-datetime-slider-picker
pnpm add react-datetime-slider-picker
yarn add react-datetime-slider-picker
bun add react-datetime-slider-picker
```

## 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.1 |
| Published | 2018-11-08 |
| First published | 2018-11-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 40.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Porinn |
| Maintainers | porinn |
| Keywords | react, datetime, picker, material |

## Links

- npm: https://www.npmjs.com/package/react-datetime-slider-picker
- Repository: https://github.com/Porinn/react-datetime-slider-picker
- Homepage: https://github.com/Porinn/react-datetime-slider-picker#readme
- Issues: https://github.com/Porinn/react-datetime-slider-picker/issues
- npm.io page: https://npm.io/package/react-datetime-slider-picker

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^16.6.1
- [moment](https://npm.io/package/moment.md) ^2.22.2
- [react-dom](https://npm.io/package/react-dom.md) ^16.6.1
- [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^3.0.0-alpha.23
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^3.4.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^3.0.1

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2018-11-08
- 1.0.0 — 2018-11-08

## README

# react-datetime-slider-picker

React datetime picker component

## Overview

This component received a motif from [input-moment](https://github.com/wangzuo/input-moment)

The design is from https://dribbble.com/shots/1439965-Due-Date-and-Time-Picker.

![screenshot](https://user-images.githubusercontent.com/30774607/48204754-ec69bc80-e3ad-11e8-8542-a1e04e824fdb.png)

## Installation

```
npm install react-datetime-slider-picker
```

## Example

1. 
```
npm run example
```

2. Connect to localhost:8080

## Usage

```
import React from 'react';
import Picker from 'react-datetime-slider-picker';

export default class App extends React.Component {
  onSave = (date, time) => {
    console.log({date: date, time: time});
  }
  
  render() {
    return (
      <div>
        <Picker onSave={(date, time) => this.onSave(date,time) enableSecond />}
      </div>
    );
  }
}
```
## Props

| Props  |  Type  |    Default    | Description |
| ------ | ------ |------------- | ----------- |
| onSave | Function(date, time) | console.log | Callback date and time data when Save button is clicked |
| enableSecond | Boolean | false | Enable 'Seconds' slider in timepicker |
| language | String | en | Display language (en, ko supported) |

## Response Data

### Date

```
date: {
  year: 2018, month: 11, date: 28, week: 4, day: 3
}
```
- year: year value
    - Year of 2018: 2018
- month: month of year
    - Janurary: 1, December: 12
- date: date of month
    - 1st: 1, 31st: 31
- week: week of month
    - 1st of every month: 1, 8th of every month: 2, 2018-12-25: 4

### Time

```
time: {
  hour: 22, minute: 44, second: 34
}
```

- hour: value of hours (0 ~ 23)
- minute: value of minutes (0 ~ 59)
- second : value of second (0 ~ 59)

If 'enableSecond' props is undefined or 'false', Picker don't give 'second' value.

## License

This component is released under the MIT License.

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