Datepicker-dayjs NPM

datepicker-dayjs

React datetime picker powered by dayjs

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

The icon is from ionicons.

Installation

yarn add datepicker-dayjs

Notice: This module requires dayjs as a peerDependency.

What's new

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

Usage

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>