jquery日期选择

最近在写代码的时候需要用到日期选择，由于input的date在浏览器当中的样式不一觉得很不美观，于是自己编写了一个

<div class="timeInfo">
<span class="title-text">配送时间</span>
<input type="text" name="ship_date"
id="sele-date" autocomplete="off"
placeholder="请选择配送日期" class="hasDatepicker">
<select name="ship-time" id="ship-time">
<option value="">时间</option>
<option value="09:30-13:00">09:30-13:00</option>
<option value="13:30-15:00">13:30-15:00</option>
<option value="17:30-19:00">17:30-19:00</option>
</select>
<div class="timeChoice">
<div class="topMonthCheck">
<a href="#" id="monthLess">&lt;</a>
<a href="#" id="monthAdd">&gt;</a>
<div class="timeChoiceHeader">2020年02月</div>

</div>
<table class="date_table">
<thead>
<tr>
<th class="t_title">一</th>
<th class="t_title">二</th>
<th class="t_title">三</th>
<th class="t_title">四</th>
<th class="t_title">五</th>
<th class="t_title">六</th>
<th class="t_title">七</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</div>
</div>

body{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
.timeInfo {
width: 100%;
height: 70px;
margin-top: 20px;
line-height: 70px;
position: relative;
}
.timeInfo span.title-text {
display: inline-block;
padding: 0 20px 0 0;
line-height: 18px;
font-size: 22px;
color: #B3B3B3;
}

.timeInfo .hasDatepicker {
height: 50px;
border: 1px solid #E1E1E1;
text-align: center;
font-size: 18px;
width: 190px;
outline: none;
color: rgb(104, 64, 41);
}

.timeInfo #ship-time {
height: 52px;
border: 1px solid #E1E1E1;
font-size: 18px;
width: 150px;
margin-left: 10px;
color: rgb(104, 64, 41);
padding-left: 5px;
}

.timeInfo #ship-time {
/* 清除默认边框 */
/* 清除默认的箭头样式 */
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
/* 右侧添加小箭头的背景图 */
background: url('/Public/image/Home/icon/triangle.png') 230px center no-repeat;
background-size: 14px;
background-position: 85% 60%;
}
/* 时间选择日历表 */
.timeChoice{
width: 260px;
min-height: 250px;
border: 1px solid rgb(207, 207, 207);
position: absolute;
z-index: 20;
left: 111px;
top: 70px;
background: #fff;
border-radius: 5px;
display: none;
box-sizing: border-box;
padding: 0 10px;
line-height: 30px;
}
.timeChoice .topMonthCheck{
width: 100%;
height: 30px;
line-height: 30px;
}
.timeChoice .topMonthCheck>a{
width: 20px;
height: 20px;
line-height: 20px;
margin: 5px;
font-size: 20px;
margin-top: 5px;
}
.timeChoice .topMonthCheck>a#monthAdd{
float: right;
margin-right: 20px;
}
.timeChoice .topMonthCheck>a#monthLess{
float: left;
margin-left: 20px;
}
.timeChoice .topMonthCheck .timeChoiceHeader{
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 0 50px;
font-size: 14px;
text-align: center;
}
.timeChoice .date_table{
width: 100%;
height: 150px;
}
.timeChoice .date_table thead{
height: 21px;
font-size: 14px;
font-weight: normal;
}
.timeChoice .date_table thead th{
font-weight: normal;
cursor: pointer;
box-sizing: border-box;
height: 30px;
}
.timeChoice .date_table tbody{
padding-top: 30px;
}
.timeChoice .date_table tbody tr{
height: 30px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
}
.timeChoice .date_table tbody tr td{
border-radius: 2px;
}
.timeChoice .date_table tbody tr td.active{
background-color: #83a6ff!important;
color: #fff;
}
.timeChoice .date_table tbody tr td.overdue{
/* background-color: #fff!important; */
color: #999;
}
.timeChoice .date_table tbody tr td.nextMonth{
background-color: #fff!important;
color: #999;
}.timeChoice .date_table tbody tr td.lastMonth{
background-color: #fff!important;
color: #999;
}
.timeChoice .date_table tbody tr td:hover{
background: rgb(233, 233, 233);
}

timeSelect ();
// 时间选择
function timeSelect () {
$('#sele-date').on('click', function () {
$('.timeChoice').css('display','block');
$('.timeChoice').on({
"mouseover":function(){
$('.timeChoice').css('display','block');
},
"mouseout":function(){
$('.timeChoice').css('display','none');
}
});

});
calendarShow();
}

// 日历展示
function calendarShow (newMonth,newYear) {
// 日历数据
const date = new Date();
let {year, month, day} = {
year: date.getFullYear(),
month: date.getMonth(),
day: date.getDate()
}
// 默认使用当前年月 传入值时使用传入的年月
month = newMonth == undefined ? month : newMonth;
year = newYear == undefined ? year : newYear;
// month = 1;
// year = 2021;
// 月份日期数组
let monthDays = new Array(31, 28 + leapYear(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
// 获取月份第一天是星期几
// getDay从 Date 对象返回一周中的某一天 (0 ~ 6)。
let monthDayOne =new Date(year, month, 1)
const firstDay = monthDayOne.getDay()
// 获取下一个月第一天是星期几
let nextDayOne =new Date(year, month+1, 1)
const nextFirstDay = nextDayOne.getDay()
// 获取当前月的星期数  （月天数+月星期起始数）/7 不加月星期起始数有一些有六个星期的无法计算出来
let week = Math.ceil((monthDays[month]+(firstDay == 0 ? 7 : firstDay) - 1)/7);
// 绘制table
monthTable(week,firstDay,month,day,monthDays,nextFirstDay,year);
}
// 判断年份是否为闰年 返回二月份天数
function leapYear (year) {
return (year%100==0 ? (year%400==0?1:0) : (year%4==0?1:0));
}
// table渲染
function monthTable (week,firstDay,month,nowDay,monthDays,nextFirstDay,year) {
/*
week 周数
firstDay 月份第一天星期数
month 需要渲染的月
nowDay 今天
monthDays 月份数组
nextFirstDay 下一个月第一天星期几
year 渲染的年数
*/
console.log(1);
const date = new Date();
let  {nowMonth,nowYear } =  {
nowMonth: date.getMonth(),
nowYear: date.getFullYear()
}
let NowMonthDay = monthDays[month];
let lastMonthDay = monthDays[month-1<0 ? 11 : month-1];
let nextMonthDay = monthDays[month+1>11 ? 0 : month+1];
let str = '<tr>'
//上一个月的天数插入表中
// 将星期日的0 转化为7
firstDay = firstDay== 0 ? 7 : firstDay;
nextFirstDay = nextFirstDay == 0 ? 7 : nextFirstDay;
for(let i=firstDay-2; i>=0; i--){
str += `<td class="lastMonth">${lastMonthDay-i}</td>`
}
for (let i=1; i<=NowMonthDay; i++) {
if( (i-1+firstDay)%7 == 1){
// 七天生成一个tr
if((i-1+firstDay) !== 1){
str += '</tr><tr>';
}
}
if(nowYear > year ){
str+= `<td class="overdue">${i}</td>`;
continue;
}else if(nowYear < year ){
str+= `<td>${i}</td>`;
continue;
}else if(nowYear == year && nowMonth > month){
str+= `<td class="overdue">${i}</td>`;
continue;
}else if( i< nowDay){
// 已过天数
if( nowMonth < month ){
str+= `<td>${i}</td>`;
}else{
str+= `<td class="overdue">${i}</td>`;
}
}else if( i == nowDay ){
// 今天
if( nowMonth == month && nowYear == year ){
str+= `<td class="active">${i}</td>`;
}else{
str+= `<td>${i}</td>`;
}
}else{
// 未过天数
if( nowMonth > month){
str+= `<td class="overdue">${i}</td>`;
}else{
str+= `<td>${i}</td>`;
}
}
}
// console.log('ss');
// 插入下个月的
if(nextFirstDay == 1 && week == 4){
str += "</tr><tr>";
}
for(let i=1; i<=8-nextFirstDay; i++){
if(nextFirstDay == 1 && week >4){
break;
}

str += `<td class="nextMonth">${i}</td>`
}
str += '</tr>';
// 六个星期
if(week == 6){
$('.timeChoice').css('height','280px');
}else{
$('.timeChoice').css('height','250px');
}
$('.date_table>tbody').html(str);
timeSpanClick( month,year );

let nowD = `${year} 年 ${month+1} 月`;
$('.timeChoiceHeader').text(nowD);
$('.timeChoiceHeader').attr('data-timeY',year);
$('.timeChoiceHeader').attr('data-timeM',month+1);

}
// 时间time点击
function timeSpanClick ( month,year) {

// 绑定前先卸载事件 否者随着点击的增加 事件触发次数递增
$('.date_table>tbody').off('click');
$('.date_table>tbody').on('click', function (e) {
let event = e || window.event;
if(e.target.className == 'overdue'){
return false;
}else if(e.target.className == 'nextMonth'){
// 点击下一个月的日期跳转到下个月
year =  month+1<12 ? year : year+1;
month = month+1>11? 0 : month+1;
calendarShow (month, year);
}else if(e.target.className == 'lastMonth'){
// 点击上一个月的日期跳转到上个月
year = month-1 < 0 ? year-1 : year;
month =  month-1<0 ? 11 : month-1;
calendarShow (month,year );
}
});
// 月份减

$('#monthLess').off('click');
$('#monthLess').on('click',function () {
year = month-1 < 0 ? year-1 : year;
month =  month-1 < 0 ? 11 : month-1;
calendarShow(month,year);
});
//月份加
$('#monthAdd').off('click');
$('#monthAdd').on('click',function () {
year =  month+1 < 12 ? year : year+1;
month = month+1 > 11 ? 0 : month+1;
calendarShow(month,year);
});

//    点击日期选择
$('.date_table').off('click');
$('.date_table').on('click',function (e) {
let event = e || window.event;
if(event.target.className == '' || event.target.className == 'active'){
let str = event.target.innerHTML;
let strTime = `${year}/${month }/${str}`;
$('#sele-date').prop('value',strTime);
$('.timeChoice').css('display','none');
}
});
}

这是效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200227220303977.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlcnNpc3Rfeg==,size_16,color_FFFFFF,t_70但是其中还有一些小bug，比如有overdue属性的td点击不会触发table的click事件监听，但是额外的监听overdue的click是能够监听到的，但是这基本上不影响使用，如果各位知道是怎么回事，希望知道原因的前辈能指点一下。

• 点赞
• 收藏
• 分享
• 文章举报