Cfa Ui Components
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div>
  <p class="text-[16px] mb-[8px]">
    <strong> Date Of Birth </strong>
  </p>
  <p class="help_text mb-[8px]">
    For example: August 28 1986
  </p>
  <div class="flex">
    <div>
      <label class="label" for="form_component_preview_test_model_form_component_preview_test_model_my_date_2i">Month</label><br>
      <select name="form_component_preview_test_model[my_date(2i)]" id="form_component_preview_test_model_my_date_2i" class="mr-[8px] outline  mt-[8px] h-[40px]"><option value="">- Select -</option><option value="1">January</option>
        <option value="2">February</option>
        <option selected="selected" value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option></select>
    </div>
    <div>
      <label class="label" for="form_component_preview_test_model_form_component_preview_test_model_my_date_3i">Day</label><br>
      <input value="27" id="form_component_preview_test_model_my_date_3i" type="text" inputmode="numeric" minlength="1" maxlength="2" placeholder="DD" class="w-[48px] outline mr-[8px]  mt-[8px] h-[40px] px-[8px]" size="2" name="form_component_preview_test_model[my_date(3i)]" />
    </div>
    <div>
      <label class="label" for="form_component_preview_test_model_form_component_preview_test_model_my_date_1i">Year</label><br>
      <input value="2016" id="form_component_preview_test_model_my_date_1i" type="text" inputmode="numeric" minlength="4" maxlength="4" placeholder="YYYY" class="w-[72px] outline mr-[8px] mt-[8px] h-[40px] px-[8px]" size="4" name="form_component_preview_test_model[my_date(1i)]" />
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
custom_model = TestModel.new(my_date: Date.today - 10.years)
custom_model.valid?
render DatePickerComponent.new(form: form(model: custom_model),
  method: :my_date,
  label: "Date Of Birth",
  label_day: "Day",
  label_month: "Month",
  label_month_select: "- Select -",
  label_year: "Year",
  helper_text: "For example: August 28 1986"
)

No notes provided.

No params configured.