前端js月视图日期自动补全 js comon方法

前端js月视图日期自动补全
https://blog.csdn.net/u013262823/article/details/90406953

JS日期自动补全

实现一个能够实现日期自动补全的前端日历。主要计算数据如下：（代码中dateFormat时间格式转换方法将在下一篇文章贴出）
1、知道今天的日期（today）

const today = dateFormat().today()
1

2、一个月有多少天 （daysInMonth）

const daysInMonth = (date) => {
    if(date.indexOf('-') === date.lastIndexOf('-')) {
        date = `${date}-01`
    }
    const d = new Date(`${date.replace(/-/g, '/')}`)
    d.setMonth(d.getMonth()+1)
    d.setDate(0)
    return d.getDate()
}
1
2
3
4
5
6
7
8
9

3、当前月的第一天和最后一天是周几 （firstAndLastDay）

const firstAndLastDay = function (date) {
    let todayWeek = dateFormat(date).day(),
        todayDate = dateFormat(date).today(),
        first = todayWeek - (todayDate - 1)%7,
        last = (todayWeek + (daysInMonth(date) - todayDate)%7)%7
    return {first, last}
}
1
2
3
4
5
6
7

4、上个月最后一天（beforeMonthLastDay）

const beforeMonthLastDay = function (date) {
    return daysInMonth(dateFormat(date).add(-1, 'month').format('YYYY-MM-DD'))
}
1
2
3

5、下一个月是几月份(lastMonthMonth)

const lastMonthMonth = function (date) {
    return dateFormat(date).add(1, 'month').month() + 1
}
1
2
3

6、补齐月视图面板天数(fillMonthPanel)

fillMonthPanel的实现方法如下

let _daysInMonth = daysInMonth(date),
        _firstAndLastDay = firstAndLastDay(date),
        _beforeMonthLastDay = beforeMonthLastDay(date),
        thisMonth = Number(date.split('-')[1]),
        _lastMonthMonth = lastMonthMonth(date),
        beforeLength = _firstAndLastDay.first,
        afterLength = 6 - _firstAndLastDay.last,
        beforeDates = [],
        afterDates = [],
        days = []
    for (let i = _beforeMonthLastDay - beforeLength + 1; i <= _beforeMonthLastDay; i++) {
    beforeDates<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
        day<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
        type<span class="token punctuation">:</span> <span class="token string">'before'</span><span class="token punctuation">,</span>
        nickDay<span class="token punctuation">:</span> i
<span class="token punctuation">}</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> _daysInMonth<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    days<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
        day<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
        type<span class="token punctuation">:</span> <span class="token string">'normal'</span><span class="token punctuation">,</span>
        nickDay<span class="token punctuation">:</span> i
<span class="token punctuation">}</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span> i <span class="token operator">&lt;=</span> afterLength<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    afterDates<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
        day<span class="token punctuation">:</span> i<span class="token punctuation">,</span>
        type<span class="token punctuation">:</span> <span class="token string">'after'</span><span class="token punctuation">,</span>
        nickDay<span class="token punctuation">:</span>  i
<span class="token punctuation">}</span>
<span class="token keyword">return</span> beforeDates<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>days<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>afterDates<span class="token punctuation">)</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

这也就能实现出一个自动补全月视图面板的前端日历。

标签：const,补全,dateFormat,视图,js,firstAndLastDay,date,daysInMonth
来源： https://www.cnblogs.com/sunny3158/p/16083738.html