Minimal Dropdown Date Picker In Vanilla JavaScript

Preview:

Description:

A minimal vanilla JavaScript date picker library which enables the user to select a date from separate “day”, “month” and “year” dropdowns. Perfect for birthday (DOB) picker.

How to use it:

Create the “day”, “month”, and “year” dropdowns.

<select class="bear-dates"></select>
<select class="bear-months"></select>
<select class="bear-years"></select>

Download and put the JavaScript file “calendar.js” at he bottom of the web page.

<script src="calender.js"></script>

Initialize the date picker and done.

dates('option');
months('option');
//You can change the startYear(1990) and endYear(2017)
years('option', 2000, 2017);

Apply your own styles to the dropdowns.

select {
  width: 30%;
  margin: 0;
  font-size: 100%;
  padding: 5px 10px 5px 10px;
  font-family: Segoe UI, Helvetica, sans-serif;
  border: 0;
  border: 1px solid #D0D0D0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;    
}