Minimal Dropdown Date Picker In Vanilla JavaScript

Category: Date & Time , Javascript | November 27, 2017
Views Total:9,509 views
Official Page:Go to website
Last Update:November 27, 2017


Minimal Dropdown Date Picker In Vanilla JavaScript


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.

//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;    

You Might Be Interested In:

One thought on “Minimal Dropdown Date Picker In Vanilla JavaScript

  1. Andreas

    Hi, how can I activate the script, to load the pages for each selected day?
    Thanks in advance!


Leave a Reply