标签：const 补全 dateFormat 视图 js firstAndLastDay date daysInMonth

前端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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。