html 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css" media="all"> .demo-box{ width: 100%; position: absolute; left: 0; top: 40px; padding: 10px 20px; font-size: 13px; box-sizing: border-box; background: #fff; color: #333; display: none; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } .calendar-box *{ box-sizing: border-box; } .ht-rili-head{ overflow: hidden; } .ht-rili-datebox{ display: flex; justify-content: space-between; padding: 0 15px; } .ht-rili-date{ flex: 1; text-align: center; } .ht-rili-leftarr{ display: inline-block; width:25px; height: 19px; background: url("../images/left-arr.png") left center no-repeat; background-size: contain; vertical-align: middle; cursor: pointer; } .ht-rili-rightarr{ display: inline-block; width:25px; height: 19px; background: url("../images/right-arr.png") right center no-repeat; background-size: contain; vertical-align: middle; cursor: pointer; } .ht-rili-th{ width: 14.25%; float: left; text-align: center; height: 40px; line-height: 40px; /*background: #E66B14;*/ color: #000; } .ht-rili-td{ width: 14.28%; float: left; text-align: center; padding: 5px 0; cursor: pointer; } .ht-rili-body{ overflow: hidden; } .ht-rili-day{ font-family:Arial; font-size: 14px; font-weight: bold; display: inline-block; width: 100%; } .ht-rili-money{ font-family:Arial; display: inline-block; width: 100%; font-size: 12px; color: #D4585A } .ht-rili-td-disabled{ color: #BFC4CA; } .ht-rili-td-active{ border-radius: 3px; background: #00BDFF; color:#fff; } .calendars{width: 250px; display: inline-block; font-size: 20px; position: relative;} .calendars input[type=text]{width: 100%; font-size: 20px; height: 50px; text-align: left; border-radius: 6px; box-sizing: border-box; padding:0 20px; color: #2b0099; background: #fff ;} </style> </head> <body> <div class="calendars"> <input type="text" name="" placeholder="预约调试日期" readonly="readonly"class="calendar-text" value="" /> <div class="calendar-box1 demo-box"></div> </div> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> (function(){ var calendarDate = {}; var riliHtml = ''; calendarDate.today = new Date(); calendarDate.year = calendarDate.today.getFullYear();//当前年 calendarDate.month = calendarDate.today.getMonth()+1;//当前月 calendarDate.date = calendarDate.today.getDate();//当前日 calendarDate.day = calendarDate.today.getDay();//当前几 function getIndexDay(){ isLeapYear(); getDays(); riliHtml = ''; //本月一号几 calendarDate.monthStart = new Date(calendarDate.year+"/"+calendarDate.month+"/1").getDay(); //上个月所占空格数 console.log(calendarDate) if( calendarDate.monthStart == 0 ){//独占一行 calendarDate.monthStart = 7; } //上月数据 for( var i = calendarDate.monthStart;i>0;i-- ){ var dataDateStr = calendarDate.lastYear + "-" + calendarDate.lastMonth + "-" + (calendarDate.lastDays - i + 1); riliHtml += '<div class="ht-rili-td ht-rili-td-disabled" data-date="'+ dataDateStr +'"><span class="ht-rili-day">'+ (calendarDate.lastDays - i + 1) +'</span></div>' } //本月数据 for( var k = 0;k<calendarDate.days;k++ ){ var flag var dataDateStr = calendarDate.year + "-" + calendarDate.month + "-" + ( k + 1 ); for( var d in calendarDate.opt.data ){ var nowDate = dataDateStr; var dataDate = calendarDate.opt.data[d].date; flag = checkDate(nowDate,dataDate); if( flag ){ riliHtml += '<div class="ht-rili-td ht-rili-onclick" data-date="'+ dataDateStr +'"><span class="ht-rili-day">'+ (k + 1) +'</span></div>'; break; } } if( !flag ){ riliHtml += '<div class="ht-rili-td ht-rili-td-disabled" data-date="'+ dataDateStr +'"><span class="ht-rili-day">'+ (k + 1) +'</span></div>'; } } //下月数据 for( var j = 0;j<(42 - calendarDate.days - calendarDate.monthStart);j++ ){//42-已占用表格数=剩余表格数 var dataDateStr = calendarDate.nextYear + "-" + calendarDate.nextMonth + "-" + (j + 1); riliHtml += '<div class="ht-rili-td ht-rili-td-disabled" data-date="'+ dataDateStr +'"><span class="ht-rili-day">'+ (j + 1) +'</span></div>'; } $('.ht-rili-body').append(riliHtml); $('.ht-rili-onclick').on('click',function(){ dateClick(this); }) } //是否是闰年 function isLeapYear(){ if( (calendarDate.year % 4 == 0) && (calendarDate.year % 100 != 0 || calendarDate.year % 400 == 0) ){ calendarDate.isLeapYear = true; }else{ calendarDate.isLeapYear = false; } } //日期点击事件 function dateClick(obj){ $(obj).addClass('ht-rili-td-active').siblings(".ht-rili-td").removeClass("ht-rili-td-active"); $(".calendar-text").val($(obj).data("date")); $('.calendar-box1').hide(); } //获取上个月份,本月,下个月份信息 function getDays(){ //上月天数 if( parseInt(calendarDate.month) == 1 ){ calendarDate.lastDays = new Date(calendarDate.year-1,12, 0).getDate(); calendarDate.lastMonth = new Date(calendarDate.year-1,12, 0).getMonth()+1; calendarDate.lastYear = new Date(calendarDate.year-1,12, 0).getFullYear(); }else{ calendarDate.lastDays = new Date(calendarDate.year,calendarDate.month-1, 0).getDate(); calendarDate.lastMonth = new Date(calendarDate.year,calendarDate.month-1, 0).getMonth()+1; calendarDate.lastYear = new Date(calendarDate.year,calendarDate.month-1, 0).getFullYear(); } //下个月天数 if( parseInt(calendarDate.month) == 12 ){ calendarDate.nextDays = new Date(calendarDate.year+1,1, 0).getDate(); calendarDate.nextMonth = new Date(calendarDate.year+1,1, 0).getMonth()+1; calendarDate.nextYear = new Date(calendarDate.year+1,1, 0).getFullYear(); }else{ calendarDate.nextDays = new Date(calendarDate.year,calendarDate.month+1, 0).getDate(); calendarDate.nextMonth = new Date(calendarDate.year,calendarDate.month+1, 0).getMonth()+1; calendarDate.nextYear = new Date(calendarDate.year,calendarDate.month+1, 0).getFullYear(); } //本月天数 calendarDate.days = new Date(calendarDate.year,calendarDate.month, 0).getDate(); } //检测时间是否一致 function checkDate( dateStr1, dateStr2 ){ var date1 = dateStr1.split("-"); //[0]year,[1]month,[2]date; var date2 = dateStr2.split("-"); //[0]year,[1]month,[2]date; if( date1[1] < 10 && date1[1].length < 2){ date1[1] = "0"+date1[1]; } if( date1[2] < 10 && date1[2].length < 2){ date1[2] = "0"+date1[2]; } if( date2[1] < 10 && date2[1].length < 2){ date2[1] = "0"+date2[1]; } if( date2[2] < 10 && date2[2].length < 2){ date2[2] = "0"+date2[2]; } date1 = date1.join("-"); date2 = date2.join("-"); return date1 == date2; } $.fn.extend({ calendar:function(opt){ if( (opt.beginDate != undefined && opt.endDate != undefined )||( opt.data.length > 0 ) ){ var beginDate = opt.data[0].date; var endDate = opt.data[opt.data.length-1].date; calendarDate.beginYear = parseInt(beginDate.split('-')[0]);//起始年 calendarDate.beginMonth = parseInt(beginDate.split('-')[1]);//起始月 calendarDate.beginDate = parseInt(beginDate.split('-')[2]);//起始日 calendarDate.endYear = parseInt(endDate.split('-')[0]);//结束年 calendarDate.endMonth = parseInt(endDate.split('-')[1]);//结束月 calendarDate.endDate = parseInt(endDate.split('-')[2]);//结束日 calendarDate.year = parseInt(beginDate.split('-')[0]);//设置起始日期为当前日期 calendarDate.month = parseInt(beginDate.split('-')[1]);//设置起始日期为当前日期 calendarDate.date = parseInt(beginDate.split('-')[2]);//设置起始日期为当前日期 calendarDate.opt = opt; } //加载容器 calendarDate.container = '<div class="ht-rili-querybox"><div class="ht-rili-datebox"><span class="ht-rili-leftarr"></span><span class="ht-rili-date"></span><span class="ht-rili-rightarr"></span></div></div><div class="ht-rili-head"><div class="ht-rili-th">日</div><div class="ht-rili-th">一</div><div class="ht-rili-th">二</div><div class="ht-rili-th">三</div><div class="ht-rili-th">四</div><div class="ht-rili-th">五</div><div class="ht-rili-th">六</div></div><div class="ht-rili-body"></div>' $(opt.ele).append(calendarDate.container); $('.ht-rili-date').html(calendarDate.year+'年 '+calendarDate.month+'月'); getIndexDay(); $('.ht-rili-leftarr').on('click',function(){ $('.ht-rili-body').html(''); if( calendarDate.month == 1 ){ calendarDate.year -= 1; calendarDate.month = 12; }else{ calendarDate.month -=1; } $('.ht-rili-date').html(calendarDate.year+'年 '+calendarDate.month+'月'); getIndexDay(); }) $('.ht-rili-rightarr').on('click',function(){ $('.ht-rili-body').html(''); if( calendarDate.month == 12 ){ calendarDate.year += 1; calendarDate.month = 1; }else{ calendarDate.month +=1; } $('.ht-rili-date').html(calendarDate.year+'年 '+calendarDate.month+'月'); getIndexDay(); }) }, }); })(jQuery) </script> <script type="text/javascript"> $(function(){ $('.calendar-box1').calendar({ ele : '.demo-box', //依附 data : [ {date:'2018-01-15'}, {date:'2018-01-16'}, {date:'2018-01-17'}, {date:'2018-01-18'}, {date:'2018-01-19'}, {date:'2018-01-22'}, {date:'2018-01-23'}, {date:'2018-01-24'}, {date:'2018-01-25'}, {date:'2018-01-26'}, {date:'2018-01-29'}, {date:'2018-01-30'}, {date:'2018-01-31'}, {date:'2018-02-01'}, {date:'2018-02-02'}, {date:'2018-02-05'}, {date:'2018-02-06'}, {date:'2018-02-07'}, {date:'2018-02-08'}, {date:'2018-02-09'} ] }); $(".calendar-text").focus(function(){ $('.calendar-box1').show(); }); }); </script> </body> </html>
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复