Skip to content

Instantly share code, notes, and snippets.

@timpaul

timpaul/date-of-birth.html

Created August 15, 2012 14:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save timpaul/3360753 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save timpaul/3360753 to your computer and use it in GitHub Desktop.
Download ZIP
HTML markup for a date-of-birth picker
Raw
date-of-birth.html
<div class="control-group">
<label for="dob-day" class="control-label">Date of birth</label>
<div class="controls">
<select name="dob-day" id="dob-day">
<option value="">Day</option>
<option value="">---</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="dob-month" id="dob-month">
<option value="">Month</option>
<option value="">-----</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select name="dob-year" id="dob-year">
<option value="">Year</option>
<option value="">----</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
</div>
</div>
@davidverhage
Copy link
Copy Markdown

davidverhage commented Sep 14, 2015

Totally enjoy this gist. Thanks for putting it out here. Saved me 10 minutes of jQuery headacheing.

@akashjobanputra
Copy link
Copy Markdown

akashjobanputra commented Sep 28, 2015

Thanks for this. Time saved.

@onbrdsolutions
Copy link
Copy Markdown

onbrdsolutions commented Apr 27, 2016

Thanks a lot, time saved.

@alexsasharegan
Copy link
Copy Markdown

alexsasharegan commented Jun 20, 2016

This is great! If anyone is running PHP on the backend, you can embed a little block to always render out the last x-amount of years like so:

<?php
    $date = (int) date('Y');
    $numYears = 100;
    for ($i=$date; $i >= $date - $numYears; $i--) {
        echo "<option value=\"$i\">$i</option>";
    }
?>

@Mahalakshmi231097
Copy link
Copy Markdown

Mahalakshmi231097 commented May 14, 2017

Thanks for the code

@nishankakadiya
Copy link
Copy Markdown

nishankakadiya commented May 16, 2017 

                                                      <select>
                                                                    <option>Year</option>
					 			<option value="2017">2017</option>
					 			<option value="2016">2016</option>
					 			<option value="2015">2015</option>
					 			<option value="2014">2014</option>
					 			<option value="2013">2013</option>
					 			<option value="2012">2012</option>
					 			<option value="2011">2011</option>
					 			<option value="2010">2010</option>
					 			<option value="2009">2009</option>
					 			<option value="2008">2008</option>
					 			<option value="2007">2007</option>
								<option value="2006">2006</option>
								<option value="2005">2005</option>
								<option value="2004">2004</option>
								<option value="2003">2003</option>
								<option value="2002">2002</option>
								<option value="2001">2001</option>
								<option value="2000">2000</option>
								<option value="1999">1999</option>
								<option value="1998">1998</option>
								<option value="1997">1997</option>
								<option value="1996">1996</option>
								<option value="1995">1995</option>
								<option value="1994">1994</option>
								<option value="1993">1993</option>
								<option value="1992">1992</option>
								<option value="1991">1991</option>
								<option value="1990">1990</option>
								<option value="1989">1989</option>
								<option value="1988">1988</option>
								<option value="1987">1987</option>
								<option value="1986">1986</option>
								<option value="1985">1985</option>
								<option value="1984">1984</option>
								<option value="1983">1983</option>
								<option value="1982">1982</option>
								<option value="1981">1981</option>
								<option value="1980">1980</option>
								<option value="1979">1979</option>
								<option value="1978">1978</option>
								<option value="1977">1977</option>
								<option value="1976">1976</option>
								<option value="1975">1975</option>
								<option value="1974">1974</option>
								<option value="1973">1973</option>
								<option value="1972">1972</option>
								<option value="1971">1971</option>
								<option value="1970">1970</option>
								<option value="1969">1969</option>
								<option value="1968">1968</option>
								<option value="1967">1967</option>
								<option value="1966">1966</option>
								<option value="1965">1965</option>
								<option value="1964">1964</option>
								<option value="1963">1963</option>
								<option value="1962">1962</option>
								<option value="1961">1961</option>
								<option value="1960">1960</option>
								<option value="1959">1959</option>
								<option value="1958">1958</option>
								<option value="1957">1957</option>
								<option value="1956">1956</option>
								<option value="1955">1955</option>
								<option value="1954">1954</option>
								<option value="1953">1953</option>
								<option value="1952">1952</option>
								<option value="1951">1951</option>
								<option value="1950">1950</option>
								<option value="1949">1949</option>
								<option value="1948">1948</option>
								<option value="1947">1947</option>
								<option value="1946">1946</option>
								<option value="1945">1945</option>
								<option value="1944">1944</option>
								<option value="1943">1943</option>
								<option value="1942">1942</option>
								<option value="1941">1941</option>
								<option value="1940">1940</option>
								<option value="1939">1939</option>
								<option value="1938">1938</option>
								<option value="1937">1937</option>
								<option value="1936">1936</option>
								<option value="1935">1935</option>
								<option value="1934">1934</option>
								<option value="1933">1933</option>
								<option value="1932">1932</option>
								<option value="1931">1931</option>
								<option value="1930">1930</option>
								<option value="1929">1929</option>
								<option value="1928">1928</option>
								<option value="1927">1927</option>
								<option value="1926">1926</option>
								<option value="1925">1925</option>
								<option value="1924">1924</option>
								<option value="1923">1923</option>
								<option value="1922">1922</option>
								<option value="1921">1921</option>
								<option value="1920">1920</option>
								<option value="1919">1919</option>
								<option value="1918">1918</option>
								<option value="1917">1917</option>
								<option value="1916">1916</option>
								<option value="1915">1915</option>
								<option value="1914">1914</option>
								<option value="1913">1913</option>
								<option value="1912">1912</option>
								<option value="1911">1911</option>
								<option value="1910">1910</option>
								<option value="1909">1909</option>
								<option value="1908">1908</option>
								<option value="1907">1907</option>
								<option value="1906">1906</option>
								<option value="1905">1905</option>
								<option value="1904">1904</option>
								<option value="1903">1903</option>
								<option value="1902">1902</option>
								<option value="1901">1901</option>
								<option value="1900">1900</option>
                                                     </select>

@M-Doja
Copy link
Copy Markdown

M-Doja commented Feb 19, 2018

Thanks a tons. Saved me a lot of time

@mampromise143
Copy link
Copy Markdown

mampromise143 commented Jun 28, 2018

Hi. Can anyone give me a dropdown date of birth and can you please add a save code? I am a new student so i'am still studying these codes. Thanks.

@ahmaher94
Copy link
Copy Markdown

ahmaher94 commented Sep 20, 2018

Thanks, time saved.

@palentir
Copy link
Copy Markdown

palentir commented May 11, 2019 •
edited
Loading

This is great! If anyone is running PHP on the backend, you can embed a little block to always render out the last x-amount of years like so:

<?php
    $date = (int) date('Y');
    $numYears = 100;
    for ($i=$date; $i >= $date - $numYears; $i--) {
        echo "<option value=\"$i\">$i</option>";
    }
?>

Nice man, reall good addition. What about for the Days too though?
<option selected disabled>Day</option>
<?php
for ($i=1; $i <= 31; $i++) {
echo "<option value=\"$i\">$i</option>";
}
?>

@muaazasif
Copy link
Copy Markdown

muaazasif commented Apr 15, 2020

wow amazing

@Rachamv
Copy link
Copy Markdown

Rachamv commented Sep 13, 2021

This is really good

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment