wenkeshi / js-calendar Goto Github PK

let calendar=function(parentId) {
let parentElement = document.getElementById(parentId);
let init=function () {
let html=`

`; parentElement.innerHTML=html; showDateBar=document.querySelector(".show-date"); datePicker=document.querySelector(".date-picker"); dateInput=document.querySelector(".date-input"); }; let showDateBar,datePicker,dateInput; init(); parentElement.addEventListener("click",function (e) { if(e.target.classList.contains("date-input")){ onDateInputClick(e); } }); let getDaysOfMonth=function(primalDate){ let date = new Date(primalDate); //要新建一个对象，因为会改变date let month = date.getMonth(); let time = date.getTime(); //计算思路主要是month+1,相减除一天的毫秒数 let newTime = date.setMonth(month + 1); return Math.ceil((newTime - time) / (24 * 60 * 60 * 1000)); }; let dateBox; let changeDate=function(year, month, date){ dateInput.value = year+"-"+(month<10?("0"+month):month)+"-"+(date<10?("0"+date):date); }; let drawPicker=function(primalDate){ dateBox=document.querySelector(".date-box"); dateBox.innerHTML = ''; let days = getDaysOfMonth(primalDate); //计算出这个月的天数 let date = new Date(primalDate); date.setDate(1); //将date的日期设置为1号 let firstDay = date.getDay(); //知道这个月1号是星期几 let spanContainer = []; for (let i = 1-firstDay; i < 1; i++) { //如果1号不是周日(一周的开头),则在1号之前要补全 let tempDate = new Date(date); tempDate.setDate(i); let span = document.createElement("span"); span.className = "unshow"; spanContainer.push({span : span, date : tempDate}); } for (let i = 1; i <= days; i++) { //1号到这个月最后1天 date.setDate(i); let span = document.createElement("span"); span.className = 'show'; spanContainer.push({span : span, date : new Date(date)}); } let day_right=days+7-date.getDay(); for (let i = days+1; i < day_right; i++) { date.setDate(i); let span = document.createElement("span"); span.className = "unshow"; spanContainer.push({span : span, date : new Date(date)}); } let nowDate = primalDate.getDate(); let nowMonth = primalDate.getMonth(); for(let i=0;i'; } let dayInput = monthInput.nextSibling; let daysOptions = dayInput.firstChild.nextSibling; daysOptions.innerHTML = dayStr; daysOptions.selectedIndex = date.getDate()-1; drawPicker(date); }; let drawShowDateBar=function(showDateBar){ let nowDate = new Date(); let nowYear = nowDate.getFullYear(); showDateBar.date = nowDate; let year=""; for(let i=0;i<150;i++){ year+='

'+(i+1900)+'年

'; } let month=""; for(let i=0;i<12;i++){ month+=''+(i+1)+'月'; } let week=""; let weekday = ['日', '一', '二', '三', '四', '五', '六']; for (let i = 0; i < 7; i++) { week+=''+weekday[i]+''; } let html = `今天`; showDateBar.innerHTML = html; changeShowDateBar(nowDate); let yearInput = showDateBar.firstChild; yearInput.onclick = function(){ let ul = this.lastChild; ul.style.display==='none'||ul.style.display==='none'? ul.style.display='inline-block':ul.style.display='none'; }; let yearSelectBox = yearInput.lastChild; let yearLi = yearSelectBox.children; for(let i=0;i0){ let date = new Date(showDateBar.date); date.setDate(1); date.setMonth(date.getMonth()-1); let days = getDaysOfMonth(date); if(showDateBar.date.getDate()>days){ showDateBar.date.setDate(days); } showDateBar.date.setMonth(--monthOptions.selectedIndex); }else{ monthOptions.selectedIndex = 11; showDateBar.date.setFullYear(showDateBar.date.getFullYear()-1); showDateBar.date.setMonth(11); } changeShowDateBar(showDateBar.date); }; monthInput.lastChild.onclick = function(){ let monthOptions = this.previousSibling; if(monthOptions.selectedIndex<11){ showDateBar.date.setMonth(++monthOptions.selectedIndex); }else{ monthOptions.selectedIndex = 0; showDateBar.date.setFullYear(showDateBar.date.getFullYear()+1); showDateBar.date.setMonth(0); } changeShowDateBar(showDateBar.date); }; monthInput.children[1].onchange = function(){ let date = new Date(showDateBar.date); date.setDate(1); date.setMonth(this.selectedIndex); let days = getDaysOfMonth(date); if(showDateBar.date.getDate()>days){ showDateBar.date.setDate(days); } showDateBar.date.setMonth(this.selectedIndex); changeShowDateBar(showDateBar.date) }; let dayInput = monthInput.nextSibling; dayInput.firstChild.onclick = function(){ let dayOptions = this.nextSibling; if(dayOptions.selectedIndex>0){ showDateBar.date.setDate(dayOptions.selectedIndex--); }else{ showDateBar.date.setMonth(showDateBar.date.getMonth()-1); showDateBar.date.setDate(getDaysOfMonth(showDateBar.date)); } changeShowDateBar(showDateBar.date);

};
calendar("root");