Sha256: 52fc82be5ccc34838d0b259df097fc5b70c1b55ae4dbda524bb58a82cabd1149

Contents?: true

Size: 1.12 KB

Versions: 1126

Compression:

Stored size: 1.12 KB

Contents

Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library.  Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.  You can implement additional features and functionality by accessing a flatpickr instance directly (demonstrated in the 'flatpickr methods' example below).  This is done with the following code.

`const fpInstance = document.querySelector('#pickerId')._flatpickr`

`pickerId` is a prop passed to the date picker kit.  Flatpickr uses this id to target an input and attach a flatpickr instance to that input.

To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.

The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.

Version data entries

1,126 entries across 1,126 versions & 2 rubygems

Version Path
playbook_ui_docs-13.34.1.pre.alpha.play1447addrequiredicons3455 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.play1447addrequiredicons3455 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.play1447addrequiredicons3451 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.play1447addrequiredicons3451 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.PLAY14043436 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.PLAY14043436 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.pbntr258paginationkitforreact3413 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3413 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.pbntr258paginationkitforreact3411 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3411 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.pbntr258paginationkitforreact3409 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3409 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.pbntr258paginationkitforreact3404 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.pbntr258paginationkitforreact3404 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.powerfontsexternal3403 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.powerfontsexternal3403 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-14.0.0 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-14.0.0 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui_docs-13.34.1.pre.alpha.PLAY14633399 app/pb_kits/playbook/pb_date_picker/docs/_description.md
playbook_ui-13.34.1.pre.alpha.PLAY14633399 app/pb_kits/playbook/pb_date_picker/docs/_description.md