Bootstrap is one of the widely preferred CSS frameworks for the development of an interactive user interface. Bootstrap comes bundled with a wide range of components, plugin, and utilities that make designing a webpage much easier.
- The calendar icon is appended to the input field where the date is to input using the input-group-prepend class.
- The span for the icon is set using the input-group-text class.
- The icon when clicked triggers the setDatepicker() function and the setDatepicker() function accepts the current event as an argument.
- This step is important as the class name is required in the class selector in the jQuery datepicker() function. The datepicker() function specifies the format of date, orientation of the calendar, closing and autofocus behaviour. Once the calendar is displayed the user can choose the date and it is reflected in the input field.
Approach 2: The second approach is comparatively easier. It accomplishes the target in fewer lines of code. This code mainly makes use of jQuery.
- The date-picker button Image also serves the same purpose as the icon in the previous example. The buttonImageOnly does not only add an image to the button but it also adds an image to the document.
- As we click in the image the calendar is displayed and the user can select the date which is immediately reflected in the input field. The button image in this is pre-downloaded and stored in the local device. The calendar closes when clicked outside the calendar.