# @jboothwebdev/simple-date-picker

> # Status **currently in beta** App functions but is not the prettiest and # Installation To install this module use ``` bash npm install @jboothwebdev/simple-date-picker ``` or ``` bash yarn add @jboothwebdev/simple-date-picker ```

Latest version **0.2.6** (published 2022-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install @jboothwebdev/simple-date-picker
pnpm add @jboothwebdev/simple-date-picker
yarn add @jboothwebdev/simple-date-picker
bun add @jboothwebdev/simple-date-picker
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.6 |
| Published | 2022-08-08 |
| First published | 2022-07-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 33.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | jboothwebdev |

## Links

- npm: https://www.npmjs.com/package/@jboothwebdev/simple-date-picker
- npm.io page: https://npm.io/package/@jboothwebdev/simple-date-picker

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [typescript](https://npm.io/package/typescript.md) ^4.4.2
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.0
- [@types/jest](https://npm.io/package/@types/jest.md) ^27.0.1
- [@types/node](https://npm.io/package/@types/node.md) ^16.7.13
- [react-icons](https://npm.io/package/react-icons.md) ^4.4.0
- [@types/react](https://npm.io/package/@types/react.md) ^18.0.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.0.0
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.0.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.14.1
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.2.1
- [@jboothwebdev/simple-date-picker](https://npm.io/package/@jboothwebdev/simple-date-picker.md) ^0.1.9

## Recent versions

- 0.2.6 (latest) — 2022-08-08
- 0.2.5 — 2022-07-28
- 0.2.4 — 2022-07-28
- 0.2.3 — 2022-07-28
- 0.2.2 — 2022-07-28
- 0.2.1 — 2022-07-28
- 0.2.0 — 2022-07-28
- 0.1.9 — 2022-07-28
- 0.1.8 — 2022-07-27
- 0.1.7 — 2022-07-27
- 0.1.6 — 2022-07-27
- 0.1.5 — 2022-07-27
- 0.1.4 — 2022-07-27
- 0.1.3 — 2022-07-27
- 0.1.2 — 2022-07-27
- … 2 more at https://npm.io/package/@jboothwebdev/simple-date-picker/versions

## README

# 

# Status 
**currently in beta**
App functions but is not the prettiest and 
# Installation
To install this module use 
``` bash
npm install @jboothwebdev/simple-date-picker
```
   or
``` bash
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](https://gitlab.com/jboothwebdev1/simple-date-picker)


## 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.
``` javascript 
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 

``` javascript
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"} />
    </>
    )
}

```

``` javascript
// 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](https://drive.google.com/file/d/1hyBfUq3Ti744RhqaEqWOLBZfkqr_9rJR/view?usp=sharing)

[light selection fields](https://drive.google.com/file/d/1KP4Ve86NQ2Bbyh78CVlJH5vjE4UK-q7X/view?usp=sharing)

#### theme={"dark"}
- grayscale theme background is dark and the test is light.

[Dark main element](https://drive.google.com/file/d/1maK9THQEcPqrFcI6aIyLVMc6mKudhYDH/view?usp=sharing)

[Dark selection fields](https://drive.google.com/file/d/1g7rA6p1NGs9L-Y6-ikw2QnnwgzJXSPg2/view?usp=sharing)

[Dark sub menu](https://drive.google.com/file/d/1YrmH-D8EUAlxtjEKuUQYDe6GcmpWde_l/view?usp=sharing)

#### 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.

## Future Plans 
- Make the initial box editable 
  - Don't think this is going to happen but made it clickable.
- Add more themes

## Support 
If you like the component and want to help with keeping it maintained you can drop a donation through 
Cashapp at **$jdbooth9516**.

Please limit donations to under 5$

## Issues and Ideas 
If you have an issue or have a idea for a feature craete an issue on the gitlab project.

---
_Source: https://npm.io/package/@jboothwebdev/simple-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._