Date pickers are useful when we want the user to select a date. We use it in places like the action creation form and news creation form. We offer a calendar so the user can pick the date they want, and it looks like this:

In the above example, the calendar displaces other elements (note how the white box around it grows when you open it), but we can also make the calendar "float" above other elements:

The issue with the floating calendar is that sometimes we don't have quite enough vertical space to display it floating, and so it creates a scrollbar, and the user needs to scroll down to view it entirely.

Similar to other inputs, we can also display and error, and disable the datepicker: