小程序模板網(wǎng)

微信小程序】日歷形式的日期選擇器

發(fā)布時(shí)間:2020-05-15 10:23 所屬欄目:小程序開發(fā)教程

最近項(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代碼,沒什么花頭。


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25185.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢