Solspace User: Birthday select dropdown - Registration form

Question

How do you display birthday as select dropdowns for day, month and year.

I tried this but seems like it is of no avail

    <fieldset>
    <div><label for="birthday">Date of Birth:</label></div>
    <div class="col_one_third">
        <select class="form-control" id="day" name="bday_d">
            {select_bday_d}
                <option value="{value}" {selected}>{value}</option>
            {/select_bday_d}
        </select>
    </div>

    <div class="col_one_third">
        <select class="form-control" id="month" name="bday_m">
            {select_bday_m}
                <option value="{value}" {selected}>{value}</option>
            {/select_bday_m}
        </select>
    </div>

    <div class="col_one_third col_last">
        <select id="year" class="form-control" name="bday_y">
            {select_bday_y}
                <option value="{value}" {selected}>{value}</option>
            {/select_bday_y}
        </select>
    </div>

    </p>
    <div class="clear"></div>
    </fieldset>

Realized that birthday is not a select field. Seems like dropdate is the only way to get it done. Although, birthday needs to be defined as a custom member field and assigned the dropdate fieldtype to get it to work. I am trying to use the native birthday member field. Any thoughts? — Noor M, Nov 17 '15 at 8:03

Solspace · Accepted Answer · 2015-11-18 07:37:12Z

In {exp:user:register} you can use the same birthday fields that you can use in the {exp:user:edit} form. Those fields are bday_m, bday_d and bday_y. You can have a look at the Demo Templates that come with User for an example of those fields when editing your profile in the Demo. You can reuse those fields in a registration form.

Here is the code for those three fields taken from the Demo template for {exp:user:edit}

<p>
                        <label for="bday_d" style="display:block;">Birthday:</label>
                        <select name="bday_m" id="bday_m" class="form-control" style="width:47%;margin-right:10px;display:inline-block;">
                            <option value="">--</option>
                            <option value="01" {if bday_m == "01"}selected="selected"{/if}>January</option>
                            <option value="02" {if bday_m == "02"}selected="selected"{/if}>February</option>
                            <option value="03" {if bday_m == "03"}selected="selected"{/if}>March</option>
                            <option value="04" {if bday_m == "04"}selected="selected"{/if}>April</option>
                            <option value="05" {if bday_m == "05"}selected="selected"{/if}>May</option>
                            <option value="06" {if bday_m == "06"}selected="selected"{/if}>June</option>
                            <option value="07" {if bday_m == "07"}selected="selected"{/if}>July</option>
                            <option value="08" {if bday_m == "08"}selected="selected"{/if}>August</option>
                            <option value="09" {if bday_m == "09"}selected="selected"{/if}>September</option>
                            <option value="10" {if bday_m == "10"}selected="selected"{/if}>October</option>
                            <option value="11" {if bday_m == "11"}selected="selected"{/if}>November</option>
                            <option value="12" {if bday_m == "12"}selected="selected"{/if}>December</option>
                        </select>

                        <select name="bday_d" id="bday_d" class="form-control" style="width:17%;margin-right:10px;display:inline-block;">
                            <option value="">--</option>
                            <option value="1" {if bday_d == "1"}selected="selected"{/if}>1</option>
                            <option value="2" {if bday_d == "2"}selected="selected"{/if}>2</option>
                            <option value="3" {if bday_d == "3"}selected="selected"{/if}>3</option>
                            <option value="4" {if bday_d == "4"}selected="selected"{/if}>4</option>
                            <option value="5" {if bday_d == "5"}selected="selected"{/if}>5</option>
                            <option value="6" {if bday_d == "6"}selected="selected"{/if}>6</option>
                            <option value="7" {if bday_d == "7"}selected="selected"{/if}>7</option>
                            <option value="8" {if bday_d == "8"}selected="selected"{/if}>8</option>
                            <option value="9" {if bday_d == "9"}selected="selected"{/if}>9</option>
                            <option value="10" {if bday_d == "10"}selected="selected"{/if}>10</option>
                            <option value="11" {if bday_d == "11"}selected="selected"{/if}>11</option>
                            <option value="12" {if bday_d == "12"}selected="selected"{/if}>12</option>
                            <option value="13" {if bday_d == "13"}selected="selected"{/if}>13</option>
                            <option value="14" {if bday_d == "14"}selected="selected"{/if}>14</option>
                            <option value="15" {if bday_d == "15"}selected="selected"{/if}>15</option>
                            <option value="16" {if bday_d == "16"}selected="selected"{/if}>16</option>
                            <option value="17" {if bday_d == "17"}selected="selected"{/if}>17</option>
                            <option value="18" {if bday_d == "18"}selected="selected"{/if}>18</option>
                            <option value="19" {if bday_d == "19"}selected="selected"{/if}>19</option>
                            <option value="20" {if bday_d == "20"}selected="selected"{/if}>20</option>
                            <option value="21" {if bday_d == "21"}selected="selected"{/if}>21</option>
                            <option value="22" {if bday_d == "22"}selected="selected"{/if}>22</option>
                            <option value="23" {if bday_d == "23"}selected="selected"{/if}>23</option>
                            <option value="24" {if bday_d == "24"}selected="selected"{/if}>24</option>
                            <option value="25" {if bday_d == "25"}selected="selected"{/if}>25</option>
                            <option value="26" {if bday_d == "26"}selected="selected"{/if}>26</option>
                            <option value="27" {if bday_d == "27"}selected="selected"{/if}>27</option>
                            <option value="28" {if bday_d == "28"}selected="selected"{/if}>28</option>
                            <option value="29" {if bday_d == "29"}selected="selected"{/if}>29</option>
                            <option value="30" {if bday_d == "30"}selected="selected"{/if}>30</option>
                            <option value="31" {if bday_d == "31"}selected="selected"{/if}>31</option>
                        </select>

                        <select name="bday_y" id="bday_y" class="form-control" style="width:27%;display:inline-block;">
                            <option value="">--</option>
                            <option value="2006" {if bday_y == "2006"}selected="selected"{/if}>2006</option>
                            <option value="2005" {if bday_y == "2005"}selected="selected"{/if}>2005</option>
                            <option value="2004" {if bday_y == "2004"}selected="selected"{/if}>2004</option>
                            <option value="2003" {if bday_y == "2003"}selected="selected"{/if}>2003</option>
                            <option value="2002" {if bday_y == "2002"}selected="selected"{/if}>2002</option>
                            <option value="2001" {if bday_y == "2001"}selected="selected"{/if}>2001</option>
                            <option value="2000" {if bday_y == "2000"}selected="selected"{/if}>2000</option>
                            <option value="1999" {if bday_y == "1999"}selected="selected"{/if}>1999</option>
                            <option value="1998" {if bday_y == "1998"}selected="selected"{/if}>1998</option>
                            <option value="1997" {if bday_y == "1997"}selected="selected"{/if}>1997</option>
                            <option value="1996" {if bday_y == "1996"}selected="selected"{/if}>1996</option>
                            <option value="1995" {if bday_y == "1995"}selected="selected"{/if}>1995</option>
                            <option value="1994" {if bday_y == "1994"}selected="selected"{/if}>1994</option>
                            <option value="1993" {if bday_y == "1993"}selected="selected"{/if}>1993</option>
                            <option value="1992" {if bday_y == "1992"}selected="selected"{/if}>1992</option>
                            <option value="1991" {if bday_y == "1991"}selected="selected"{/if}>1991</option>
                            <option value="1990" {if bday_y == "1990"}selected="selected"{/if}>1990</option>
                            <option value="1989" {if bday_y == "1989"}selected="selected"{/if}>1989</option>
                            <option value="1988" {if bday_y == "1988"}selected="selected"{/if}>1988</option>
                            <option value="1987" {if bday_y == "1987"}selected="selected"{/if}>1987</option>
                            <option value="1986" {if bday_y == "1986"}selected="selected"{/if}>1986</option>
                            <option value="1985" {if bday_y == "1985"}selected="selected"{/if}>1985</option>
                            <option value="1984" {if bday_y == "1984"}selected="selected"{/if}>1984</option>
                            <option value="1983" {if bday_y == "1983"}selected="selected"{/if}>1983</option>
                            <option value="1982" {if bday_y == "1982"}selected="selected"{/if}>1982</option>
                            <option value="1981" {if bday_y == "1981"}selected="selected"{/if}>1981</option>
                            <option value="1980" {if bday_y == "1980"}selected="selected"{/if}>1980</option>
                            <option value="1979" {if bday_y == "1979"}selected="selected"{/if}>1979</option>
                            <option value="1978" {if bday_y == "1978"}selected="selected"{/if}>1978</option>
                            <option value="1977" {if bday_y == "1977"}selected="selected"{/if}>1977</option>
                            <option value="1976" {if bday_y == "1976"}selected="selected"{/if}>1976</option>
                            <option value="1975" {if bday_y == "1975"}selected="selected"{/if}>1975</option>
                            <option value="1974" {if bday_y == "1974"}selected="selected"{/if}>1974</option>
                            <option value="1973" {if bday_y == "1973"}selected="selected"{/if}>1973</option>
                            <option value="1972" {if bday_y == "1972"}selected="selected"{/if}>1972</option>
                            <option value="1971" {if bday_y == "1971"}selected="selected"{/if}>1971</option>
                            <option value="1970" {if bday_y == "1970"}selected="selected"{/if}>1970</option>
                            <option value="1969" {if bday_y == "1969"}selected="selected"{/if}>1969</option>
                            <option value="1968" {if bday_y == "1968"}selected="selected"{/if}>1968</option>
                            <option value="1967" {if bday_y == "1967"}selected="selected"{/if}>1967</option>
                            <option value="1966" {if bday_y == "1966"}selected="selected"{/if}>1966</option>
                            <option value="1965" {if bday_y == "1965"}selected="selected"{/if}>1965</option>
                            <option value="1964" {if bday_y == "1964"}selected="selected"{/if}>1964</option>
                            <option value="1963" {if bday_y == "1963"}selected="selected"{/if}>1963</option>
                            <option value="1962" {if bday_y == "1962"}selected="selected"{/if}>1962</option>
                            <option value="1961" {if bday_y == "1961"}selected="selected"{/if}>1961</option>
                            <option value="1960" {if bday_y == "1960"}selected="selected"{/if}>1960</option>
                            <option value="1959" {if bday_y == "1959"}selected="selected"{/if}>1959</option>
                            <option value="1958" {if bday_y == "1958"}selected="selected"{/if}>1958</option>
                            <option value="1957" {if bday_y == "1957"}selected="selected"{/if}>1957</option>
                            <option value="1956" {if bday_y == "1956"}selected="selected"{/if}>1956</option>
                            <option value="1955" {if bday_y == "1955"}selected="selected"{/if}>1955</option>
                            <option value="1954" {if bday_y == "1954"}selected="selected"{/if}>1954</option>
                            <option value="1953" {if bday_y == "1953"}selected="selected"{/if}>1953</option>
                            <option value="1952" {if bday_y == "1952"}selected="selected"{/if}>1952</option>
                            <option value="1951" {if bday_y == "1951"}selected="selected"{/if}>1951</option>
                            <option value="1950" {if bday_y == "1950"}selected="selected"{/if}>1950</option>
                            <option value="1949" {if bday_y == "1949"}selected="selected"{/if}>1949</option>
                            <option value="1948" {if bday_y == "1948"}selected="selected"{/if}>1948</option>
                            <option value="1947" {if bday_y == "1947"}selected="selected"{/if}>1947</option>
                            <option value="1946" {if bday_y == "1946"}selected="selected"{/if}>1946</option>
                            <option value="1945" {if bday_y == "1945"}selected="selected"{/if}>1945</option>
                            <option value="1944" {if bday_y == "1944"}selected="selected"{/if}>1944</option>
                            <option value="1943" {if bday_y == "1943"}selected="selected"{/if}>1943</option>
                            <option value="1942" {if bday_y == "1942"}selected="selected"{/if}>1942</option>
                            <option value="1941" {if bday_y == "1941"}selected="selected"{/if}>1941</option>
                            <option value="1940" {if bday_y == "1940"}selected="selected"{/if}>1940</option>
                            <option value="1939" {if bday_y == "1939"}selected="selected"{/if}>1939</option>
                            <option value="1938" {if bday_y == "1938"}selected="selected"{/if}>1938</option>
                            <option value="1937" {if bday_y == "1937"}selected="selected"{/if}>1937</option>
                            <option value="1936" {if bday_y == "1936"}selected="selected"{/if}>1936</option>
                            <option value="1935" {if bday_y == "1935"}selected="selected"{/if}>1935</option>
                            <option value="1934" {if bday_y == "1934"}selected="selected"{/if}>1934</option>
                            <option value="1933" {if bday_y == "1933"}selected="selected"{/if}>1933</option>
                            <option value="1932" {if bday_y == "1932"}selected="selected"{/if}>1932</option>
                            <option value="1931" {if bday_y == "1931"}selected="selected"{/if}>1931</option>
                            <option value="1930" {if bday_y == "1930"}selected="selected"{/if}>1930</option>
                            <option value="1929" {if bday_y == "1929"}selected="selected"{/if}>1929</option>
                            <option value="1928" {if bday_y == "1928"}selected="selected"{/if}>1928</option>
                            <option value="1927" {if bday_y == "1927"}selected="selected"{/if}>1927</option>
                            <option value="1926" {if bday_y == "1926"}selected="selected"{/if}>1926</option>
                            <option value="1925" {if bday_y == "1925"}selected="selected"{/if}>1925</option>
                            <option value="1924" {if bday_y == "1924"}selected="selected"{/if}>1924</option>
                            <option value="1923" {if bday_y == "1923"}selected="selected"{/if}>1923</option>
                            <option value="1922" {if bday_y == "1922"}selected="selected"{/if}>1922</option>
                            <option value="1921" {if bday_y == "1921"}selected="selected"{/if}>1921</option>
                            <option value="1920" {if bday_y == "1920"}selected="selected"{/if}>1920</option>
                            <option value="1919" {if bday_y == "1919"}selected="selected"{/if}>1919</option>
                            <option value="1918" {if bday_y == "1918"}selected="selected"{/if}>1918</option>
                            <option value="1917" {if bday_y == "1917"}selected="selected"{/if}>1917</option>
                            <option value="1916" {if bday_y == "1916"}selected="selected"{/if}>1916</option>
                            <option value="1915" {if bday_y == "1915"}selected="selected"{/if}>1915</option>
                            <option value="1914" {if bday_y == "1914"}selected="selected"{/if}>1914</option>
                            <option value="1913" {if bday_y == "1913"}selected="selected"{/if}>1913</option>
                            <option value="1912" {if bday_y == "1912"}selected="selected"{/if}>1912</option>
                            <option value="1911" {if bday_y == "1911"}selected="selected"{/if}>1911</option>
                            <option value="1910" {if bday_y == "1910"}selected="selected"{/if}>1910</option>
                            <option value="1909" {if bday_y == "1909"}selected="selected"{/if}>1909</option>
                            <option value="1908" {if bday_y == "1908"}selected="selected"{/if}>1908</option>
                            <option value="1907" {if bday_y == "1907"}selected="selected"{/if}>1907</option>
                            <option value="1906" {if bday_y == "1906"}selected="selected"{/if}>1906</option>
                            <option value="1905" {if bday_y == "1905"}selected="selected"{/if}>1905</option>
                        </select>
                    </p>

Stack Exchange Network

current community

your communities

more stack exchange communities

Solspace User: Birthday select dropdown - Registration form

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged members solspace-user registration drop-down or ask your own question.

Hot Network Questions

Solspace User: Birthday select dropdown - Registration form

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged members solspace-user registration drop-down or ask your own question.

Related

Hot Network Questions