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 = %{started_at: ~D[2024-03-29], ended_at: nil}

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