<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="109716" data-post-id="109716">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="peerreynders" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/peerreynders/120/5826_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  peerreynders
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You provided this as your reference case:</p>
<aside class="quote no-group" data-username="ion" data-post="9" data-topic="18710">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ion/48/2611_2.png" class="avatar"> ion:</div>
<blockquote>
<p>&lt;%= date_select f, :date, default: {2018, 12, 25} %&gt;</p>
</blockquote>
</aside>
<p>My purpose was to attempt to generate equivalent HTML output with a builder function.</p>
<p>So if we start out with (in <code>iex</code>):</p>
<pre><code class="lang-plaintext">import Phoenix.HTML
import Phoenix.HTML.Form

default_date = {2020, 12, 25}
content =
  ~E"""
    &lt;%= date_select :user, :date, default: default_date %&gt;
  """

safe_to_string(content)
</code></pre>
<p>We’ll get this output:</p>
<pre><code class="lang-plaintext">&lt;select id=\"user_date_year\" name=\"user[date][year]\"&gt;
  &lt;option value=\"2014\"&gt;2014&lt;/option&gt;
  &lt;option value=\"2015\"&gt;2015&lt;/option&gt;
  &lt;option value=\"2016\"&gt;2016&lt;/option&gt;
  &lt;option value=\"2017\"&gt;2017&lt;/option&gt;
  &lt;option value=\"2018\"&gt;2018&lt;/option&gt;
  &lt;option value=\"2019\"&gt;2019&lt;/option&gt;
  &lt;option value=\"2020\" selected&gt;2020&lt;/option&gt;
  &lt;option value=\"2021\"&gt;2021&lt;/option&gt;
  &lt;option value=\"2022\"&gt;2022&lt;/option&gt;
  &lt;option value=\"2023\"&gt;2023&lt;/option&gt;
  &lt;option value=\"2024\"&gt;2024&lt;/option&gt;
&lt;/select&gt; /
&lt;select id=\"user_date_month\" name=\"user[date][month]\"&gt;
  &lt;option value=\"1\"&gt;January&lt;/option&gt;
  &lt;option value=\"2\"&gt;February&lt;/option&gt;
  &lt;option value=\"3\"&gt;March&lt;/option&gt;
  &lt;option value=\"4\"&gt;April&lt;/option&gt;
  &lt;option value=\"5\"&gt;May&lt;/option&gt;
  &lt;option value=\"6\"&gt;June&lt;/option&gt;
  &lt;option value=\"7\"&gt;July&lt;/option&gt;
  &lt;option value=\"8\"&gt;August&lt;/option&gt;
  &lt;option value=\"9\"&gt;September&lt;/option&gt;
  &lt;option value=\"10\"&gt;October&lt;/option&gt;
  &lt;option value=\"11\"&gt;November&lt;/option&gt;
  &lt;option value=\"12\" selected&gt;December&lt;/option&gt;
&lt;/select&gt; /
&lt;select id=\"user_date_day\" name=\"user[date][day]\"&gt;
  &lt;option value=\"1\"&gt;01&lt;/option&gt;
  &lt;option value=\"2\"&gt;02&lt;/option&gt;
  &lt;option value=\"3\"&gt;03&lt;/option&gt;
  &lt;option value=\"4\"&gt;04&lt;/option&gt;
  &lt;option value=\"5\"&gt;05&lt;/option&gt;
  &lt;option value=\"6\"&gt;06&lt;/option&gt;
  &lt;option value=\"7\"&gt;07&lt;/option&gt;
  &lt;option value=\"8\"&gt;08&lt;/option&gt;
  &lt;option value=\"9\"&gt;09&lt;/option&gt;
  &lt;option value=\"10\"&gt;10&lt;/option&gt;
  &lt;option value=\"11\"&gt;11&lt;/option&gt;
  &lt;option value=\"12\"&gt;12&lt;/option&gt;
  &lt;option value=\"13\"&gt;13&lt;/option&gt;
  &lt;option value=\"14\"&gt;14&lt;/option&gt;
  &lt;option value=\"15\"&gt;15&lt;/option&gt;
  &lt;option value=\"16\"&gt;16&lt;/option&gt;
  &lt;option value=\"17\"&gt;17&lt;/option&gt;
  &lt;option value=\"18\"&gt;18&lt;/option&gt;
  &lt;option value=\"19\"&gt;19&lt;/option&gt;
  &lt;option value=\"20\"&gt;20&lt;/option&gt;
  &lt;option value=\"21\"&gt;21&lt;/option&gt;
  &lt;option value=\"22\"&gt;22&lt;/option&gt;
  &lt;option value=\"23\"&gt;23&lt;/option&gt;
  &lt;option value=\"24\"&gt;24&lt;/option&gt;
  &lt;option value=\"25\" selected&gt;25&lt;/option&gt;
  &lt;option value=\"26\"&gt;26&lt;/option&gt;
  &lt;option value=\"27\"&gt;27&lt;/option&gt;
  &lt;option value=\"28\"&gt;28&lt;/option&gt;
  &lt;option value=\"29\"&gt;29&lt;/option&gt;
  &lt;option value=\"30\"&gt;30&lt;/option&gt;
  &lt;option value=\"31\"&gt;31&lt;/option&gt;
&lt;/select&gt;\n"
</code></pre>
<p>Note how the “2020”, “12” and “25” <code>option</code> elements have the <code>selected</code> attribute.</p>
<p>Now a builder version:</p>
<pre><code class="lang-plaintext">import Phoenix.HTML
import Phoenix.HTML.Form

make_builder = fn {year, month, day} -&gt;
  fn b -&gt;
    ~E"""
      &lt;%= b.(:year, [value: year, options: 2014..2024, class: "def"]) %&gt; / &lt;%= b.(:month, [value: month]) %&gt; / &lt;%= b.(:day, [value: day]) %&gt;
    """
  end
end

default_date = {2020, 12, 25}
builder = make_builder.(default_date)
content =
  ~E"""
    &lt;%= date_select :user, :date, builder: builder %&gt;
  """

safe_to_string(content)
</code></pre>
<p>which produces the same output.</p>
<p>EDIT:</p>
<p>Now having seen this code:</p>
<p><a href="https://github.com/phoenixframework/phoenix_html/blob/v2.13.0/lib/phoenix_html/form.ex#L1391-L1395" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/phoenixframework/phoenix_html/blob/v2.13.0/lib/phoenix_html/form.ex#L1391-L1395</a></p>
<p>This works as expected:</p>
<pre><code class="lang-plaintext">import Phoenix.HTML
import Phoenix.HTML.Form

builder =
  fn b -&gt;
    ~E"""
      &lt;%= b.(:year, [options: 2014..2024, class: "def"]) %&gt; / &lt;%= b.(:month, []) %&gt; / &lt;%= b.(:day, []) %&gt;
    """
  end

default_date = {2020, 12, 25}
content =
  ~E"""
    &lt;%= date_select :user, :date, builder: builder, default: default_date %&gt;
  """

safe_to_string(content)
</code></pre>
<aside class="quote no-group" data-username="ion" data-post="9" data-topic="18710">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ion/48/2611_2.png" class="avatar"> ion:</div>
<blockquote>
<p>but the following <code>default</code> option is not working.</p>
</blockquote>
</aside>
<p>If you look at the <code>date_select</code> code it should become obvious that the <code>:default</code> value has already been extracted and is being handed to the <code>builder</code> function as the value to format.</p>
<p>By the time <code>builder</code> runs it’s too late to influence the <code>:default</code> because</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">value = Keyword.get(opts, :value, input_value(form, field) || Keyword.get(opts, :default))

</code></pre>
<p>has already happened.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="109716" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/adding-class-to-date-select-elements/18710/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-109716" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="109716"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="109718" data-post-id="109718">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="ion" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/ion/120/2611_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  ion
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>thank you so much for your detailed response! that explains it perfectly.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="109718" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/adding-class-to-date-select-elements/18710/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-109718" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="109718"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>