react-date-modify

A simple-to-use React date picker library with interesting features

• Capability to select date in a calendar
• Navigation between months
• Synchronisation of date entered in input field & calendar
• Locale display

🔎 Preview

Live demo

https://olivierbussier.github.io/react-date-modify/

Install

npm install react-date-modify

Usage

import React, { Component } from 'react'

import {Datatable} from 'react-data-table-modify'

const App = () => {

    return <InputDate name={} text={} value={} onDateChange={}/>

}

Description of props

Prop	Description
name	This prop is used to give a name to the input.
text	This string is used to define the associated lable message
value	This field is the initial value of the InputDate
onDateChange	Method called when a new date is selected in the component

example

import React, { useState } from 'react'

import { InputDate } from 'react-date-modify'

const App = () => {

  const [currentDate, setCurrentDate] = useState('2012-01-02')
  return (
    <div style={{ maxWidth: 300, width: '100%', margin: '15px auto' }}>
      <h1>Choosen date is : {currentDate}</h1>
      <InputDate name='nom' text='Enter a date' value={currentDate} onDateChange={
        date => {setCurrentDate(date)}
      }/>
    </div>
  )
}

CSS Structure

Display of InputDate component could be customised easily using css overriding, hereafter the structure of scss in place

.date-time-picker {
  // Container of whole component
  position: relative;
  input[type="date"] {
    // The input field above the calendar
  }
  input[type="date"]::-webkit-calendar-picker-indicator {
    // In order to kill the native calendar
    display: none;
  }
  .calendar {
    position: absolute;
    z-index: 1;
    overflow: hidden;
    &.show {
      // When calendar open
    }
  }

  .header {
    // header line of the calendar
    display: flex;
    h2 {
      // Title of the calendar (current month)
    }
  }

  .days {
    // Grif of month days
    display: grid;
  }

  .day {
    // One day
    display: flex;
  }

  .day-label {
    display: flex;
    // first line (mon, tue, ...)
  }
  .current-month {
    // If the day is in the current month
  }
  .other-month {
    // If the day is not par of the current month
  }
  .selected {
    // the day selected
  }
}

License

MIT © olivierbussier