Sha256: 8dc6f1e96f68c93a3c3ef7754ba48bd511cab215afe7a8ce6c341a30c81ef3eb

Contents?: true

Size: 851 Bytes

Versions: 1819

Compression:

Stored size: 851 Bytes

Contents

Datepicker supports `position` options from [Flatpickr Options Documentation](https://flatpickr.js.org/options/). There are multiple positioning options to choose from.

**Note:** In order for the above prop to work properly, you must also send `staticPosition={false}` to your Datepicker kit instance.

#### Affix Datepicker Upon Scrolling

Upon adding `static={false}` to the date picker, you will notice that the date picker detaches from the input field while scrolling. This is a known Flatpickr nuance. By adding the `scrollContainer` prop, you can tell the date picker which DOM container it should watch for scroll events. In this example, you can see that `scrollContainer=".pb--page--content--main"` is being passed in order to keep the date picker correctly positioned on page scroll.

**Useage:** `scrollContainer: .validQuerySelectorHere`

Version data entries

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

Version Path
playbook_ui-11.10.0.pre.alpha.pre.bold1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.10.0.pre.alpha.pagination1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.10.0 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.9.0 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.9.0.pre.alpha.fileupload1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.8.1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.8.0 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.7.0.pre.alpha.table1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.7.0 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.6.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.5.0.pre.alpha.fontawesome app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.7.0.pre.alpha.pre.guagechart1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.6.0 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.5.0.pre.alpha.datepicker1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.6.0.pre.alpha.rubocopperf1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.6.1.pre.alpha.rubocop.pre.performance1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.5.0.pre.alpha.pre.rubocop app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.6.0.pre.alpha.momenttz1 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md
playbook_ui-11.5.0 app/pb_kits/playbook/pb_date_picker/docs/_date_picker_positions.md