This JavaScript code snippet helps you to create a simple select tags based date-picker. It comes with three dropdown menus that allow the user to select a month, day, and year. The dropdown-based date picker is helpful for various types of dates, such as selecting a date of birth or a date for an event.
You can integrate this date picker in the signup form or where users enter a specific date. Similarly, you can use this date picker form to filter data or show reports for a certain date range.
How to Create Simple Date-Picker in JavaScript using Select Tags
First of all, create three select tags with a class name “dropdown-select” and wrap each select tag with a div element with a class name “dropdown”. Define a unique id of each select element for month, day, and year selection. The calendar data will be added dynamically through JavaScript inside these dropdowns. So, the following is the complete HTML structure for date picker:
<div class="container">
<div class="dropdown">
<select id="selectMonth" class="dropdown-select">
<option>Month</option>
</select>
</div>
<div class="dropdown">
<select id="selectDay" class="dropdown-select">
<option>Day</option>
</select>
</div>
<div class="dropdown">
<select id="selectYear" class="dropdown-select">
<option>Year</option>
</select>
</div>
</div>
<!-- dropdown-dark is also available -->
Style the date picker using the following CSS styles:
/*
* Copyright (c) 2012-2023 Thibaut Courouble
* http://www.cssflow.com
* Licensed under the MIT License
*
* Sass/SCSS source: https://goo.gl/qEV26
* PSD by Hemn Chawroka: https://goo.gl/nXZHJ
*/
body {
font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif;
color: #404040;
background: #93cedf;
}
.cd__main{
display: block !important;
}
.container {
margin: 80px auto;
width: 100%;
text-align: center;
}
.container > .dropdown {
margin: 0 20px;
vertical-align: top;
}
.dropdown {
display: inline-block;
position: relative;
overflow: hidden;
height: 28px;
width: 150px;
background: #f2f2f2;
border: 1px solid;
border-color: white #f7f7f7 whitesmoke;
border-radius: 3px;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.06));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.06));
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.dropdown:before, .dropdown:after {
content: '';
position: absolute;
z-index: 2;
top: 9px;
right: 10px;
width: 0;
height: 0;
border: 4px dashed;
border-color: #888888 transparent;
pointer-events: none;
}
.dropdown:before {
border-bottom-style: solid;
border-top: none;
}
.dropdown:after {
margin-top: 7px;
border-top-style: solid;
border-bottom: none;
}
.dropdown-select {
position: relative;
width: 130%;
margin: 0;
padding: 6px 8px 6px 10px;
height: 28px;
line-height: 14px;
font-size: 12px;
color: #62717a;
text-shadow: 0 1px white;
background: #f2f2f2; /* Fallback for IE 8 */
background: rgba(0, 0, 0, 0) !important; /* "transparent" doesn't work with Opera */
border: 0;
border-radius: 0;
-webkit-appearance: none;
}
.dropdown-select:focus {
z-index: 3;
width: 100%;
color: #394349;
outline: 2px solid #49aff2;
outline: 2px solid -webkit-focus-ring-color;
outline-offset: -2px;
}
.dropdown-select > option {
margin: 3px;
padding: 6px 8px;
text-shadow: none;
background: #f2f2f2;
border-radius: 3px;
cursor: pointer;
}
/* Fix for IE 8 putting the arrows behind the select element. */
.lt-ie9 .dropdown {
z-index: 1;
}
.lt-ie9 .dropdown-select {
z-index: -1;
}
.lt-ie9 .dropdown-select:focus {
z-index: 3;
}
/* Dirty fix for Firefox adding padding where it shouldn't. */
@-moz-document url-prefix() {
.dropdown-select {
padding-left: 6px;
}
}
.dropdown-dark {
background: #444;
border-color: #111111 #0a0a0a black;
background-image: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
background-image: -moz-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
background-image: -o-linear-gradient(top, transparent, rgba(0, 0, 0, 0.4));
background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.4));
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
}
.dropdown-dark:before {
border-bottom-color: #aaa;
}
.dropdown-dark:after {
border-top-color: #aaa;
}
.dropdown-dark .dropdown-select {
color: #aaa;
text-shadow: 0 1px black;
background: #444; /* Fallback for IE 8 */
}
.dropdown-dark .dropdown-select:focus {
color: #ccc;
}
.dropdown-dark .dropdown-select > option {
background: #444;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
}
Finally, add the following JavaScript date picker function:
var select = document.getElementById("selectMonth");
var options = ["January","February","March","April","May","June",
"July","August","September","October","November","December"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select.appendChild(el);
}
var select1 = document.getElementById("selectDay");
var options = ["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select1.appendChild(el);
}
var select2 = document.getElementById("selectYear");
var options = ["1900", "1901", "1902", "1903", "1904", "1905", "1906", "1907", "1908", "1909", "1910", "1911", "1912", "1913", "1914", "1915", "1916", "1917", "1918", "1919", "1920", "1921", "1922", "1923", "1924", "1925", "1926", "1927", "1928", "1929", "1930", "1931", "1932", "1933", "1934", "1935", "1936", "1937", "1938", "1939", "1940", "1941", "1942", "1943", "1944", "1945", "1946", "1947", "1948", "1949", "1950", "1951", "1952", "1953", "1954", "1955", "1956", "1957", "1958", "1959", "1960", "1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021"];
for(var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select2.appendChild(el);
}
That’s all! hopefully, you have successfully created a simple date-picker in JavaScript using select tags. If you have any questions or suggestions, feel free to comment below.
