Datepicker

Datepicker

Datepicker component has to be placed inside the Form component.

Use with_time (list) prop. Default value is false.

Use ranges (list) prop. Possible values are lastMonth, lastWeek, yesterday, last24hours, today, tomorrow, thisWeek, nextWeek, thisMonth, nextMonth.

Use week_starts_on prop. The weekstart can between 1..7, where 1 means Monday. Default value is 1.

Default

State
@data = %{ended_at: nil, started_at: ~D[2022-12-02]}

@changeset = #Ecto.Changeset<action: nil, changes: %{}, errors: [], data: #MoonWeb.Pages.Components.Date.DatepickerPage.Contract<>, valid?: true>

With time

State
@data = %{datetime_ended_at: nil, datetime_started_at: nil}

@changeset = #Ecto.Changeset<action: nil, changes: %{}, errors: [], data: #MoonWeb.Pages.Components.Date.DatepickerPage.Contract<>, valid?: true>

Custom ranges

Custom weekstart

Props
Name Type Required Default Description
with_time boolean false false Whether the datepicker includes time
week_starts_on 1 | 2 | 3 | 4 | 5 | 6 | 7 false 1 (Monday) Day of the week where the calendar starts
start_date_field atom false start_date Field name for the start date
end_date_field atom false end_date Field name for the end date
button_class css_class false Css class for the date button
show_date_inputs boolean false false Whether to display the text input fields
ranges list false lastMonth | lastWeek | yesterday | thisWeek | thisMonth | last24hours | today List of date ranges to choose from
start_date datetime false Timex.today() Initial start date
end_date datetime false Timex.today() Initial end date
submit event false update_dates Event on date apply
testid string false -