前端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"><=</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"><=</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
这也就能实现出一个自动补全月视图面板的前端日历。