Hi @cenotaph - did you manage to solve your problem. I’m struggling to get datepickr to work correctly with LiveView 0.17.
cheers
Dave
shortlyportly
0
cenotaph
shortlyportly
sergio
My man do you know how much heartburn I suffered today trying to fix this god forsaken thing and your solution pulled me from the depths of hades out of the clutches of Mephistopheles himself?
5
RodolfoSilva
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
rio517
I wound up going with a very similar solution in a subsequent project, except in my case, I needed to communicate validation errors in my form. I wound up wrapping my phx-update="ignore" with a parent node <dix phx-feedback-for="target" and add some custom CSS to help render validation errors.
1
Abuelo
Would you mind showing an example of your error handling on the datepicker field? I’m doing something similar and I’m sort of new the way Elixir handles forms.
1
linusdm
I’m having issues integrating flatpickr using LiveView 1.0. The new way of keeping track of unused inputs doesn’t seem to play nice with how flatpickr is initialized (at least not with the configuration permutations I’ve tried).
The params sent to the LV event handler (using phx-change) don’t contain the _unused_xxx parameter for the date input even if it’s not being touched. This makes the date input immediately seem used. In cases where the date input is validated as required for example, this makes the input show up with its error markup and validation error, even though another input is being edited.
Did anyone notice the same? I’ve tried the wrap option of flatpickr, but also the method of placing the altInput inside phx-ignore element. Without any luck. My hypothesis is that flatpickr “touches” the original input, which confuses the LiveView js runtime that keeps track of the used/unused inputs. But I’m unaware of the internals of this process.
0
Arsenalist
@linusdm did you figure this out? i’m in the same boat. I have it working without altInput but when altInput: true then the date picker doesn’t pop up
Edit: actually @RodolfoSilva ’s solution works!
0
RodolfoSilva
Hi folks, here is my latest contribution to this component: Flatpickr with support for an unused feature from Phoenix.
attr :id, :string, required: true
attr :field, Phoenix.HTML.FormField,
doc: "a form field struct retrieved from the form, for example: @form[:email]"
attr :label, :string, default: nil
attr :class, :string, default: nil
def datetime_picker(%{field: %Phoenix.HTML.FormField{} = field} = assigns) do
errors = if Phoenix.Component.used_input?(field), do: field.errors, else: []
assigns = assign(assigns, :errors, Enum.map(errors, &translate_error(&1)))
~H"""
<div id={@id} class={["fieldset mb-2", not Enum.empty?(@errors) && "with-error"]}>
<div>
<label :if={@label} for={@field.id} class="label mb-1">{@label}</label>
<div id={"#{@field.id}-picker"} class="relative" phx-hook=".Flatpickr" phx-update="ignore">
<input
type="datetime-local"
name={@field.name}
id={@field.id}
placeholder="dd/mm/yyyy hh:mm"
value={normalize_iso_datetime(@field.value)}
class={[@class || "input w-full", @errors != [] && "input-error"]}
/>
</div>
<p :for={msg <- @errors} class="text-error mt-1.5 flex items-center gap-2 text-sm">
<.icon name="hero-exclamation-circle" class="size-5" />
{msg}
</p>
</div>
</div>
<script :type={Phoenix.LiveView.ColocatedHook} name=".Flatpickr">
import flatpickr from "flatpickr";
/**
* @type {import("phoenix_live_view").ViewHook & { picker: flatpickr.Instance }}
*/
export default {
mounted() {
const input = this.el.querySelector("input")
const originalType = input.getAttribute("type")
this.picker = flatpickr(input, {
enableTime: true,
altFormat: "d/m/Y H:i",
dateFormat: "Z",
minuteIncrement: 1,
time_24hr: true,
altInput: true,
static: true,
})
input.setAttribute("type", originalType);
input.setAttribute("style", "display: none;");
},
destroyed() {
this.picker.destroy()
this.picker = null
},
}
</script>
"""
end
This assumes that you are using Flatpickr with npm and the latest Phoenix/LiveView version.
2