# @app-elements/date-picker

> Simple calendar-style date-picker.

Latest version **1.0.3** (published 2020-10-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install @app-elements/date-picker
pnpm add @app-elements/date-picker
yarn add @app-elements/date-picker
bun add @app-elements/date-picker
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-10-22 |
| First published | 2020-03-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 155.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Input Logic Team |
| Maintainers | coryschadt, trustfall, adriaanwm, staydecent |
| Keywords | react, react-component, preact, component, ui |

## Links

- npm: https://www.npmjs.com/package/@app-elements/date-picker
- Repository: https://github.com/inputlogic/elements
- Homepage: https://github.com/inputlogic/elements#readme
- Issues: https://github.com/inputlogic/elements/issues
- npm.io page: https://npm.io/package/@app-elements/date-picker

## Dependencies (1)

- [@wasmuth/chunk](https://npm.io/package/@wasmuth/chunk.md) ^2.1.1

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2020-10-22
- 1.0.1 — 2020-06-24
- 1.0.0 — 2020-06-24
- 1.0.0-alpha.0 — 2020-06-23
- 0.3.0 — 2020-03-26
- 0.2.0 — 2020-03-23
- 0.1.0 — 2020-03-19

## README

# DatePicker

Calender style date-picker and date-range-picker.

## Installation

`npm install --save @app-elements/date-picker`

## Usage

```javascript
import { DatePicker } from '@app-elements/date-picker'

// DatePicker expects it's state to be controlled by a parent Component.
// This will often mean we set and get the value of the DatePicker in our
// global state, but for this example, we will handle the state in the
// parent Component.

function StatefulComponent () {
  const [date, setDate] = useState()
  
  return (
    <DatePicker
      selectedDate={date}
      {/* Storing Dates is dangerous as they are mutable, and more troublesome
          when used for memoization or shallow compares. */}
      onChange={day => setDate(day.getTime())}
    />
  )
}
```

`DateRangePicker` is just slightly different:

```javascript
import { DateRangePicker } from '@app-elements/date-picker'

function StatefulComponent () {
  const [start, setStart] = useState()
  const [end, setEnd] = useState()
  
  const onDateRange = ({ startDate, endDate }) => {
    if (startDate != null) {
      setStart(startDate.getTime())
    } else if (endDate != null) {
      setEnd(endDate.getTime())
    } else if (startDate == null && endDate == null) {
      // If the user taps the existing startDate again, we
      // clear the selections.
      setStart(null)
      setEnd(null)
    }
  }
  
  return (
    <DateRangePicker
      startDate={start}
      endDate={end}
      onChange={onDateRange}
    />
  )
}
```

Sometimes you'll want full control over the layout and style of the DatePicker. If that's the case, just pass in your custom component as a child of DatePicker or DateRangePicker.

```javascript
const MyCustomDateRangePicker = (props) =>
  <DateRangePicker {...props} />
    {({month, monthString, year, onClickPreviousMonth, onClickNextMonth, dayHeaders, calendar, classNamesForDay, onClickDay}) => 
      <div>
        {/* See `date-picker.js` for an example of what goes inside `div` */}
      </div>
    )}
  </DateRangePicker>
```

## Props

### DatePicker

| Prop                   | Type       | Default       | Description         |
|------------------------|------------|---------------|---------------------|
| **`weekStartDay`**     | _Number_   | `0`           | Day of the week to start on, `0` being Sunday. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay)
| **`selectedDate`**     | _Number_   | _None_        | The selected Date in ms, use `.getTime()` or `.valueOf()`. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime)
| **`onChange`**         | _Function_ | _None_        | Callback when user selects a day. Will be given a Date.


### DateRangePicker

| Prop                   | Type       | Default       | Description         |
|------------------------|------------|---------------|---------------------|
| **`weekStartDay`**     | _Number_   | `0`           | Day of the week to start on, `0` being Sunday. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay)
| **`startDate`**        | _Number_   | _None_        | The selected start Date in ms, use `.getTime()` or `.valueOf()`. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime)
| **`endDate`**          | _Number_   | _None_        | The selected end Date in ms, use `.getTime()` or `.valueOf()`. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime)
| **`onChange`**         | _Function_ | _None_        | Callback when user selects a day. Will be given an object that may contain `startDate` and/or `endDate`.

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