JSFiddle - React, Tailwind, and code Playground

by beebul

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<form>
  <input id="check_in_date" name="check_in_date" type="date" class="datepicker" placeholder="> Check in Date" required>
  <label for="check_in_date">Check In Date</label>
  <input type="submit" value="Submit">
</form>

CSS

#check_in_date {
  background: #fff;
  border-bottom: thick solid grey;
  padding-left: 2rem;
}

#check_in_date:hover {
  cursor: pointer;
}

#check_in_date::-webkit-input-placeholder {
  color: grey;
}

JavaScript

$(document).ready(function() {
  var pickr = $('.datepicker').pickadate({
    format: 'dd/mm/yyyy',
    selectMonths: true, // Creates a dropdown to control month
    selectYears: 5, // Creates a dropdown of 15 years to control year
    editable: true
  });
  $('select').material_select();
  $('.datepicker').click(function() {
    pickr.pickadate('open');
  })
});