Datepicker & Timepicker

Bootstrap 4 example 


<input id="datepicker" width="276" />
  
<script>
  $('#timepicker').datepicker({
    uiLibrary: 'bootstrap4'
  });
</script>

Material design example 


<input id="datepicker2" width="276" />
  
<script>
  $('#datepicker2').datepicker();
</script>

Date range example 



<label>Start Date:</label>
<input id="startDate" width="276" />

<label>End Date:</label>
<input id="endDate" width="276" />
  
<script>
  var today = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate());
  $('#startDate').datepicker({
    minDate: today,
    maxDate: function () {
        return $('#endDate').val();
    }
  });
  $('#endDate').datepicker({
    minDate: function () {
        return $('#startDate').val();
    }
  });
</script>

Timepicker example 


<input id="timepicker" width="276" />
  
<script>
  $('#timepicker').timepicker();
</script>