snitchbot | Dashboard & Remote Field Sensing

Date Picker

Lightweight, powerful javascript datetimepicker with no dependencies.

Stylesheet

<link href="assets/lib/flatpickr/flatpickr.min.css" rel="stylesheet">

Javascript

<script src="assets/lib/flatpickr/flatpickr.min.js"></script>

Date Picker

Start Date

<div class="form-group">
  <label for="datepicker">Start Date</label>
  <input class="form-control datetimepicker" id="datepicker" type="text" data-options='{"dateFormat":"d/m/y"}'>
</div>

Time Picker

Start Time

<div class="form-group">
  <label for="timepicker1">Start Time</label>
  <input class="form-control datetimepicker" id="timepicker1" type="text" data-options='{"enableTime":true,"noCalendar":true,"dateFormat":"H:i"}'>
</div>

Date & Time Picker

Start Date

<div class="form-group">
  <label for="datetimepicker">Start Date</label>
  <input class="form-control datetimepicker" id="datetimepicker" type="text" data-options='{"enableTime":true,"dateFormat":"d/m/y H:i"}'>
</div>

Range

Select Time Range

<div class="form-group">
  <label for="timepicker2">Select Time Range</label>
  <input class="form-control datetimepicker" id="timepicker2" type="text" data-options='{"mode":"range","dateFormat":"d/m/y"}'>
</div>