写的第一个插件,需要改进的地方还请大神指出,样式比较简单,不喜勿喷
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="divport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./date.css"> </head> <body> <div id="date"></div> </body> <script src="https://www.jq22.com/jquery/jquery-2.1.1.js"></script> <script src="./util.js"></script> <!-- <script src="./date.js"></script> --> <script src="./date1.js"></script> <script> var now = new myDate("date") </script> </html>
css
.dateTitle, .week{ display: flex; justify-content: space-around; border-bottom: 1px solid #eee; } .weekTitle, .day{ text-align: center; padding: 5px 10px; width: 60px; } .myDate{ width: 430px; background: #074072; opacity: .8; color: #fff; margin: 0 auto; } .today{ padding: 20px; border-bottom: 1px solid #eee; } .year{ display: flex; justify-content: space-between; padding: 3px 20px; border-bottom: 1px solid #eee; } .btns a{ line-height: 50px; color: #fff; text-decoration: none; padding: 0 15px; }
js
(function ($) { var myDate = function(id){ this.div = $("#"+id); this.today = formatTime(new Date());//当前日期 // console.log(date); this.year = new Date().getFullYear();//当前年 this.day = new Date().getDate();//当前日 this.month = new Date().getMonth() + 1;//当前月 this.week = new Date().getDay();//当前星期 this.months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; // this.days = []; // this.childArr = []; this.init(); } myDate.prototype = { constructor: myDate, init: function(){ let div = this.div; let title = this.setWeek(); // let d = this.day; // let w = this.week; let y = this.year; let m = this.month; let day = this.setDays(this.set_days(y,m)); let that = this; div.addClass("myDate"); div.append('<div class="today">' + this.getToday() + '</div>') div.append('<div class="year"><p>' + this.setTitle(y,m) + '</p><div class="btns"><a href="#" class="left"><</a><a href="#" class="right">></a></div></div>') div.append(title); div.append(day); console.log(this.today) let l = this.div.find(".left"); let r = this.div.find(".right"); l.on("click",function(){ if(m == 1){ m = 12; y --; }else{ m --; } div.find(".year p").text(that.setTitle(y,m)) div.find(".days").remove(); // div.append(that.setDays(that.getres(that.getweek(d,w),that.getNum(y,m)))) div.append(that.setDays(that.set_days(y,m))) }) r.on("click",function(){ if(m == 12){ m = 1; y ++; }else{ m ++; } div.find(".year p").text(that.setTitle(y,m)); div.find(".days").remove(); div.append(that.setDays(that.set_days(y,m))) }) }, getNum: function(y, m) { let n = new Date(y, m, 0).getDate(); return n }, getweek: function(d, w) { let n = d % 7 == 0 ? 7 : d % 7; return (8 - n + w) % 7; }, set_days: function (y, m) { let f_day = new Date(y + "-" + m + "-1").getDay(); let tt_day = this.getNum(y, m); let days = []; let childArr = [] if(f_day == 0){ f_day = 7 } for (let i = 1; i < f_day; i++) { childArr.push(" ") } for (let i = 1; i <= tt_day; i++) { if (childArr.length % 7 != 0) { childArr.push(i) } else { days.push(childArr); childArr = []; childArr.push(i) } } for (let i = childArr.length; i < 7; i++) { childArr.push(" ") } days.push(childArr); console.log(days) return days; }, setWeek: function(){ let weekArr = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU']; let html = '<div class="dateTitle">'; $.each(weekArr,function(i){ html += '<p class="weekTitle">' + weekArr[i] + '</p>'; }) html += '</div>'; return html }, setDays: function(arr){ let html = '<div class="days">'; $.each(arr,function(i){ html += '<div class="week">'; $.each(arr[i],function(j){ html += '<p class="day">' + arr[i][j] +'</p>'; }) html += '</div>'; }) html += '</div>'; return html }, setTitle: function(y,m){ return y + "年" + m + "月"; }, getToday: function(){ let t = this.today.split(" ")[0]; return t.split("/")[0] + "年" + t.split("/")[1] + "月" + t.split("/")[2] }, } window.myDate = myDate; }(jQuery))