# datepicker-dayjs

> React datetime picker powered by dayjs

Latest version **0.6.7** (published 2021-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install datepicker-dayjs
pnpm add datepicker-dayjs
yarn add datepicker-dayjs
bun add datepicker-dayjs
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.6.7 |
| Published | 2021-08-19 |
| First published | 2021-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 9 |
| Unpacked size | 124 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mariano Fliri |
| Maintainers | cuxxxs |
| Keywords | react, react-component, input, datetime, picker, dayjs |

## Links

- npm: https://www.npmjs.com/package/datepicker-dayjs
- Repository: https://github.com/Cuxs/datepicker-dayjs
- Homepage: https://github.com/Cuxs/datepicker-dayjs#readme
- Issues: https://github.com/Cuxs/datepicker-dayjs/issues
- npm.io page: https://npm.io/package/datepicker-dayjs

## Dependencies (9)

- [dayjs](https://npm.io/package/dayjs.md) ^1.10.4
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.13.10
- [classnames](https://npm.io/package/classnames.md) ^2.2.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.13.10
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.13.12
- [react-input-slider](https://npm.io/package/react-input-slider.md) ^4.0.0
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.12.13
- [@babel/plugin-transform-modules-commonjs](https://npm.io/package/@babel/plugin-transform-modules-commonjs.md) ^7.13.8

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.6.7 (latest) — 2021-08-19
- 0.6.6 — 2021-07-30

## README

# datepicker-dayjs 

[![npm](https://img.shields.io/npm/v/datepicker-dayjs.svg)](https://www.npmjs.com/package/datepicker-dayjs)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

React datetime picker powered by [dayjs](https://github.com/iamkun/dayjs)

Forked from [input-dayjs](https://www.npmjs.com/package/input-dayjs)

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

The icon is from [ionicons](http://ionicons.com/).

### Installation

```sh
yarn add datepicker-dayjs
```

**Notice:** This module requires [dayjs](https://www.npmjs.com/package/dayjs) as a [peerDependency](https://docs.npmjs.com/files/package.json#peerdependencies).

### What's new

- **Date range picker**.
- Customizable labels.
- Time can be changed by keyboard also.

### Usage

```javascript

import { InputDateRange } from 'datepicker-dayjs';
import 'datepicker-dayjs/dist/input-dayjs.css'


<InputDateRange
  onChangeFirstDate={(daysjsObj) => {
    console.log(daysjsObj.hour());
  }}
  onChangeEndDate={(daysjsObj) => {
    console.log(daysjsObj.hour());
  }}
  dateLabel="Fecha"
  timeLabel="Horario"
  hourLabel="Hora"
  minuteLabel="Minutos"
  saveLabel="Aplicar"
  minStep={1} // default
  hourStep={1} // default
  prevMonthIcon="ion-ios-arrow-left" // default
  nextMonthIcon="ion-ios-arrow-right" // default
>
  {(startDayjs, endDatejs, handleStartDateClick, handleEndDateClick) => (
    <div className="input__container">
      <label>Start</label>
      <input
        onClick={handleStartDateClick}
        type="text"
        value={startDayjs.format("DD/MM/YYYY HH:mm")}
        readOnly
      />
      <label>End</label>
      <input
        onClick={handleEndDateClick}
        type="text"
        value={endDatejs.format("DD/MM/YYYY HH:mm")}
        readOnly
      />
    </div>
  )}
</InputDateRange>
```

### Development
- npm install
- npm start
- http://localhost:8080

### License
ISC

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