相关文章推荐
卖萌的水桶  ·  关于全局状态管理、计算属性、组件跨级传递数据 ...·  1 年前    · 
神勇威武的山羊  ·  C++标准库_语言新特性 - bowuwb ...·  1 年前    · 
绅士的围巾  ·  http访问springboot接口出现40 ...·  2 年前    · 
英俊的蟠桃  ·  js函数只执行一次,函数重写,变量控制与闭包 ...·  2 年前    · 
Code  ›  日历形式的日期选择器 | 微信开放社区
https://developers.weixin.qq.com/community/develop/article/doc/0004e6cfe04a905f373a3ec145bc13
痴情的领结
2 年前

交流专区
服务市场
微信学堂
文档
小程序
  • 常用主页

    小程序

    小游戏

    企业微信

    微信支付

  • 服务市场
    微信学堂
    文档
登录
评论

置顶 日历形式的日期选择器 精选 热门

祺爸💎 2020-04-14
4912 浏览
5 评论

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

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

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

效果图如下

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

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

日历部分主要是使用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代码,没什么花头。

最后一次编辑于 2020-04-14
点赞 18
收藏
分享

扫描小程序码分享

复制链接

删除文章后,文章内容和评论将一并被删除,且不可恢复。

删除 取消
评论
关闭

请选择投诉理由

  • 广告内容
  • 违法违规
  • 恶意灌水内容
  • 其他

5 个评论

  • 拾忆
    拾忆
    2020-04-14
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    点了

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2020-04-14
    赞同 2
    回复 1
    • 祺爸💎
      祺爸💎
      2020-04-14
      请 登录 后发表内容
      关闭

      新增或编辑超链接

      确认 取消
      关闭

      插入视频

      确认 取消
      发表
      点了

      你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

      待楼主反馈
      2020-04-14
      赞 1
      回复
      关闭

      请选择投诉理由

      • 广告内容
      • 违法违规
      • 恶意灌水内容
      • 其他
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • Admin ²º²³
    Admin ²º²³
    2020-04-14
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    这个不错,如果年月选择不是picker模式,

    而是同一界面直接点击加减方式比较适合这种格式

    现在感觉选个日期要弹2次,原生picker还只弹一次。当然如果就选择本月内的时间段,那这个无疑是很完美的。


    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2020-04-14
    赞同 3
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 湘妃竹
    湘妃竹
    2020-07-03
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    点赞,组件写的条理很清楚,我这边拿到稍微改下,就能适配我们公司的代码

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2020-07-03
    赞同
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 小肥羊🍊
    小肥羊🍊
    2020-04-14
    请 登录 后发表内容
    关闭

    新增或编辑超链接

    确认 取消
    关闭

    插入视频

    确认 取消
    发表

    已

    你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。

    待楼主反馈
    2020-04-14
    赞同
    回复
    关闭

    请选择投诉理由

    • 广告内容
    • 违法违规
    • 恶意灌水内容
    • 其他
  • 披着狼皮的羊
    披着狼皮的羊
    发表于移动端
    2020-04-14
 
推荐文章
卖萌的水桶  ·  关于全局状态管理、计算属性、组件跨级传递数据、onLaunch延迟加载页面、switchTab传参等功能的最佳实现方案 | 微信开放社区
1 年前
神勇威武的山羊  ·  C++标准库_语言新特性 - bowuwb - 博客园
1 年前
绅士的围巾  ·  http访问springboot接口出现401 、403、 Forbidden 错误解决方法-阿里云开发者社区
2 年前
英俊的蟠桃  ·  js函数只执行一次,函数重写,变量控制与闭包三种做法 - 听风是风 - 博客园
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号