Here, will discuss the simple steps to Implement a date picker and time picker into the JSP or HTML page. also will see how can we add the conditions like disabling the previous dates or times in the date picker or time picker on the JSP or HTML page.

Add Date picker into JSP or HTML page

HTML 5 provides an attribute type=”date” that will cover the input field into the date picker.

<input type="date" class="form-control form-control-lg" id="fromBookingDate" placeholder="dd/MM/yyyy"/>

Add Time picker into JSP or HTML page

HTML 5 provides an attribute type=”time” that will cover the input field into the time picker.

<input type="time" class="form-control form-control-lg" id="fromTime" path="fromTime" placeholder="HH:MM:SS"/>

Disable previous Dates from Datepicker in JSP

HTML 5 provides an attribute min=”yyyy-MM-dd”. It means it will disable the previous dates of that that you enter into the value of min attribute.

Now, We need to just pass the current date in the correct format of  “yyyy-MM-dd” and JSP allow us to write the java code so we can convert the current date in this format, let’s do this in the below code snippet steps.

<%@page import="java.text.DateFormat"%>
<%DateFormat df = new java.text.SimpleDateFormat("yyyy-MM-dd"); %>
<input type="date" class="form-control form-control-lg" id="fromBookingDate" path="fromBookingDate" placeholder="dd/MM/yyyy" min="<%= df.format(new java.util.Date())%>"/>