在date_field上的Bootstrap on rails form helper问题并选择

Question

I'm trying to style my form in rails with bootstrap-4. But I'm having issues apply styles to the date_field helper and the select helper.

This is the date field. The class won't apply and throws an error until I take it off.

<div class="form-group row">
    <%= form.label :appointment, :class => 'col-md-3 col-form-label text-md-right' %>
    <div class="col-md-9">
         <%= date_field(:patient, :apointment), :class => 'form-control' %>
    </div>
</div>

This is the select helper. The options are appearing outside of the select box.

<div class="form-group row">
              <%= form.label :consultationType, :class => "col-md-3 col-form-label text-md-right" %>
            <div class="col-md-9">
                <select class ="form-control">
                  <!--Gets all counties from DB -->
                  <%= form.select :consultationType, 
                [
                    "N/A",
                    "Inhouse-Clinic",
                    "St.James Hospital - X-Ray",
                    "Matter Private Dublin - Cardiology",
                    "Matter Private Cork - Neurology",
                    "Royal Eye and Ear - Ophthalmology",
                    "Temple Street - Children"
                ] 
            %>
                </select>

        </div>
      </div>

Answer 1

Try to the following

<%= date_field(:patient, :apointment, class: "form-control") %>

Generated HTML

<input class="form-control" type="date" name="patient[apointment]" id="patient_apointment">

And for the select tag, you have declared two times, you can remove the HTML <select> tag and then add the bootstrap class like this

<%= form.select :consultationType,
    [
        "N/A",
        "Inhouse-Clinic",
        "St.James Hospital - X-Ray",
        "Matter Private Dublin - Cardiology",
        "Matter Private Cork - Neurology",
        "Royal Eye and Ear - Ophthalmology",
        "Temple Street - Children"
    ], {}, {class: "form-control"} 
%>

Generated HTML like this

<select class="form-control" name="patient[consultationType]" id="model_consultationType"><option value="N/A">N/A</option>
    <option value="Inhouse-Clinic">Inhouse-Clinic</option>
    <option value="St.James Hospital - X-Ray">St.James Hospital - X-Ray</option>
    <option value="Matter Private Dublin - Cardiology">Matter Private Dublin - Cardiology</option>
    <option value="Matter Private Cork - Neurology">Matter Private Cork - Neurology</option>
    <option value="Royal Eye and Ear - Ophthalmology">Royal Eye and Ear - Ophthalmology</option>
    <option value="Temple Street - Children">Temple Street - Children</option>
</select>

Answer 2

For the date_field move the class inside the brackets:

date_field(:patient, :appointment, class: 'form-control')

And for the select it is not required to give HTML select tag explicitly. Just doing like this will do the job:

<%= form.select :consultationType, ["N/A", "Inhouse-Clinic", "St.James Hospital - X-Ray", "Matter Private Dublin - Cardiology", "Matter Private Cork - Neurology", "Royal Eye and Ear - Ophthalmology", "Temple Street - Children"], {}, { class: 'form-control' }  %>