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[2025-11-04], 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 | - |