Packages
moon
2.90.0
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon_web/examples/design/dropdown_example/datepicker.ex
defmodule MoonWeb.Examples.Design.DropdownExample.Datepicker do
@moduledoc false
use Moon.StatefulComponent
use MoonWeb, :example
alias Moon.Design.Dropdown
alias Moon.Components.Chip
import Date, only: [new: 3, day_of_week: 1, add: 2]
prop(value, :date, default: Date.utc_today())
prop(month, :date, default: Date.utc_today())
prop(is_open, :boolean)
def handle_event("set_value", %{"value" => value}, socket) do
{:noreply, assign(socket, value: Date.from_iso8601!(value), is_open: false)}
end
def handle_event("change_month", %{"value" => value}, socket) do
{:noreply, assign(socket, month: Date.from_iso8601!(value), is_open: true)}
end
defp month_weeks(date) do
import Enum, only: [map: 2]
{:ok, month_start} = new(date.year, date.month, 1)
start = month_start |> add(1 - day_of_week(month_start))
# no more than 5 weeks in month
0..4
|> map(fn week_nr ->
0..6 |> map(&add(start, week_nr * 7 + &1))
end)
end
defp months() do
[""] ++ ~w(Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec)
end
def render(assigns) do
~F"""
<div>
<Dropdown id="dropdown-datepicker" {=@is_open}>
<Dropdown.Trigger>
<Chip>{@value || "Choose date..."}</Chip>
</Dropdown.Trigger>
<Dropdown.Options class="w-auto p-1">
<div class="w-full flex justify-between">
<button
class="hover:bg-gohan rounded-moon-i-sm py-1 w-6"
:on-click="change_month"
value={add(@month, -30)}
>
{"<"}
</button>
<span class="py-1">{Enum.at(months(), @month.month)} {@month.year}</span>
<button
class="hover:bg-gohan rounded-moon-i-sm py-1 w-6"
:on-click="change_month"
value={add(@month, 30)}
>
{">"}
</button>
</div>
<div class="py-1 flex">
{#for day <- ~w(m t w t f s s)}
<span class="w-6 bg-gohan inline-block uppercase text-center text-trunks">{day}</span>
{/for}
</div>
{#for week <- month_weeks(@month)}
<div class="py-1 flex">
{#for day <- week}
<button
class={merge([
"w-6 hover:bg-gohan rounded-moon-i-sm",
"font-medium": @value == day,
"text-trunks": day.month != @month.month,
"text-piccolo": day == Date.utc_today()
])}
value={day}
:on-click="set_value"
>{day.day}</button>
{/for}
</div>
{/for}
</Dropdown.Options>
</Dropdown>
</div>
"""
end
def code() do
"""
alias Moon.Design.Dropdown
alias Moon.Components.Chip
import Date, only: [new: 3, day_of_week: 1, add: 2]
prop(value, :date, default: Date.utc_today())
prop(month, :date, default: Date.utc_today())
prop(is_open, :boolean)
def handle_event("set_value", %{"value" => value}, socket) do
{:noreply, assign(socket, value: Date.from_iso8601!(value), is_open: false)}
end
def handle_event("change_month", %{"value" => value}, socket) do
{:noreply, assign(socket, month: Date.from_iso8601!(value), is_open: true)}
end
defp month_weeks(date) do
import Enum, only: [to_list: 1, map: 2]
{:ok, month_start} = new(date.year, date.month, 1)
start = month_start |> add(1 - day_of_week(month_start))
0..4
|> to_list
|> map(fn week_nr ->
0..6 |> to_list |> map(&add(start, week_nr * 7 + &1))
end)
end
defp months() do
[""] ++ ~w(Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec)
end
def render(assigns) do
~F\"""
<div>
<Dropdown id="dropdown-datepicker" {=@is_open}>
<Dropdown.Trigger>
<Chip>{@value || "Choose date..."}</Chip>
</Dropdown.Trigger>
<Dropdown.Options class="w-auto p-1">
<div class="w-full flex justify-between">
<button class="hover:bg-gohan rounded-moon-i-sm py-1 w-6" :on-click="change_month" value={add(@month, -30)}> {"<"} </button>
<span class="py-1">{Enum.at(months(), @month.month)} {@month.year}</span>
<button class="hover:bg-gohan rounded-moon-i-sm py-1 w-6" :on-click="change_month" value={add(@month, 30)}> {">"} </button>
</div>
<div class="py-1 flex">
{#for day <- ~w(m t w t f s s)}
<span class="w-6 bg-gohan inline-block uppercase text-center">{day}</span>
{/for}
</div>
{#for week <- month_weeks(@month)}
<div class="py-1 flex">
{#for day <- week}
<button class={
"w-6 hover:bg-gohan rounded-moon-i-sm",
"font-medium": @value == day,
"text-trunks": day.month != @month.month,
"text-piccolo": day == Date.utc_today()
} value={day} :on-click="set_value">{day.day}</button>
{/for}
</div>
{/for}
</Dropdown.Options>
</Dropdown>
</div>
\"""
end
"""
end
end