x
1
2
3
<div class="relative"><input class="rounded-lg text-gray-900 border border-gray-200 placeholder-gray-500 focus:border-blue-500 focus:ring-3 outline-none focus:ring-blue-500/50 dark:text-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-400 dark:focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-75 dark:[color-scheme:dark] text-sm leading-5 px-3 py-2 pr-8" type="text" placeholder="Select date..." data-controller="date" data-date-format-value="Y-m-d" data-date-enable-time-value="false" data-date-time-24hr-value="false" data-date-multiple-value="false"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="" class="size-4 absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none"> <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd"></path></svg></div>| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
data_attrs = { controller: "date", date_format_value: format, date_enable_time_value: enable_time, date_time_24hr_value: time_24hr, date_multiple_value: multiple}data_attrs[:date_min_date_value] = min_date if min_date.present?data_attrs[:date_max_date_value] = max_date if max_date.present?data_attrs[:date_default_date_value] = default_date if default_date.present?data_attrs[:date_alt_input_value] = alt_input if alt_inputdata_attrs[:date_alt_format_value] = alt_format if alt_inputrender ui.form.input( type: "text", size: size, icon_right: "calendar", placeholder: "Select date...", data: data_attrs)