Last active
April 28, 2023 09:48
-
-
Save mcrumm/88313d9f210ea17a640e673ff0d0232b to your computer and use it in GitHub Desktop.
flatpickr + LiveView example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// assets/js/app.js | |
// ... | |
import Pickr from "./pickr" | |
const hooks = { | |
Pickr | |
} | |
// ... | |
let liveSocket = new LiveSocket("/live", Socket, { hooks, params: { _csrf_token: csrfToken } }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// assets/js/pickr/index.js | |
import flatpickr from "flatpickr"; | |
const Pickr = { | |
mounted() { | |
this.pickr = flatpickr(this.el, { | |
wrap: true, | |
altInput: this.el.dataset.pickrAltFormat ? true : false, | |
altFormat: this.el.dataset.pickrAltFormat || "d M Y", | |
dateFormat: this.el.dataset.pickrDateFormat || "Y-m-d" | |
}) | |
}, | |
updated() { | |
const altFormat = this.el.dataset.pickrAltFormat | |
const wasFormat = this.pickr.config.altFormat | |
if (altFormat !== wasFormat) { | |
this.pickr.destroy() | |
this.pickr = flatpickr(this.el, { | |
wrap: true, | |
altInput: this.el.dataset.pickrAltFormat ? true : false, | |
altFormat: this.el.dataset.pickrAltFormat || "d M Y", | |
dateFormat: this.el.dataset.pickrDateFormat || "Y-m-d" | |
}) | |
} | |
}, | |
destroyed() { | |
this.pickr.destroy() | |
} | |
} | |
export default Pickr |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# lib/my_app_web/live/pickr_live.ex | |
defmodule MyAppWeb.PickrLive do | |
use MyAppWeb, :live_view | |
@impl Phoenix.LiveView | |
def render(assigns) do | |
~L""" | |
<h2>flatpickr example</h2> | |
<form id="pickr-form" action="#" phx-change="validate"> | |
<div id="starts-at-pickr" class="flatpickr" phx-update="ignore" phx-hook="Pickr" data-pickr-alt-format="<%= @format %>"> | |
<label for="starts-at">Starts at</label> | |
<input type="text" id="starts-at" name="pickr[starts_at]" placeholder="Select Start Date.." data-input /> | |
</div> | |
<div id="ends-at-pickr" class="flatpickr" phx-update="ignore" phx-hook="Pickr" data-pickr-alt-format="<%= @format %>"> | |
<label for="ends-at">Ends at</label> | |
<input type="text" id="ends-at" name="pickr[ends_at]" placeholder="Select End Date.." data-input /> | |
</div> | |
</form> | |
<%= if @values do %> | |
<p>Values: <code><%= @values %></code></p> | |
<% end %> | |
<hr /> | |
<form id="format" action="#" phx-change="format"> | |
<label>Alt Format</label> | |
<input type="text" name="format" value="<%= @format %>"/> | |
</form> | |
""" | |
end | |
@impl Phoenix.LiveView | |
def handle_event("validate", %{"pickr" => _} = values, socket) do | |
{:noreply, assign(socket, :values, inspect(values, pretty: true))} | |
end | |
def handle_event("format", %{"format" => format}, socket) do | |
{:noreply, assign(socket, :format, format)} | |
end | |
@impl Phoenix.LiveView | |
def mount(_, _, socket) do | |
{:ok, socket |> assign(:values, nil) |> assign(:format, "")} | |
end | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is what I needed! It's funny because I saw your ElixirConf talk on Phoenix the other day, and I should have known my google search would have led to you one way or another 😂