@jboothwebdev/simple-date-picker NPM

Status

currently in beta App functions but is not the prettiest and

Installation

To install this module use

npm install @jboothwebdev/simple-date-picker

yarn add @jboothwebdev/simple-date-picker

Description

A simple to implement and use date picker that allows users to selection a single date. To create a range just use two the of the DatePickers

Source

source code

Client Use

Date picker will create a input style box with the title and a calendar icon. Clicking on the box will cause a modal to open with a day, month, and year picker. Clicking on the text of any of the options will cause another menu to open with either the days of the month, the months or years within a 50 year range. Users do have to hit the submit button in order for the date to save and be return through the callback function

To use

First import the DatePicker into your component.

import {DatePicker} from "@jboothwebdev/simple-date-picker";

Second create the callback function to use the Date

The DatePicker will return a Standard JS Date time object.

i.e. Wed Jul 27 2022 13:27:43 GMT-0600 (Mountain Daylight Time)

Third Add the component to the application

import {useState} from "react";
import {DatePicker} from "@jboothwebdev/simple-date-picker";


const App = () => { 
  // Recommended set up is to use a useState
  const [date, setDate] = useState();
  
  return (
    <>
      // Then when we create the DatePicker we have to pass in two props
      <DatePicker callback={(date) => {setDate(date)}} theme={"light"} />
    </>
    )
}

// Or you can use any function that that just takes a date as the parameter
<DatePicker callback={(date) => {yourFunction(date)}} theme={"light"} />

Parameters

Currently there are only two parameters and they are both required

callback

The callback parameter is used by the date picker to return the date and will be called by the submit button in the picker. The picker is automatically loaded with the current date so if nothing in the form is changed then it will automatically return todays date.

theme

The theme parameter must be passed a string that matches a built in theme. and changes to styling that are not build into a theme must be done through className overrides.

Currently Availble Themes

theme={"light"}

grayscale theme background is light and text is dark.

light main element

light selection fields

theme={"dark"}

grayscale theme background is dark and the test is light.

Dark main element

Dark selection fields

Dark sub menu

theme={"teal-light"}

adds teal accents to the light theme

theme={"teal-dark"}

adds teal accents to the dark theme

theme={"purple-light"}

adds purple accents to the light theme

theme={"purple-dark"}

adds purple accents to the dark theme

Change Log

Version 0.2.6
- added two new themes
  - purple
  - teal
- updated documentation
- added documentation
Version 0.2.5
- Made the text in the main box clickable to open the selection area.