<.phx_form_for for={%{}} as={:story} :let={f}>
  <.date_picker_input_group form={f} id="date-picker-single-default-date-picker-input" field={:date}/>
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.date_picker_input_group
    form={f}
    id="date-picker-single-mobile-date-picker-input"
    field={:date}
    device_kind="mobile"
  />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.date_picker_input_group
    form={f}
    id="date-picker-single-date-picker-input-with-options"
    label="Date"
    field={:date}
    hint="Ceci est une date"
    placeholder="Please select the date."
  />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.date_picker_input_group
    form={f}
    id="date-picker-single-date-picker-input-with-reset-button"
    field={:date}
    reset_button={:on}
  />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.date_picker_input_group
    form={f}
    id="date-picker-single-date-picker-input-with-range"
    range
    field={:date}
    label_start="Start Date"
    label_end="End Date"
    placeholder_start="Please select the start date."
    placeholder_end="Please select the end date."
  />
</.phx_form_for>