Phenix Storybook

Pick a theme

Displays Riders

Date Picker

Default date picker input Open in playground 
<.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>
Mobile date picker input Open in playground 
<.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>
Date picker input with options Open in playground

Ceci est une date 

<.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>
Date picker input with reset button Open in playground 
<.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>
Date picker input with range Open in playground 
<.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_end="End Date" label_start="Start Date" placeholder_end="Please select the end date." placeholder_start="Please select the start date."/>
</.phx_form_for>