<div>
<table>
<tbody>
<tr>
<td>Check-In Date</td>
<td>Check-Out Date</td>
</tr>
<tr>
<td><input onchange="changeDeparture()" type="text" id="checkin" class="test" autocomplete="off" name="arrival" value=""></td>
<td><input type="text" id="checkout" class="test" autocomplete="off" name="departure" value=""></td>
<td><button onclick="bookingEngine()">Book Now</button></td>
</tr>
</tbody>
</table>
</div>
<h1>PURE CSS DATE PICKER</h1>
<label for="dateofbirth">Date Of Birth</label>
<input type="date" name="dateofbirth" id="dateofbirth">

<style>
[type="date"] {<br />
  background:#fff url(https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ;<br />
}<br />
[type="date"]::-webkit-inner-spin-button {<br />
  display: none;<br />
}<br />
[type="date"]::-webkit-calendar-picker-indicator {<br />
  opacity: 0;<br />
}</p>
<p>/* custom styles */<br />
body {<br />
  padding: 4em;<br />
  background: #e5e5e5;<br />
  font: 13px/1.4 Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif;<br />
}<br />
label {<br />
  display: block;<br />
}<br />
input {<br />
  border: 1px solid #c4c4c4;<br />
  border-radius: 5px;<br />
  background-color: #fff;<br />
  padding: 3px 5px;<br />
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.1);<br />
  width: 190px;<br />
}<br />
</style>