<div class="mb-3">
  <label for="flatpickr-time" class="form-label">Time Picker</label>
  <input type="text" class="form-control" placeholder="HH:MM" id="flatpickr-time" />
</div>

var flatpickrTime = document.querySelector("#flatpickr-time");

flatpickrTime.flatpickr({
  enableTime: true,
  noCalendar: true,
  static: true
});

<div class="mb-3">
  <label for="flatpickr-datetime" class="form-label">Datetime Picker</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-datetime" />
</div>

var flatpickrDateTime = document.querySelector("#flatpickr-datetime");

flatpickrDateTime.flatpickr({
  enableTime: true,
  dateFormat: "Y-m-d H:i",
  static: true
});

<div class="mb-3">
  <label for="flatpickr-multi" class="form-label">Multiple Dates Picker</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:MM" id="flatpickr-multi" />
</div>

var flatpickrMulti = document.querySelector("#flatpickr-multi");

flatpickrMulti.flatpickr({
  weekNumbers: true,
  enableTime: true,
  mode: "multiple",
  minDate: "today",
  static: true
});

<div class="mb-3">
  <label for="flatpickr-range" class="form-label">Range Picker</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD to YYYY-MM-DD" id="flatpickr-range" />
</div>

var flatpickrRange = document.querySelector("#flatpickr-range");

flatpickrRange.flatpickr({
  mode: "range",
  static: true
});

<div class="mb-3">
  <label for="flatpickr-human-friendly" class="form-label">Human Friendly Date Picker</label>
  <input type="text" class="form-control" placeholder="Month DD, YYYY" id="flatpickr-human-friendly" />
</div>

var flatpickrFriendly = document.querySelector("#flatpickr-human-friendly");

flatpickrFriendly.flatpickr({
  altInput: true,
  altFormat: "F j, Y",
  dateFormat: "Y-m-d",
  static: true
});

<div class="mb-3">
  <label for="flatpickr-disabled-range" class="form-label">Disabled Range</label>
  <input type="text" class="form-control" placeholder="YYYY-MM-DD" id="flatpickr-disabled-range" />
</div>

var flatpickrDisabledRange = document.querySelector("#flatpickr-disabled-range");

flatpickrDisabledRange.flatpickr({
  dateFormat: "Y-m-d",
  disable: [
    {
      from: "2021-10-01",
      to: "2021-10-10"
    }
  ],
  static: true
});

<div class="mb-3">
  <label for="flatpickr-inline" class="form-label">Inline Picker</label>
  <input type="text" class="form-control mb-1" placeholder="YYYY-MM-DD" id="flatpickr-inline" />
</div>

var flatpickrInline = document.querySelector("#flatpickr-inline");

flatpickrInline.flatpickr({
  inline: true,
  allowInput: false,
  monthSelectorType: "static"
});

<div class="mb-3">
  <label for="bs-rangepicker-single" class="form-label">Single Picker</label>
  <input type="text" id="bs-rangepicker-single" class="form-control" />
</div>

$("#bs-rangepicker-single").daterangepicker({
  singleDatePicker: true,
  opens: isRtl ? 'left' : 'right'
});

<div class="mb-3">
  <label for="bs-rangepicker-time" class="form-label">With Time Picker</label>
  <input type="text" id="bs-rangepicker-time" class="form-control" />
</div>

$("#bs-rangepicker-time").daterangepicker({
  timePicker: true,
  timePickerIncrement: 30,
  locale: {
    format: 'MM/DD/YYYY h:mm A'
  },
  opens: isRtl ? 'left' : 'right'
});

<div class="mb-3">
  <label for="bs-rangepicker-range" class="form-label">Ranges</label>
  <input type="text" id="bs-rangepicker-range" class="form-control" />
</div>

$(".bs-rangepicker-range").daterangepicker({
  ranges: {
    Today: [moment(), moment()],
    Yesterday: [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
    'This Month': [moment().startOf('month'), moment().endOf('month')],
    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
  },
  opens: isRtl ? 'left' : 'right'
});

<div class="mb-3">
  <label for="bs-rangepicker-week-num" class="form-label">Week Numbers</label>
  <input type="text" id="bs-rangepicker-week-num" class="form-control" />
</div>

$("#bs-rangepicker-week-num").daterangepicker({
  showWeekNumbers: true,
  opens: isRtl ? 'left' : 'right'
});

<div class="mb-3">
  <label for="bs-rangepicker-dropdown" class="form-label">Month & Year Dropdown</label>
  <input type="text" id="bs-rangepicker-dropdown" class="form-control" />
</div>

$("#bs-rangepicker-dropdown").daterangepicker({
  showDropdowns: true,
  opens: isRtl ? 'left' : 'right'
});

<div class="mb-3">
  <label for="timepicker-min-max" class="form-label">Min-Max</label>
  <input type="text" id="timepicker-min-max" placeholder="HH:MMam" class="form-control" />
</div>

$("#timepicker-min-max").timepicker({
  minTime: '2:00pm',
  maxTime: '7:00pm',
  showDuration: true,
  orientation: isRtl ? 'r' : 'l'
});

<div class="mb-3">
  <label for="timepicker-disabled-times" class="form-label">Disabled Times</label>
  <input type="text" id="timepicker-disabled-times" placeholder="HH:MMam" class="form-control" />
</div>

$("#timepicker-disabled-times").timepicker({
  disableTimeRanges: [
    ['12am', '3am'],
    ['4am', '4:30am']
  ],
  orientation: isRtl ? 'r' : 'l'
});

<div class="col-md-6 col-12">
  <label for="timepicker-format" class="form-label">Format</label>
  <input type="text" id="timepicker-format" placeholder="HH:MM:SS" class="form-control" />
</div>

$("#timepicker-format").timepicker({
  show: '24:00',
  timeFormat: 'H:i:s',
  orientation: isRtl ? 'r' : 'l'
});

<div class="mb-3">
  <label for="timepicker-step" class="form-label">Step</label>
  <input type="text" id="timepicker-step" placeholder="HH:MMam" class="form-control" />
</div>

$("#timepicker-step").timepicker({
  step: 15,
  orientation: isRtl ? 'r' : 'l'
});

<div class="mb-3">
  <label for="timepicker-24hours" class="form-label">24 Hours Format</label>
  <input type="text" id="timepicker-24hours" placeholder="20:00:00" class="form-control" />
</div>

$("#timepicker-24hours").timepicker({
  show: "24:00",
  timeFormat: 'H:i:s',
});