Dropdown Month Picker

In this example below you will see how to do a Dropdown Month Picker with some HTML / CSS and Javascript

Users can navigate from one month to the next using arrows or activate dropdown to choose from usage history.

Thumbnail
This awesome code was written by tbloncar, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tbloncar ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Dropdown Month Picker</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="button-container">
  <div class="button-left">
    &#9668;
  </div>
  <div class="button">
    December, 2012
  </div>
  <div class="button-right">
    &#9668;
  </div>
</div>
<div class="year-container">
  <div class="arrow">
  </div>
  <div class="year">
    <div class="year-row">
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>JAN</span>
        <span>2012</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>FEB</span>
        <span>2012</span>
      </div>
      <div class="month negative">
        <div class="month-result">
        </div>
        <span>MAR</span>
        <span>2012</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>APR</span>
        <span>2012</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>MAY</span>
        <span>2012</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>JUN</span>
        <span>2012</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>JUL</span>
        <span>2012</span>
      </div>
      <div class="month negative">
        <div class="month-result">
        </div>
        <span>AUG</span>
        <span>2012</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>SEP</span>
        <span>2012</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>OCT</span>
        <span>2012</span>
      </div>
      <div class="month negative">
        <div class="month-result">
        </div>
        <span>NOV</span>
        <span>2012</span>
      </div>
      <div class="month active positive">
        <div class="month-result">
        </div>
        <span>DEC</span>
        <span>2012</span>
      </div>
      <div class="the-year">
        2012
      </div>
    </div><!-- End year row -->
       <div class="year-row">
      <div class="month nodata">
        <div class="month-result">
        </div>
        <span>JAN</span>
        <span>2011</span>
      </div>
      <div class="month nodata">
        <div class="month-result">
        </div>
        <span>FEB</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>MAR</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>APR</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>MAY</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>JUN</span>
        <span>2011</span>
      </div>
      <div class="month negative">
        <div class="month-result">
        </div>
        <span>JUL</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>AUG</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>SEP</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>OCT</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>NOV</span>
        <span>2011</span>
      </div>
      <div class="month positive">
        <div class="month-result">
        </div>
        <span>DEC</span>
        <span>2011</span>
      </div>
      <div class="the-year">
        2011
      </div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/tbloncar/dropdown-month-picker-pKdnL */
body {
  background: #F6F2EB;
  line-height: 1em;
}
div.button-container {
  zindex: 1;
  background: -webkit-linear-gradient(top, white, #E6E6E6);
  background: -moz-linear-gradient(top, white, #E6E6E6);
  width: 250px;
  height: 35px;
  margin: 0 auto;
  margin-top: 50px;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  -moz-border-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(255, 255, 255, 0.4) inset;
  -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(255, 255, 255, 0.4) inset;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.15), 0px 1px 0px rgba(255, 255, 255, 0.4) inset;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.button-left {
  float: left;
  font-size: 13px;
  padding: 7px;
  height: 100%;
  width: 15%;
  text-align: center;
  vertical-align: center;
  color: rgba(0, 0, 0, 0.7);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.button-right {
  float: left;
  font-size: 13px;
  height: 100%;
  width: 15%;
  padding: 7px;
  text-align: center;
  vertical-align: center;
  color: rgba(0, 0, 0, 0.7);
  transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.button-left:hover,
div.button-right:hover {
  background: rgba(0, 0, 0, 0.03);
  cursor: pointer;
}
div.button {
  float: left;
  width: 70%;
  text-align: center;
  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 9px 0;
  font-size: 13px;
  font-family: Arial, sans-serif;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
  box-shadow: -1px 0px 0px rgba(255, 255, 255, 0.4), -1px 0px 0px rgba(255, 255, 255, 0.4) inset;
}
div.button:hover {
  background: rgba(0, 0, 0, 0.03);
}
div.pressed {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: inset 1px 0 4px rgba(0, 0, 0, 0.07), inset -1px 0 4px rgba(0, 0, 0, 0.07);
}
div.year-container {
  width: 700px;
  margin: 10px auto;
  display: none;
}
div.arrow {
  background: #FFF;
  height: 11px;
  width: 10px;
  border-left: 1px solid rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.5);
  margin: 0 auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  zindex: 2;
  border-bottom-right-radius: 5px;
}
div.year {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: #FFF;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.22);
  width: 100%;
  margin: -6px 0 0 0;
  padding: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
div.year-row {
  height: 40px;
  padding: 5px 0;
  border-bottom: 1px dotted #DDD;
}
div.year-row:first-of-type {
  margin-top: 0;
  padding-top: 0;
}
div.year-row:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
div.month {
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  height: 40px;
  width: 7%;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 2px;
  margin-right: 5px;
  opacity: 0.35;
}
div.month:hover {
  opacity: 1.0;
  cursor: pointer;
}
div.nodata:hover {
  cursor: auto;
  opacity: 0.35;
}
div.positive:hover span:last-of-type,
div.negative:hover span:last-of-type {
  opacity: 1.0;
}
div.positive:hover div.month-result,
div.negative:hover div.month-result {
  width: 100%;
}
div.month span {
  font-size: 9px;
  color: #222;
  display: inline-block;
  font-family: Arial, sans-serif;
  text-indent: 1px;
  width: 100%;
  line-height: 10px;
}
div.month span:last-of-type {
  float: left;
  color: #BBB;
  opacity: 0;
  margin: 0;
}
div.month-result {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-radius: 1px;
  -moz-border-radius: 1px;
  -webkit-border-radius: 1px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -moz-border-bottom-left-radius: 0;
  -moz-border-bottom-right-radius: 0;
  width: 50%;
  height: 5px;
  margin-bottom: -3px;
}
div.positive div.month-result {
  background: #468847;
}
div.negative div.month-result {
  background: #B94A48;
}
div.nodata div.month-result {
  background: #CCC;
}
div.active {
  opacity: 1.0;
}
div.active div.month-result {
  width: 100%;
}
div.the-year {
  background: #EEE;
  float: left;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 7%;
  height: 40px;
  text-align: center;
  padding: 12px 0;
  vertical-align: center;
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #222;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}


/*Downloaded from https://www.codeseek.co/tbloncar/dropdown-month-picker-pKdnL */
$('.button').click(function() {
  $(this).toggleClass('pressed');
  $('div.year-container').toggle();
});
  
$('.month').click(function() {
  $('.month').removeClass('active');
  $(this).addClass('active');
});

Comments