Month Selector CSS / Javascript

Just a quick component

by Rodrigo Portillo

HTML

<!--input-date-->
<input type="text" class="input-month-sel"/>

<!--months-sel-->
<div class="month-sel-modal">
  <div class="month-sel">
    <div class="month-sel-years">
      <button class="month-sel-left">
        <
      </button>
      <div class="month-sel-year">
      </div>
      <button class="month-sel-right">
        >
      </button>
    </div>
    <div class="month-sel-months">
      <div class="month" rel="01">
        Jan
      </div>
      <div class="month" rel="02">
        Fev
      </div>
      <div class="month" rel="03">
        Mar
      </div>
      <div class="month" rel="04">
        Abr
      </div>
      <div class="month" rel="05">
        Mai
      </div>
      <div class="month" rel="06">
        Jun
      </div>
      <div class="month" rel="07">
        Jul
      </div>
      <div class="month" rel="08">
        Ago
      </div>
      <div class="month" rel="09">
        Set
      </div>
      <div class="month" rel="10">
        Out
      </div>
      <div class="month" rel="11">
        Nov
      </div>
      <div class="month" rel="12">
        Dez
      </div>
    </div>
  </div>
</div>

CSS

body{
  font-family: sans-serif;
}

.month-sel-modal{
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0,0,0,.5);
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  top:0;
  
  opacity: 0;
  pointer-events:none;
  
  -webkit-transition: opacity .3s;
  -moz-transition: opacity .3s;
  -o-transition: opacity .3s;
  transition: opacity .3s;
}
.month-sel-modal.show{
  opacity: 1;
  pointer-events: all;
}

.month-sel{
  background-color: white;
  box-shadow: 0 10px 80px rgba(0,0,0,.3);
  max-width: 250px;
  border-radius:3px;
  margin: 0 auto;
  overflow: hidden;
}

.month-sel .month-sel-years{
  display: flex;
  justify-content: space-between;
  background-color: #9e154a;
  color: white;
  padding: 10px 15px;
  font-size: 32px;
}

.month-sel .month-sel-years button{
  -webkit-appearance: none;
  border: none;
  color: white;
  background-color: rgba(0,0,0,.3);
  cursor: pointer;
  font-size: 24px;
  border-radius: 3px;
}

.month-sel .month-sel-years button:hover,
.month-sel .month-sel-years button:focus{
  color: yellow;
  outline: none;
}

.month-sel .month-sel-months{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px;
  box-sizing: border-box;
  cursor: pointer;
}

.month-sel .month-sel-months .month{
  width: 22%;
  padding: 8px 5px;
  text-align: center;
  margin: 1%;
  border-radius: 2px;
  color: #444;
}
.month-sel .month-sel-months .month.curr{
  color: #9e154a;
}

.month-sel .month-sel-months .month:hover{
  background-color: #dedede;
  cursor: pointer;
  color: black;
}

JavaScript

document.querySelectorAll(".input-month-sel").forEach((item)=>{
	item.addEventListener("click", function(){showMonthSel(event)});
});

function showMonthSel(event){
	var month, year;
  year = (new Date()).getFullYear();
  var el = event.target;
	var modal = document.querySelector(".month-sel-modal");
	modal.classList.add("show");
  modal.addEventListener("click", function(event){
  	event.target.classList.remove("show");
  });
  
  modal.querySelector(".month-sel-year").innerHTML = year;
  
  //setYear
 	modal.querySelector(".month-sel-left").addEventListener('click',function(){
  	year--;
    modal.querySelector(".month-sel-year").innerHTML = year;
  });
  modal.querySelector(".month-sel-right").addEventListener('click',function(){
  	year++;
    modal.querySelector(".month-sel-year").innerHTML = year;
  });
  
  //getData
  modal.querySelectorAll(".month-sel-months .month").forEach((item)=>{
  	item.addEventListener("click", function(event){
    	year = modal.querySelector(".month-sel-year").innerHTML;
    	month = event.target.getAttribute('rel');
      el.value = month.trim() + "/" + year.trim();
      
      modal.classList.remove("show");//remove modal
    });
  });
}