Usage

Pickadate.js can be used in a couple ways depending on your setup:

• Plain JavaScript
• React DOM
• React Native

Plain JavaScript

Below are the basics on setting up without using any JavaScript UI frameworks.

Importing

import pickadate from 'pickadate'

Or if you're loading it from a <script> tag: window.pickadate

Importing without any styles

import pickadate from 'pickadate/builds/vanilla'

Rendering: Picker

<div id="pickadate"></div>

const picker = pickadate.create()
const element = document.getElementById('pickadate')
pickadate.render(element, picker)

Rendering: Input Picker

<input id="pickadate" />

const picker = pickadate.create()
const element = document.getElementById('pickadate')
pickadate.render(element, picker)

For a full reference, read the guide on the Plain JavaScript binding.

React DOM

Below are the basics on setting up with React DOM as the UI framework of choice.

Importing

import Pickadate from 'pickadate/builds/react-dom'

Or if you're loading it from a <script> tag: window.Pickadate

Rendering: Picker

<Pickadate.DatePicker />

Rendering: Input Picker

<Pickadate.InputPicker />

For a full reference, read the guide on the React DOM binding.

React Native

Below are the basics on setting up with React Native as the UI framework of choice.

TODO

For a full reference, read the guide on the React Native binding.