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); }