How to create a simple bootstrap date picker in HTML or JSP page. In this example let’s create a simple JSP page containing an input field called Date of birth. and when the user clicks on this input field, A date picker will be there to select the date of birth.

Create DatePicker in bootstrap

Copy the blow required bootstrap library and plugin that allow us to use the date picker and perform multiple operations on it. Add these libraries on the head tag of the page or you can head into the header file before CSS loads.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

Js Script to create date picker

Add the below JavaScript into the header of the page. it will allow us to use datepicker().

<script type="text/javascript">
$('.datepicker').datepicker();
</script>

Define Date element into HTML

Create a simple HTML field and call data-provide=”datepicker” Property. that is the date picker id in our JavaScript.

            <input type="text" data-provide="datepicker" id="datepicker"  class="form-control" placeholder="Enter Date Of Birth"
                            name="dob" value="#" >

Save the page and run it when the user clicks on the field. user can see the date picker we can select the dates.

Bootstrap Date picker code

<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

<script type="text/javascript"> $('.datepicker').datepicker(); </script>

</head>

<body>

<div class="form-group row"> <label for="email_address" class="col-md-4 col-form-label text-md-right">Date Of Birth<font color="red">*</font></label> <div class="col-md-6"> <input type="text" data-provide="datepicker" id="datepicker" class="form-control" placeholder="Enter Date Of Birth" name="dob" value="" > </div>

</body>
</html>