二月在我的年历中没有正确显示

问题描述 投票：0回答：1

我试图在我的网站中显示从当月算起 3 个月或 1 个月的部分，这取决于屏幕尺寸。然后，用户可以使用屏幕中的箭头逐月循环浏览不同的其他月份。到目前为止，它似乎工作正常。然而，我很难找到为什么当到达二月=（此处为二月）月份时，它没有正确发布，而是显示三月（此处为火星），即使日历显示二月的 28 或 29 天特征。请有人找到原因并解释一下。下面是一个可复制的片段。

const calendar = document.querySelector('.reservation_calendar')

let date = new Date()
let dday = date.getDay()
let dmonth = date.getMonth()
let year = date.getFullYear()
let dateCounterLimit=3

let monthArray = ['Janvier','Fevrier','Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'decembre']


let dayone = new Date(year, dmonth, 1).getDay();
 
// Get the last date of the month
let lastdate = new Date(year, dmonth+1, 0).getDate();

// Get the day of the last date of the month
let dayend = new Date(year, dmonth, lastdate).getDay();

// Get the last date of the previous month
let monthlastdate = new Date(year, dmonth, 0).getDate();




function myCallBack(){
returnValue()
window.addEventListener('resize', appenDate)
window.onload = appenDate()
}


const returnValue = () =>{
    if(window.innerWidth<650){
        return {
            dateCounterLimit: 1,
        }
    }else{
        return {
            dateCounterLimit: 3,
         }
    }
};

const appenDate = () =>{
    calendar.innerHTML = ''
    dateCounterLimit=returnValue().dateCounterLimit
    console.log(dateCounterLimit)
    let i = document.createElement('i')
    i.className = 'bi bi-arrow-left-circle'
    calendar.appendChild(i)
    let i1 = document.createElement('i')
    i1.className = 'bi bi-arrow-right-circle'
    calendar.appendChild(i1)
    const icon = document.querySelectorAll('.reservation_calendar .bi')
    icon.forEach(icon=>icon.addEventListener('click',(e)=>{
        let target = e.target
        if(target.classList.contains('bi-arrow-right-circle')){
            dmonth++
            removeMonths()
            checkDateCalendarLimit(dmonth)
        }else{
            dmonth--
            removeMonths()
            checkDateCalendarLimit(dmonth)
        }
    }))
checkDateCalendarLimit(dmonth)

}


function checkDateCalendarLimit(dmonth){
    if(dateCounterLimit==1){
        console.log({dmonth})
        appendCalendar(dmonth)
    }
    else{
        for(let i=0; i<dateCounterLimit;i++){
            dmonth+=1
            console.log({dmonth})
            appendCalendar(dmonth)
        }
    }
}


function appendCalendar(param){
    let wrapper = document.createElement('div')
    let DateSpanWrapperDiv = document.createElement('div')
    DateSpanWrapperDiv.className = 'DateSpanWrapperDiv'
    let month_parag = document.createElement('p')
    month_parag.className = "the_month"
    calendar.appendChild(wrapper)
    wrapper.appendChild(month_parag)
    wrapper.appendChild(DateSpanWrapperDiv)
    wrapper.setAttribute('id', `dateWrapper_${param}`)
    wrapper.className = "dateWrapperDiv"
    let lastdate = new Date(year, param+1, 0).getDate();
    let dyear = date.getFullYear()

    if ((param) < 0 || (param) > 11) {
        date = new Date(year, param, new Date().getDate());
        dyear = date.getFullYear() 
        console.log({dyear})
        param = date.getMonth();
        month_parag.innerHTML = `${monthArray[param]} ${dyear}`
    }else{
        date = new Date()
        domth = date.getMonth()
        month_parag.innerHTML = `${monthArray[param]} ${year}`
    }

    for(let i=1; i<=lastdate; i++){
        let dateSpan = document.createElement('span')
        dateSpan.innerHTML = i
        DateSpanWrapperDiv.appendChild(dateSpan)
    }
}


function removeMonths(){
    const dateWrapperDiv = document.querySelectorAll('.dateWrapperDiv')
    dateWrapperDiv.forEach(elem=>elem.remove())
}



myCallBack()
.reservation_calendar {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

 .reservation_calendar .bi-arrow-left-circle{
    position: absolute;
    left: 0%;
    top: 50%;
  }

.reservation_calendar .bi-arrow-right-circle{
    position: absolute;
    right: 0%;
    top: 50%;
  }

.reservation_calendar .dateWrapperDiv{
    display: flex;
    flex-direction: column;
}

.reservation_calendar .dateWrapperDiv p{
    display: grid;
    place-items: center;
}

.reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0.5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<div class="reservation_calendar"></div>

我尝试在每个步骤中 console.log 月份值，但仍然具有正确的值。找不到我在这里缺少的东西。

javascript calendar
1个回答
0
投票

显示 3 个月时，您为 dmonth 添加了 +1，但仅显示 1 个月时没有。

请注意，我更改了宽度过渡点以便能够在代码片段中预览，同时还在日历底部添加边距以滚动经过控制台。

const calendar = document.querySelector('.reservation_calendar')

let date = new Date()
let dday = date.getDay()
let dmonth = date.getMonth()
let year = date.getFullYear()
let dateCounterLimit=3

let monthArray = ['Janvier','Fevrier','Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'decembre']


let dayone = new Date(year, dmonth, 1).getDay();
 
// Get the last date of the month
let lastdate = new Date(year, dmonth+1, 0).getDate();

// Get the day of the last date of the month
let dayend = new Date(year, dmonth, lastdate).getDay();

// Get the last date of the previous month
let monthlastdate = new Date(year, dmonth, 0).getDate();




function myCallBack(){
returnValue()
window.addEventListener('resize', appenDate)
window.onload = appenDate()
}


const returnValue = () =>{
    if(window.innerWidth<850){
        return {
            dateCounterLimit: 1,
        }
    }else{
        return {
            dateCounterLimit: 3,
         }
    }
};

const appenDate = () =>{
    calendar.innerHTML = ''
    dateCounterLimit=returnValue().dateCounterLimit
    console.log(dateCounterLimit)
    let i = document.createElement('i')
    i.className = 'bi bi-arrow-left-circle'
    calendar.appendChild(i)
    let i1 = document.createElement('i')
    i1.className = 'bi bi-arrow-right-circle'
    calendar.appendChild(i1)
    const icon = document.querySelectorAll('.reservation_calendar .bi')
    icon.forEach(icon=>icon.addEventListener('click',(e)=>{
        let target = e.target
        if(target.classList.contains('bi-arrow-right-circle')){
            dmonth++
            removeMonths()
            checkDateCalendarLimit(dmonth)
        }else{
            dmonth--
            removeMonths()
            checkDateCalendarLimit(dmonth)
        }
    }))
checkDateCalendarLimit(dmonth)

}


function checkDateCalendarLimit(dmonth){
    if(dateCounterLimit==1){
        dmonth++
        appendCalendar(dmonth)
    }
    else{
        for(let i=0; i<dateCounterLimit;i++){
            dmonth+=1
            appendCalendar(dmonth)
        }
    }
}


function appendCalendar(param){
    let wrapper = document.createElement('div')
    let DateSpanWrapperDiv = document.createElement('div')
    DateSpanWrapperDiv.className = 'DateSpanWrapperDiv'
    let month_parag = document.createElement('p')
    month_parag.className = "the_month"
    calendar.appendChild(wrapper)
    wrapper.appendChild(month_parag)
    wrapper.appendChild(DateSpanWrapperDiv)
    wrapper.setAttribute('id', `dateWrapper_${param}`)
    wrapper.className = "dateWrapperDiv"
    let lastdate = new Date(year, param+1, 0).getDate();
    let dyear = date.getFullYear()

    if ((param) < 0 || (param) > 11) {
        date = new Date(year, param, new Date().getDate());
        dyear = date.getFullYear() 
        console.log({dyear})
        param = date.getMonth();
        month_parag.innerHTML = `${monthArray[param]} ${dyear}`
    }else{
        date = new Date()
        domth = date.getMonth()
        month_parag.innerHTML = `${monthArray[param]} ${year}`
    }

    for(let i=1; i<=lastdate; i++){
        let dateSpan = document.createElement('span')
        dateSpan.innerHTML = i
        DateSpanWrapperDiv.appendChild(dateSpan)
    }
}


function removeMonths(){
    const dateWrapperDiv = document.querySelectorAll('.dateWrapperDiv')
    dateWrapperDiv.forEach(elem=>elem.remove())
}



myCallBack()
.reservation_calendar {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 2rem;
  }

 .reservation_calendar .bi-arrow-left-circle{
    position: absolute;
    left: 0%;
    top: 50%;
  }

.reservation_calendar .bi-arrow-right-circle{
    position: absolute;
    right: 0%;
    top: 50%;
  }

.reservation_calendar .dateWrapperDiv{
    display: flex;
    flex-direction: column;
    margin-bottom: 300px;
}

.reservation_calendar .dateWrapperDiv p{
    display: grid;
    place-items: center;
}

.reservation_calendar .dateWrapperDiv .DateSpanWrapperDiv {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0.5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<div class="reservation_calendar"></div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.