手寫一個簡單的 input date

先上效果圖

html格式

<div>
	<input type="month">
</div>

css 部分

input[type="month"]::-webkit-datetime-edit{
  line-height: 32px;
}
input[type="month"]::-webkit-clear-button{
  display: none;
}
input[type="month"]::-webkit-calendar-picker-indicator{
  display: none;
}
input[type="month"]::-webkit-inner-spin-button{
  display: none;
}
input[type="month"]::-webkit-clear-button{
  display: none;
}
input{
  outline: none;
}

.date-mode{
  position: absolute;
  top: 32px;
  left: 0;
  font-size: 12px;
  width: 210px;
  border: 1px solid #999;
  background: #fff;
  z-index: 10;
  display: none;
}
.date-tit{
  display: flex;
  justify-content: space-around;
  height: 30px;
  line-height: 30px;
}
.date-tit span{
  cursor: pointer;
}
.date-box{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.date-box >div{
  width: 28px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: default;
}
.date-box >div:hover{
  color: #fff;
  background: #59B3EF;
}
.date-box >div.hei{
  color: #999;
}
.date-box >div.active{
  background: #198afa;
  color: #fff;
}

js 部分

let date = new Date();
let year = date.getFullYear();

$('input[type=month]').parent().css({'position':'relative','display':'inline-block'});
$('input[type=month]').before('<div class="date-mode"></div>')
// console.log(_time)
function getdate(y,m,d){
  let pdate = new Date(y,m-1,0);
  let ndate = new Date(y,m,0)
  let p = pdate.getDate();    // 上個月有多少天
  let n = ndate.getDate();    // 當前月有多少天

  let sdate = new Date(y+'/'+m+'/01');
  let tdate = new Date(y+'/'+m+'/'+n);
  let s = sdate.getDay();    // 當前月第一天是星期幾
  let t = tdate.getDay();    // 當前月最後一天是星期幾
  let e = '';
  let td = '';
  for(let i=(s-1); i>=0; i--){
    let dv = `<div class="hei"  onclick="changd(-1,this)">${p-i}</div>`
    td += dv;
  }
  for(let i=1; i<=n; i++){
    let dv = `<div class="${i == d?'active':''}" onclick="changd(0,this)">${i}</div>`
    td += dv;
  }
  for(let i=1; i<=(6-t); i++){
    let dv = `<div class="hei" onclick="changd(1,this)">${i}</div>`
    td += dv;
  }
  // console.log(p,n,s,t)
  let div = `
      <div class="date-tit"><span onclick="preyear()"><<</span><span onclick="premonth()"><</span><span class="year">${y}年</span><span class="month">${('0'+m).slice(-2)}月</span><span onclick="nextmonth()">></span><span onclick="nextyear()">>></span></div>
      <div class="date-box">
        ${td}
      </div>
  `
  $('input[type=month]').prev().html(div)
}
let yy = year;  // 顯示的年份
let mm = date.getMonth()+1;  // 顯示的月份
let dd = date.getDate();  // 顯示的日


$('input[type=month]').click(function(){
  $('.date-mode').css('display','none');
  let das = $(this).val().split('-');
  yy = das[0];
  mm = das[1];
  getdate(yy,mm,dd);
  $(this).prev().css('display','block');
})

function changd(e,a){
  dd = $(a).text();
  $(a).parents('.date-mode').next().val(yy+'-'+('0'+(parseInt(mm)+e)).slice(-2))
  $(a).parents('.date-mode').css('display','none');
}
function preyear(){
  yy--;
  getdate(yy,mm,dd);
}
function nextyear(){
  yy++;
  getdate(yy,mm,dd);
}
function premonth(){
  mm--;
  if(mm<=0){
    yy--;
    mm=12;
  }
  getdate(yy,mm,dd);
}
function nextmonth(){
  mm++;
  if(mm>12){
    yy++;
    mm=1;
  }
  getdate(yy,mm,dd);
}