js获取日历的方法

js/vue/angular获取日历的方法

getDates(d, t = 0) {
        var curDate = new Date(d.replace(/-/g, '/'))
        var curMonth = curDate.getMonth()
        curDate.setMonth(curMonth + t + 1)
        curDate.setDate(0)
        var curDates = new Array(curDate.getDate()).fill(0).map((item, key) => {
            return key + 1
        })
        return curDates
    }
    getWeek(d) {
        var curDate = new Date(d.replace(/-/g, '/'))
        curDate.setDate(1)
        return curDate.getDay()
    }
    getFullChunkDates(d) {
        var curDates: any = this.getDates(d)
        var preDates: any = this.getDates(d, -1)
        var nexDates: any = this.getDates(d, 1)
        var curWeek: any = this.getWeek(d)
        curDates = curDates.map((i, k) => {
            return {
                num: i,
                fullDate: /(^\d{4})-(\d{1,2})-/.exec(d)[0] + i,
                show: 1
            }
        })
        preDates = preDates.map(i => {
            return {
                num: i,
                show: 0
            }
        })
        nexDates = nexDates.map(i => {
            return {
                num: i,
                show: 0
            }
        })
        var preCurDates = preDates.slice(preDates.length - (curWeek === 0 ? 6 : curWeek - 1), preDates.length).concat(curDates)
        return preCurDates.concat(nexDates.slice(0, 42 - preCurDates.length))
    }

this.days = this.getFullChunkDates('2019-10-16')

//日一二三四五六
<div class="c-day">
        <div class="d-item" *ngFor="let item of days">
            <div>{{item.num}}</div>
        </div>
    </div>

.c-day{
    display: flex;
    width: 700px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.d-item{
    display: flex;
    display: inline-block;
    width: 100px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    text-align: center;
    padding: 40px;
}