How can I design a dynamic date picker similar to the image provided below?
I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The current date picker does not meet my requirements for my assignment submission.
NaCH.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Design Challenge</title>
<!-- Viewport-->
<meta name="viewport" content="width=device-width" />
<!-- Favicons
<link rel="shortcut icon" href="img\favicon.png" type="image/x-icon"> -->
<!-- Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="js/date.js"></script>
<!-- Custom CSS-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section id="block2">
<div class="container">
<div class="well"></div>
</div>
</section>
<section id="nach">
<div class="container2" style="margin-top:40px">
<div class="col-md-8 col-md-offset-2">
<table class="table">
<tr class="header">
<td style="padding-left:25px;">Show</td>
<td>
<select>
<option value="" style="display:none;"></option>
<option value="0">KYC <span>COMPLETED</span></option>
<option value="1">MANDATE <span>SENT</span></option>
<option value="2">MANDATE <span>RECEIVED</span></option>
</select>
</td>
</tr>
<tr class="body">
<td >Sl.no</td>
<td style="text-align:left;">Customers</td>
<td>KYC COMPLETED</td>
<td>MANDATE SEND</td>
<td>CLEARED</td>
<td>DISAPPROVED</td>
</tr>
<tr id="calenderdate">
<td>01</td>
<td style="text-align:left;">Ellen <span>De generes</span></td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td ><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td class="tick2"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
<td class="wrong"><input type="text" id = "datepicker" disabled placeholder="01/02/2016"></td>
</tr>
<tr id="calenderdate">
<td>02</td>
<td style="text-align:left;">De generes</td>
<td><input type="text" is-datepicker="1" disabled placeholder="01/02/2016">
<img class="checked" src="img/success.png" width="10px" height="10px">
</td>
<td><input type="text" is-datepicker="1" placeholder="01/02/2016">
<img class="checked" src="img/gear.png" width="10px" height="10px">
</td>
<td class="tick3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
<td class="wrong3"><input type = "text" id = "datepicker" disabled placeholder="dd mm yy"></td>
</tr>
</table>
</div>
</div>
</section>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</body>
</html>