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.
- How to replace dropdown-toggle icon with another default icon in Bootstrap ?
- How to display icon next to show/hide text on button?
- How to convert the hamburger icon of navigation menu to X on click ?
- How to hide or show one record from an ng-repeat within a table based on ng-click?
- How to add icon logo in title bar using HTML ?
- How to style icon color, size, and shadow by using CSS ?
- How to Create an Image Overlay Icon using HTML and CSS ?
- Hide or show elements in HTML using display property
- How to Show and Hide div elements using radio buttons?
- How to Show and Hide div elements using Checkboxes ?
- Using Leaflet.js to show maps in a webpage
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.