11月21, 2017

动手开发日历控件

最近打算开发一个自己的日程管理系统,因此需要自定义开发日历控件,如下是日期生成逻辑。

/**
 * Created by cuitianze on 17/11/17.
 */
const months = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
// 闰年
const leapMonths = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]

function isLeap(yy) {
  // 置闰法则 四年一闰;百年不闰,四百年再闰
  // 能被4整除但不能被100整除,或能被400整除的年份即为闰年\
  return (yy % 4 === 0 && yy % 100 !== 0) || (yy % 400 === 0)
}

function getDateJson(date) {
  // 绘制月份的年月
  const yy = date.getFullYear()
  const mm = date.getMonth()
  // 判断是否是闰年
  const isleap = isLeap(yy)
  // 月份
  const month = isleap ? leapMonths : months
  // 此月1号的日期,获取其星期
  const beginDate = new Date(yy, mm, 1)
  const beginWeek = beginDate.getDay()

  // 上个月应显示天数
  const preNum = beginWeek
  // 日历总天数
  const totalNum = 7 * 6
  // 当月天数
  const curNum = month[mm]
  // 下个月应显示天数
  const nextNum = totalNum - curNum - preNum

  // pre表示上个月;不是上一年
  let preYY
  let preMM
  if (mm === 0) {
    preYY = yy -1
    preMM = 11
  } else {
    preYY = yy
    preMM = mm - 1
  }
  // 上个月总天数
  const preMax = month[preMM]

  // next
  let nextYY
  let nextMM
  if (mm === 11) {
    nextYY = yy + 1
    nextMM = 0
  } else {
    nextYY = yy
    nextMM = mm + 1
  }

  let dateJson = []
  // 上月
  for (let i = preNum; i > 0; i--) {
    dateJson.push({
      year: preYY,
      month: preMM,
      day: preMax - i + 1,
      type: 'pre'
    })
  }
  // 当月
  for (let i = 1; i <= curNum; i++) {
    dateJson.push({
      year: yy,
      month: mm,
      day: i,
      type: 'cur'
    })
  }
  // 下月
  for (let i = 1; i <= nextNum; i++) {
    dateJson.push({
      year: nextYY,
      month: nextMM,
      day: i,
      type: 'next'
    })
  }
  return dateJson
}

// 今天
var today = new Date()
var yy = today.getFullYear()
var mm = today.getMonth()
console.log(today, yy, mm)

var udate = new Date(yy, mm, 1)
console.log(udate)

const date = getDateJson(today)
console.log('date', date)

log

date [ { year: 2017, month: 9, day: 29, type: 'pre' },
  { year: 2017, month: 9, day: 30, type: 'pre' },
  { year: 2017, month: 9, day: 31, type: 'pre' },
  { year: 2017, month: 10, day: 1, type: 'cur' },
  { year: 2017, month: 10, day: 2, type: 'cur' },
  { year: 2017, month: 10, day: 3, type: 'cur' },
  { year: 2017, month: 10, day: 4, type: 'cur' },
  { year: 2017, month: 10, day: 5, type: 'cur' },
  { year: 2017, month: 10, day: 6, type: 'cur' },
  { year: 2017, month: 10, day: 7, type: 'cur' },
  { year: 2017, month: 10, day: 8, type: 'cur' },
  { year: 2017, month: 10, day: 9, type: 'cur' },
  { year: 2017, month: 10, day: 10, type: 'cur' },
  { year: 2017, month: 10, day: 11, type: 'cur' },
  { year: 2017, month: 10, day: 12, type: 'cur' },
  { year: 2017, month: 10, day: 13, type: 'cur' },
  { year: 2017, month: 10, day: 14, type: 'cur' },
  { year: 2017, month: 10, day: 15, type: 'cur' },
  { year: 2017, month: 10, day: 16, type: 'cur' },
  { year: 2017, month: 10, day: 17, type: 'cur' },
  { year: 2017, month: 10, day: 18, type: 'cur' },
  { year: 2017, month: 10, day: 19, type: 'cur' },
  { year: 2017, month: 10, day: 20, type: 'cur' },
  { year: 2017, month: 10, day: 21, type: 'cur' },
  { year: 2017, month: 10, day: 22, type: 'cur' },
  { year: 2017, month: 10, day: 23, type: 'cur' },
  { year: 2017, month: 10, day: 24, type: 'cur' },
  { year: 2017, month: 10, day: 25, type: 'cur' },
  { year: 2017, month: 10, day: 26, type: 'cur' },
  { year: 2017, month: 10, day: 27, type: 'cur' },
  { year: 2017, month: 10, day: 28, type: 'cur' },
  { year: 2017, month: 10, day: 29, type: 'cur' },
  { year: 2017, month: 10, day: 30, type: 'cur' },
  { year: 2017, month: 11, day: 1, type: 'next' },
  { year: 2017, month: 11, day: 2, type: 'next' },
  { year: 2017, month: 11, day: 3, type: 'next' },
  { year: 2017, month: 11, day: 4, type: 'next' },
  { year: 2017, month: 11, day: 5, type: 'next' },
  { year: 2017, month: 11, day: 6, type: 'next' },
  { year: 2017, month: 11, day: 7, type: 'next' },
  { year: 2017, month: 11, day: 8, type: 'next' },
  { year: 2017, month: 11, day: 9, type: 'next' } ]

本文链接:http://es8.es/post/动手开发日历控件.html

-- EOF --

Comments

请在后台配置评论类型和相关的值。