返回
顶部

修改密码

【微信小程序】日历形式的日期选择器

+1

-1

收藏

+1

-1

点赞0

评论0

最近项目中用到了一个日期选择器,原生的不是很好看,所以自己写了一个日历形式的,现在分享给大家。直接上代码: https://gitee.com/piscdong/we...效果图如下月份切换直接用了原生的月份选择器。代码还是相对比较简单的,这里简单分析一下日历部分的代码。日历部分主要是使…

最近项目中用到了一个日期选择器,原生的不是很好看,所以自己写了一个日历形式的,现在分享给大家。

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

效果图如下

月份切换直接用了原生的月份选择器。

代码还是相对比较简单的,这里简单分析一下日历部分的代码。

日历部分主要是使用js的Date对象来获取指定月份相关信息。首先获取到当月首日的星期,如果不是周日,则在前面补充上相应数量的空view。

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

每个月的最大天数,和PHP不同,js好像并没有直接获取到的方法,我用了个笨办法,直接根据月份来判断当前月是否大月,2月的时候则是这一年是否闰年。

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布局,父级的宽度正好是每个子级宽度的7倍,这样就可以每7天换一行。

其他基本上都是一些基础的js、css代码,没什么花头。

赞赏

扫一扫在手机打开

评论
已有0条评论
0/150
提交
热门评论
相关推荐
微信小程序开发中常见的设计败笔
  • 开发资料
  • 2022-05-20 18:35
  • 12 0 0
+1
从王者荣耀里我学会的前端新手指引
  • 开发资料
  • 2022-05-20 18:35
  • 41 0 0
+1
微信小程序登录鉴权与获取用户信息
  • 开发资料
  • 2022-05-20 18:35
  • 3 0 0
+1
小程序录音功能实现
  • 开发资料
  • 2022-05-20 18:35
  • 25 0 0
+1
今日要闻
换一批
热点排行