最近項(xiàng)目中用到了一個(gè)日期選擇器，原生的不是很好看，所以自己寫了一個(gè)日歷形式的，現(xiàn)在分享給大家。

直接上代碼： https://gitee.com/piscdong/we...

效果圖如下

月份切換直接用了原生的月份選擇器。

代碼還是相對比較簡單的，這里簡單分析一下日歷部分的代碼。

日歷部分主要是使用js的Date對象來獲取指定月份相關(guān)信息。首先獲取到當(dāng)月首日的星期，如果不是周日，則在前面補(bǔ)充上相應(yīng)數(shù)量的空view。

if (week > 0) {
  for (var i = 0; i < week; i++) {
    days.push({
      day: 0
    })
  }
}

每個(gè)月的最大天數(shù)，和PHP不同，js好像并沒有直接獲取到的方法，我用了個(gè)笨辦法，直接根據(jù)月份來判斷當(dāng)前月是否大月，2月的時(shí)候則是這一年是否閏年。

if (month == 4 || month == 6 || month == 9 || month == 11) {
  max = 30
} else if (month == 2) {
  if (((year % 4) == 0 && (year % 100) > 0) || (year % 400) == 0) {
    max = 29
  } else {
    max = 28
  }
}

整體使用flex布局，父級(jí)的寬度正好是每個(gè)子級(jí)寬度的7倍，這樣就可以每7天換一行。

其他基本上都是一些基礎(chǔ)的js、css代碼，沒什么花頭。