UiBibz::Ui::Core::Forms::Dates::DatePickerField
This component is based on the library boostrap datepicker.
# by variable
ui_date_picker_field name, options, html_options
# or by block
ui_date_picker_field options, html_options do
name
end
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">
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">
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">
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">
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">
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">
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">
ui_date_picker_field "date_at", days_of_week_disabled: ["2020-10-13", "2020-10-14"]
<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">
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>
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 options (start view):
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 options (min and max view mode):
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">
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>
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