其他分享
首页 > 其他分享> > 前端js月视图日期自动补全 js comon方法

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

作者:互联网

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

JS日期自动补全

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