Allowing users to easily add dates to your input fields with jQuery UI Datepicker

In this recipe, we will use jQuery UI and its excellent Datepicker. This is a mature and stable library, but there is one caveat to have in mind, that is, there are no styles compatible with Bootstrap 4.

Thus, the task for this recipe is to make the jQuery UI's Datepicker widget work with Bootstrap 4. This task mostly has to do with CSS. The official jQuery UI documentation for the Datepicker widget is available at https://jqueryui.com/datepicker/.

How to do it…

1. Reference the recipe specific SCSS file, recipe06-07.scss, on top of main.scss. After this addition, main.scss should now look as follows:

@import "recipe06-07.scss"; 

@import "./bower_components/bootstrap/scss/bootstrap.scss";
@import "./bower_components/bootstrap/scss/_mixins.scss";
@import "./bower_components/font-awesome/scss/font-awesome.scss";
@import "./bower_components/hover/scss/hover.scss";

2. Next, open the SCSS file you imported in the preceding...