Date Picker Field(ui_date_picker_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Dates::DatePickerField

This component is based on the library boostrap datepicker.

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • html_options[hash]<default: {}>
  • options[hash]<default: {}>

 # by variable 
 ui_date_picker_field name, options, html_options 

 # or by block 
 ui_date_picker_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • action[string](use component stimulus-options method)
  • append[html]Add a content before the field
  • autoclose[boolean]
  • cache[string](use to cache your component)
  • calendar_weeks[boolean]
  • controller[string](use component stimulus-options method)
  • dates_disabled[string/array]
  • days_of_week_disabled[integer/array]
  • format[string]
  • multiple[boolean]
  • prepend[html]Add a content after the field
  • range[string/html]
  • size[symbol](:lg, :md, :sm)(use component size method)
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • target[string](use component stimulus-options method)
  • today_highlight[boolean]
  • turbo[string](use component turbo method)

Examples

Some examples explain how to use the options present in the component.

Date Picker Field

ui_date_picker_field 'search'

<input type="text" name="search" id="search" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control">

Format

ui_date_picker_field "date_at", format: "dd/mm/yyyy"

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" data-date-toggle-active="true" class="date_picker form-control">

Glyph

ui_date_picker_field "date_at", append: ui_glyph("calendar"), prepend: ui_glyph("pencil-alt")

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control">

Multiple

ui_date_picker_field "date_at", multiple: true

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" data-date-toggle-active="true" data-date-multidate="true" class="date_picker form-control">

Days of week disabled

ui_date_picker_field "date_at", days_of_week_disabled: [1,4]

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" data-date-toggle-active="true" data-date-days-of-week-disabled="[1,4]" class="date_picker form-control">

Calendar weeks

ui_date_picker_field "date_at", calendar_weeks: true

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" data-date-calendar-weeks="true" data-date-toggle-active="true" class="date_picker form-control">

Today highlight

ui_date_picker_field "date_at", today_highlight: true

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" data-date-today-highlight="true" data-date-toggle-active="true" class="date_picker form-control">

Dates disabled

ui_date_picker_field "date_at", days_of_week_disabled: ["2023-10-18", "2023-10-19"]

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" data-date-toggle-active="true" data-date-days-of-week-disabled="[1,4]" class="date_picker form-control">

Field range

to
ui_date_picker_field "range", range: 'to'

<div class="input-group input-daterange">
  <input type="text" name="r" id="r" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control"><span class="input-group-addon input-group-range">to</span>
  <input type="text" name="a" id="a" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control">
</div>

Status

ui_date_picker_field "date_at", status: :success

<div class="input-group has-success input-daterange">
  <input type="text" name="r" id="r" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control"><span class="input-group-addon input-group-range">to</span>
  <input type="text" name="a" id="a" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control">
</div>

Display Mode

Display mode options (start view):

  • days: 0
  • months: 1
  • years: 2
  • decades: 3
  • centuries: 4
ui_date_picker_field "date_at", display_mode: :months

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-btn="linked" data-date-toggle-active="true" data-date-start-view="1" class="date_picker form-control">

Display Mode min and max

Display mode min options (min and max view mode):

  • days: 0
  • months: 1
  • years: 2
  • decades: 3
  • centuries: 4
ui_date_picker_field "date_at", display_mode: :months, display_mode_min: :months, display_mode_max: :years

<input type="text" name="date_at" id="date_at" data-date-locale="en" data-provide="datepicker" data-date-format="yyyy-mm-dd" data-date-today-btn="linked" data-date-toggle-active="true" data-date-start-view="1" data-date-min-view-mode="1" data-date-max-view-mode="2" class="date_picker form-control">

Range with glyph

ui_date_picker_field "range", range: ui_glyph("calendar-minus"), display_mode: :months, append: ui_glyph("car"), prepend: ui_glyph("pencil-alt")

<div class="input-group input-daterange">
  <span class="input-group-addon"><i class="ui_glyph fa fa-car"></i></span>
  <input type="text" name="r" id="r" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control"><span class="input-group-addon input-group-range"><i class="ui_glyph fa fa-calendar-minus"></i></span>
  <input type="text" name="a" id="a" data-date-locale="en" data-provide="datepicker" data-date-format="dd/mm/yyyy" data-date-today-btn="linked" class="date_picker form-control"><span class="input-group-addon"><i class="ui_glyph fa fa-pencil-alt"></i></span>
</div>

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_date_picker_field. You can use Simple Form input options and Ui Bibz ui_date_picker_field options.

ui_form_for(@search) do |f|
  ...
  f.input :date, as: :ui_date_picker_field, append: ui_glyph("calendar"), display_mode: :months
  ...
end