--- alert-message: ', http://getbootstrap.com, and http://bootstrap-datepicker.readthedocs.org/en/latest/.' categories: [Widgets] layout: page title: Bootstrap-Datepicker resource: true url-js-extra: 'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js' ---

Readonly Inputs

Recommended. To prevent invalid dates, setting the inputs to readonly only allows a date to be input via the date picker widget.

Text Input

{% include widgets/forms/bootstrap-datepicker-text-input.html id="datepicker1" %}

Component

{% include widgets/forms/bootstrap-datepicker.html id="datepicker2" %}

Inline

{% include widgets/forms/bootstrap-datepicker-inline.html id="datepicker3" %}

Range Do not use. PatternFly-approved design coming in a future update.

to

Validation States


Normal Inputs

Not recommended. For comparison only.

Text Input

Component

Inline

Range Do not use. PatternFly-approved design coming in a future update.

to

Validation States