Cartzilla component

# Date / time picker

A lightweight and powerful date / time picker component.

The Date / time picker component is powered by the Flatpickr plugin. To use this component, ensure to include the required reference to the plugin's .css and .js files.

CSS file is linked in the `<head>` section and above `theme.min.css` reference in your document:

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

JavaScript file is linked before the closing `</body>` tag and above `theme.min.js` reference in your document:

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

For date range feature, be sure to add as well:

    <script src="assets/vendor/flatpickr/dist/plugins/rangePlugin.js"></script>

You can alter date / time picker behavior by specifying options within the `data-datepicker="{}"` attribute.

Usefull links:

- Check all available options here
- Flatpickr usage examples

#### Date picker

Choose date (Y-m-d default format)
Choose date (F j, Y format)
Choose date (M J, y format)

    <!-- Date picker: Y-m-d default date format -->
    <label for="date-1" class="form-label">Choose date</label>
    <div class="position-relative">
      <input type="text" class="form-control form-icon-end" id="date-1" data-datepicker placeholder="Choose date">
      <i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>

    <!-- Date picker: F j, Y date format -->
    <label for="date-2" class="form-label">Choose date</label>
    <div class="position-relative">
      <input type="text" class="form-control form-icon-end" id="date-2" data-datepicker='{"dateFormat": "F j, Y"}' placeholder="Choose date">
      <i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>

    <!-- Date picker: M J, y date format -->
    <label for="date-3" class="form-label">Choose date</label>
    <div class="position-relative">
      <input type="text" class="form-control form-icon-end" id="date-3" data-datepicker='{"dateFormat": "M J, y"}' placeholder="Choose date">
      <i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>

#### Time picker

Choose time (12-hour format)
Choose time (24-hour format)

    <!-- Time picker (12-hour format) -->
    <label for="time-12" class="form-label">Choose time</label>
    <div class="position-relative">
      <input type="text" class="form-control form-icon-end" id="time-12" data-datepicker='{
        "enableTime": true,
        "noCalendar": true,
        "dateFormat": "h:i K"
      }' placeholder="Choose time">
      <i class="ci-clock position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>

    <!-- Time picker (24-hour format) -->
    <label for="time-24" class="form-label">Choose time</label>
    <div class="position-relative">
      <input type="text" class="form-control form-icon-end" id="time-24" data-datepicker='{
        "enableTime": true,
        "noCalendar": true,
        "dateFormat": "H:i",
        "time_24hr": true
      }' placeholder="Choose time">
      <i class="ci-clock position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>

#### Date and time picker

Choose date and time

    <!-- Date and time picker -->
    <label for="date-time" class="form-label">Choose date and time</label>
    <div class="position-relative">
      <input type="text" class="form-control form-icon-end" id="date-time" data-datepicker='{
        "enableTime": true,
        "dateFormat": "F j, Y H:i"
      }' placeholder="Choose date and time">
      <i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>

#### Min and default dates

Choose date

    <!-- Date picker with set minimum and default day to "today" -->
    <label for="min-default-dates" class="form-label">Choose date</label>
    <div class="position-relative">
      <input type="text" class="form-control form-icon-end" id="min-default-dates" data-datepicker='{
        "dateFormat": "F j, Y",
        "defaultDate": "today",
        "minDate": "today"
      }' placeholder="Choose date">
      <i class="ci-calendar position-absolute top-50 end-0 translate-middle-y me-3"></i>
    </div>

#### Date range

Date range

    <!-- Slider with fade transition between slides -->
    <label class="form-label">Date range</label>
    <div class="input-group">
      <span class="input-group-text">
        <i class="ci-calendar fs-base"></i>
      </span>
      <input type="text" class="form-control" data-datepicker='{"dateFormat": "F j, Y", "linkedInput": "#end-date"}' placeholder="From date">
      <input type="text" class="form-control" data-datepicker='{"dateFormat": "F j, Y"}' id="end-date" placeholder="To date">
    </div>

Top