Correct strategy for using datepicker attached to an input field with Liveview?

Phoenix Forum Questions / Help
16

This is how I’m using today:

Put this inside the core_components.ex

  attr :id, :string, required: true
  attr :field, Phoenix.HTML.FormField,
    doc: "a form field struct retrieved from the form, for example: @form[:occurred_at]"
  attr :label, :string, default: nil
  def datetime_picker(assigns) do
    ~H"""
    <div id={@id} phx-update="ignore">
      <.input field={@field} phx-hook="DateTimePicker" type="text" label={@label} />
    </div>
    """
  end

Create a new Hook:

import flatpickr from "flatpickr"

/**
 * @type {import("phoenix_live_view").ViewHook}
 */
export const DateTimePicker = {
  mounted() {
    flatpickr(this.el, {
      enableTime: true,
      altFormat: "d/m/Y H:i",
      dateFormat: "Z",
      minuteIncrement: 1,
      time_24hr: true,
      altInput: true,
      static: true,
      wrap: false, 
    })
  },
}

If you are usign TailwindCSS, put this inside you app.css

/**
 * Flatpickr fix full width
 */
.flatpickr-wrapper {
  @apply relative w-full;
}

And use like that

<.datetime_picker
  id="occurred-at"
  field={@form[:occurred_at]}
  label="Occurred at"
/>

This will work fine with :utc_datetime.

10 Likes