jquery日期选择

最新推荐文章于 2024-09-06 11:23:02 发布

luguz

最新推荐文章于 2024-09-06 11:23:02 发布

阅读量1.1k

点赞数 1

分类专栏： web前端文章标签： javascript html5 css3 jquery

本文链接：https://blog.csdn.net/persist_z/article/details/104545706

版权

web前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

最近在写代码的时候需要用到日期选择，由于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是能够监听到的，但是这基本上不影响使用，如果各位知道是怎么回事，希望知道原因的前辈能指点一下。