Adding class to date_select elements

It should be able to accept a class: "some-class" keyword option.

date_select(form, field, class: "some-class")

If I’m reading the code correctly that class goes through select/4 and then content_tag/3 - so you are restricted to the same class on every select generated.

Are you guys sure? I tried it in several combinations and none of them adds the class to the generated html output (<%= date_select f, :date, class: “select” %>).

builder = fn b ->
  ~e"""
  <div class="flex">
    <%= b.(:day, [class: "xyz"]) %>
    <%= b.(:month, [class: "abc"]) %>
    <%= b.(:year, [class: "def"]) %>
  </div>
  """
end

Thanks @voughtdq, that did the trick!

Note to self - trying stuff out …

some_phoenix_project$ iex -S mix
Erlang/OTP 21 [erts-10.1.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe] [dtrace]

Interactive Elixir (1.7.4) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> import Phoenix.HTML
Phoenix.HTML
iex(2)> import Phoenix.HTML.Form
Phoenix.HTML.Form
iex(3)> builder = fn select_for ->
...(3)>   ~E"""
...(3)>   <div class="flex">
...(3)>     <%= select_for.(:day, [class: "xyz"]) %>
...(3)>     <%= select_for.(:month, [class: "abc"]) %>
...(3)>     <%= select_for.(:year, [class: "def"]) %>
...(3)>   </div>
...(3)>   """
...(3)> end
#Function<6.128620087/1 in :erl_eval.expr/5>
iex(4)> content = ~E"""
...(4)> <%= date_select :user, :born_at,
...(4)>   builder: builder,
...(4)>   year: [options: 2018..2018],
...(4)>   month: [options: 12..12],
...(4)>   day: [options: 13..13]
...(4)> %>
...(4)> """
{:safe,
 [
   [
     "",
     [
       [
         [
           [
             [
               ["" | "<div class=\"flex\">\n  "],
               60,
               "select",
               [
                 [32, "class", 61, 34, "xyz", 34],
                 [32, "id", 61, 34, "user_born_at_day", 34],
                 [32, "name", 61, 34, "user[born_at][day]", 34]
               ],
               62,
               [
                 "",
                 60,
                 "option",
                 [[32, "value", 61, 34, "13", 34]],
                 62,
                 "13",
                 60,
                 47,
                 "option",
                 62
               ],
               60,
               47,
               "select",
               62
             ] |
             "\n  "
           ],
           60,
           "select",
           [
             [32, "class", 61, 34, "abc", 34],
             [32, "id", 61, 34, "user_born_at_month", 34],
             [32, "name", 61, 34, "user[born_at][month]", 34]
           ],
           62,
           [
             "",
             60,
             "option",
             [[32, "value", 61, 34, "12", 34]],
             62,
             "12",
             60,
             47,
             "option",
             62
           ],
           60,
           47,
           "select",
           62
         ] |
         "\n  "
       ],
       60,
       "select",
       [
         [32, "class", 61, 34, "def", 34],
         [32, "id", 61, 34, "user_born_at_year", 34],
         [32, "name", 61, 34, "user[born_at][year]", 34]
       ],
       62,
       [
         "",
         60,
         "option",
         [[32, "value", 61, 34, "2018", 34]],
         62,
         "2018",
         60,
         47,
         "option",
         62
       ],
       60,
       47,
       "select",
       62
     ] |
     "\n</div>\n"
   ] |
   "\n"
 ]}
iex(5)> safe_to_string(content)
"<div class=\"flex\">\n  <select class=\"xyz\" id=\"user_born_at_day\" name=\"user[born_at][day]\"><option value=\"13\">13</option></select>\n  <select class=\"abc\" id=\"user_born_at_month\" name=\"user[born_at][month]\"><option value=\"12\">12</option></select>\n  <select class=\"def\" id=\"user_born_at_year\" name=\"user[born_at][year]\"><option value=\"2018\">2018</option></select>\n</div>\n\n"
iex(6)> 

I am using the builder option instead of the built in helper function (shown below) to control the styling and order of the select fields. However, I’m trying to add a default option for the year to the builder, but have not found a solution.

 <%= date_select f, :date, default: {2018, 12, 25} %>

To get a data range, I’m doing

<%= b.(:year, [options: (NaiveDateTime.utc_now.year - 10)..(NaiveDateTime.utc_now.year + 10), 
               class: "def"]) %>

but the following default option is not working.

<%= b.(:year, [default: NaiveDateTime.utc_now.year, options: (NaiveDateTime.utc_now.year - 10)..(NaiveDateTime.utc_now.year + 10), 
               class: "def"]) %>

How can I add a default year to the builder while also supplying a range (shown above)?

sorry for the post bump, but does anyone know a solution?

An HTML input element has no notion of default - that concept exists only in the context of the helper function. On the input level you have to set the value attribute.

When specified in the HTML, this is the initial value, and from then on it can be altered or retrieved at any time using JavaScript to access HTMLInputElement.value The value attribute is always optional.

For HTMLInputElement.defaultValue:

string : Returns / Sets the default value as originally specified in the HTML that created this object.

So presumably the input element “remembers” the value that was set when it was created as the “default”.

Similiarly:
<select> HTML select element - HTML | MDN
HTMLSelectElement - Web APIs | MDN
<option> HTML option element - HTML | MDN
HTMLOptionElement - Web APIs | MDN

$ iex -S mix
Erlang/OTP 21 [erts-10.1.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [hipe] [dtrace]

Interactive Elixir (1.7.4) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> import Phoenix.HTML
Phoenix.HTML
iex(2)> import Phoenix.HTML.Form
Phoenix.HTML.Form
iex(3)> year_range = fn radius -> (NaiveDateTime.utc_now.year - radius)..(NaiveDateTime.utc_now.year + radius) end
#Function<6.128620087/1 in :erl_eval.expr/5>
iex(4)> year_default = fn -> NaiveDateTime.utc_now.year end
#Function<20.128620087/0 in :erl_eval.expr/5>
iex(5)> builder = fn select_for ->
...(5)>     ~E"""
...(5)>       <%= select_for.(:year, [value: year_default.(), options: year_range.(1), class: "def"]) %>
...(5)>     """
...(5)>   end
#Function<6.128620087/1 in :erl_eval.expr/5>
iex(6)> content = ~E"""
...(6)>   <%= date_select :user, :date,
...(6)>     builder: builder,
...(6)>     year: []
...(6)>   %>
...(6)>   """
{:safe,
 [
   [
     "",
     [
       ["" | "  "],
       60,
       "select",
       [
         [32, "class", 61, 34, "def", 34],
         [32, "id", 61, 34, "user_date_year", 34],
         [32, "name", 61, 34, "user[date][year]", 34]
       ],
       62,
       [
         [
           [
             "",
             60,
             "option",
             [[32, "value", 61, 34, "2017", 34]],
             62,
             "2017",
             60,
             47,
             "option",
             62
           ],
           60,
           "option",
           [[32, "value", 61, 34, "2018", 34], [32, "selected"]],
           62,
           "2018",
           60,
           47,
           "option",
           62
         ],
         60,
         "option",
         [[32, "value", 61, 34, "2019", 34]],
         62,
         "2019",
         60,
         47,
         "option",
         62
       ],
       60,
       47,
       "select",
       62
     ] |
     "\n"
   ] |
   "\n"
 ]}
iex(7)> 

I appreciate the detailed response, thank you. I tried using the value: option key in the builder function for the :year, but it always returns current year, even on an edit action when a value other than current year was set. With your version using the ~E sigil, is it using the default year in value: if one was not already set (i.e., empty list)?

Thank you again.

<%= b.(:year, [value: NaiveDateTime.utc_now.year, options: (NaiveDateTime.utc_now.year - 10)..(NaiveDateTime.utc_now.year + 10), 
               class: "def"]) %>