Flatpickr

Date(time) user input through nice calendar.

Properties: DPG Flatpickr parts.

• Flatpickr Library Files:

  • /static/js/flatpickr.min.js

  • /static/css/flatpickr.min.css

• Custom JS: ./static/js/dpg_flatpickr.js

  document.addEventListener('alpine:init', () => {
      Alpine.data('flatpickr', () => ({
          init() {
              flatpickr(this.$el, {
                  enableTime: true,
                  dateFormat: 'H.i d.m.Y',
                  time_24hr: true,
              });
          }
      }));
  });
  

• Field Component: /templates/cotton/fancy/form/field_flatpickr.html

  {% load widget_tweaks %}
  <div class="relative mt-4">
      <label for="{{ field.id_for_label }}"
          class="absolute left-3 top-1 text-xs transition-all {% if field.errors %}text-error dark:text-red-400{% else %}text-primary dark:text-neutral-400{% endif %}">
          {{ label }}
      </label>
      {% render_field field x-data="flatpickr" class="peer block w-full border-b-2 bg-surface-variant px-3 pt-6 pb-2 focus:outline-none dark:text-neutral-100" %}
  </div>
  

Workflow: Add a flatpickr field to my form.

1. Create a DPG form.

2. Make sure the form has forms.DateTimeField()

3. Add that field to the form in template: <c-fancy.form.field_flatpickr :field="filter_form.end_date" label="Created Before" />