https://github.com/preachjs/datepicker

Headless Datepicker(s) for preact
https://github.com/preachjs/datepicker

component datepicker headless preact ui unstyled

Last synced: about 2 months ago
JSON representation

Headless Datepicker(s) for preact

• Host: GitHub
• URL: https://github.com/preachjs/datepicker
• Owner: preachjs
• License: mit
• Created: 2024-03-18T08:27:46.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-08-13T10:21:19.000Z (5 months ago)
• Last Synced: 2024-10-31T09:50:13.194Z (about 2 months ago)
• Topics: component, datepicker, headless, preact, ui, unstyled
• Language: JavaScript
• Homepage: https://preachjs.github.io/datepicker/
• Size: 420 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @preachjs/datepicker

> Headless Datepicker(s) for preact

- [@preachjs/datepicker](#preachjsdatepicker)

  - [Highlights](#highlights)

  - [Usage](#usage)

    - [Simple Inline Datepicker](#simple-inline-datepicker)

    - [Create a range select date picker](#create-a-range-select-date-picker)

    - [API](#api)

  - [License](#license)

## Highlights

- Lightweight

- Unstyled

- Fast and runs on signals

- For [Preact](https://preactjs.com/)! <3

## Usage

- Install the package and it's deps

```sh

npm i preact @preachjs/datepicker @preact/signals

```

### Simple Inline Datepicker

```js

import { Calendar } from '@preachjs/datepicker'

function App() {

  const [date, setDate] = useState()

  return (

    <>

       setDate(nextValue)} />

    >

  )

}

```

### Create a range select date picker

```tsx

import { Calendar } from '@preachjs/datepicker'

function App() {

  const [dateRange, setDateRange] = useState([])

  return (

    <>

       setDateRange(nextValue)}

      />

    >

  )

}

```

### API

| prop            | description                                                                                                       | default      |

| --------------- | ----------------------------------------------------------------------------------------------------------------- | ------------ |

| `value`         | The current value of the datepicker                                                                               | current date |

| `onSelect`      | Callback fired when a date selection is successful, in case of `range` selection, it'll fire with both the values |              |

| `mode`          | Switch between single select and range selection mode                                                             | `single`     |

| `weekdayFormat` | `narrow,short,long` weekend format on the calendar header                                                         | `narrow`     |

| `arrowLeft`     | Icon Rendered on the left of the month selector                                                                   | `<`       |

| `arrowRight`    | Icon Rendered on the right of the month selector                                                                  | `>`       |

| `readOnly`      | Change to readOnly mode, date selection will do nothing                                                           | `false`      |

## License

[MIT](/LICENSE)