微信小程序开发——日历实现

这篇具有很好参考价值的文章主要介绍了微信小程序开发——日历实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序开发 日历,微信小程序开发,前端

小程序开发 日历,微信小程序开发,前端

 

1.new Date().toLocaleDateString(), //获取当前的时间(年月日)

2. new Date().getFullYear()  //获取年

    new Date().getMonth() + 1, //获取月份

    new Date().getDate(), //获取日期

3.this.getThisMonthDays(year, month)  //获取当月天数

4.this.getLastMonthDays(year, month)   //绘制上个月天数

 this.getNowMonthDays(year, month)  //绘制当月天数

 this.getNextMonthDays(year, month)  //绘制下个月文章来源地址https://www.toymoban.com/news/detail-585337.html

​
<view class="container">
  <view class="calendar-container">
    <!-- 年月的显示 -->
    <view class="calendar-container-header">
      <view class="date-text">{{year}}年{{month}}月</view>
      <view class="btn-box">
        <view class="btn preBtn" bindtap="changeMonth" data-type="pre"></view>
        <view class="btn nextBtn" bindtap="changeMonth" data-type="next"></view>
      </view>
    </view>
    <!-- 日期的显示 -->
    <view class="calendar-container-body">
      <!-- 显示星期 -->
      <view class="calendar-week">
        <view class="calendar-week-item" wx:for="{{weeksArr}}" wx:key="index">{{item}}</view>
      </view>
      <!-- 显示日期 -->
      <view class="calendar-days">
        <!-- 上个月的日期 -->
        <view class="days-item last-days-item {{item.isNowMonthDay}}" wx:for='{{lastMonthDays}}' wx:key='item' bindtap="selectDate" data-time="{{item.time}}" data-type="lastMonthDays" data-index="{{index}}">{{item.date}}</view>

        <!--当月的日期-->
        <view class="days-item {{item.isNowMonthDay}}" wx:for='{{nowMonthDays}}' wx:key='index' bindtap="selectDate" data-item="{{item}}"  data-type="nowMonthDays" data-index="{{index}}">
          {{item.date}}
        </view>

        <!--下个月的日期-->
        <view class="days-item next-days-item {{item.isNowMonthDay}}" wx:for='{{nextMonthDays}}' wx:key='item' bindtap="selectDate" data-item="{{item}}"  data-type="nextMonthDays" data-index="{{index}}">{{item.date}}</view>
      </view>
    </view>
  </view>
</view>

​
.container{
  padding: 32rpx;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

/* 日历容器的样式 */
.calendar-container{
   width: 100%;
   /* height: 800rpx; */
   border-radius: 24rpx;
   background-color: #ffffff;
   box-sizing: border-box;
}
/* 日历容器的头部样式 */
.calendar-container .calendar-container-header{
  padding: 24rpx 24rpx 16rpx;
  width: 100%;
  border-bottom: 2rpx solid #cccccc;

  display: flex;
  justify-content: space-between;
  align-items: center;
  
  box-sizing: border-box;
}
 .calendar-container-header .date-text{
  font-weight: 700;
}

/* 切换月份按钮的样式 */
 .calendar-container-header .btn-box {
  width: 130rpx;
  height: 40rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

 .calendar-container-header .btn-box .btn {
  width: 40rpx;
  height: 40rpx;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  background-image: url(https://aalq.oss-cn-hangzhou.aliyuncs.com/basketball/arrow-down.png);
}

 .calendar-container-header .btn-box .btn.preBtn {
  transform: rotate(90deg);
}

.calendar-container-header .btn-box .btn.nextBtn {
  transform: rotate(-90deg);
}

/* 日期的显示样式 */
.calendar-container-body {
  margin-top: 16rpx;
  padding-bottom: 64rpx;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.calendar-container-body .calendar-week {
  display: flex;
  box-sizing: border-box;
}

.calendar-week .calendar-week-item {
  width: calc(686rpx  / 7);
  text-align: center;
  font-size: 32rpx;
  font-weight: 700;
  box-sizing: border-box;
}

/* 日期 */
.calendar-days {
  display: flex;
  flex-wrap: wrap;
  font-size: 28rpx;
  font-weight: 700;
  box-sizing: border-box;
}

.calendar-days .days-item {
  width: calc(686rpx  / 7);
  height: 68rpx;
  text-align: center;
  line-height: 68rpx;
  box-sizing: border-box;
}
.calendar-days .days-item.isNowMonthDay{
  border-radius: 68rpx;
background-color: #28EFD2;
color: #ffffff;
}
.calendar-days .days-item.isNotNowMonthDay{
  border-radius: 68rpx;
  background-color: #cccccc;
  color: #ffffff;
}
.calendar-days .days-item.isActive{
  position: relative;
}
.calendar-days .days-item.isActive::after{
  display: block;
  content: '';
  border:10rpx  solid #28EFD2 ;
  border-top:10rpx  solid transparent ;
  border-left: 10rpx solid transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.calendar-days .days-item.last-days-item,
.calendar-days .days-item.next-days-item {
  color: #ccc;
}
Page({
  data: {
    // 本月指的是选择的当前月份
    year: new Date().getFullYear(),
    month: new Date().getMonth() + 1,
    nowMonth: new Date().getMonth() + 1, //本月是几月
    nowDay: new Date().getDate(), //本月当天的日期
    weeksArr: ['日', '一', '二', '三', '四', '五', '六'],
    lastMonthDays: [], //上一个月
    nowMonthDays: [], //本月 
    nextMonthDays: [], //下一个月
    timeDate: new Date().toLocaleDateString(), //当前时间
    lastType: "nowMonthDays", //上一次选中的时间类型,默认为本月
  },
  onShow() {
    let {
      year,
      month
    } = this.data
    this.createDays(year, month)
  },
  //创建时间
  createDays(year, month) {
    this.getLastMonthDays(year, month)
    this.getNowMonthDays(year, month)
    this.getNextMonthDays(year, month)
  },
  //获取当月天数
  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },
  //绘制上个月天数
  getLastMonthDays(year, month) {
    let nowMonthFirstDays = new Date(year, month - 1, 1).getDay()
    let lastMonthDays = []
    if (nowMonthFirstDays) { //判断当月的第一天是不是星期天
      //上个月显示多少天
      let lastMonthNums = month - 1 < 0 ? this.getThisMonthDays(year - 1, 12) : this.getThisMonthDays(year, month - 1); //判断是否会跨年

      //上个月从几号开始显示
      for (let i = lastMonthNums - nowMonthFirstDays + 1; i <= lastMonthNums; i++) {
        let time = new Date(year, month - 2, i).toLocaleDateString() //对应的时间
        lastMonthDays.push({
          date: i, //几号
          week: this.data.weeksArr[new Date(year, month - 2, i).getDay()], //星期几
          time,
          isNowMonthDay: ''
        });
      }
    }
    this.setData({
      lastMonthDays
    })
  },
  //绘制当月天数
  getNowMonthDays(year, month) {
    let {
      nowMonth,
      nowDay
    } = this.data
    let nowMonthDays = []
    let days = this.getThisMonthDays(year, month); //获取当月的天数
    for (let i = 1; i <= days; i++) {
      let time = new Date(year, month - 1, i).toLocaleDateString()
      nowMonthDays.push({
        date: i, //几号
        week: this.data.weeksArr[new Date(year, month - 1, i).getDay()], //星期几
        time,
        isNowMonthDay: (month == nowMonth && i == nowDay) ? "isNowMonthDay" : (i == nowDay) ? "isNotNowMonthDay" : ""
      });
    }
    this.setData({
      nowMonthDays
    })
  },
  //绘制下个月
  getNextMonthDays(year, month) {
    let {
      lastMonthDays,
      nowMonthDays,
    } = this.data
    let nextMonthDays = []
    let nextMonthNums = (lastMonthDays.length + nowMonthDays.length) > 35 ? 42 - (lastMonthDays.length + nowMonthDays.length) : 35 - (lastMonthDays.length + nowMonthDays.length) //下个月显示多少天
    let nowYear = (parseInt(month) + 1) > 12 ? year + 1 : year //下一个月的年份
    let nowMonth = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1 //下一个月的月份
    if (nextMonthNums) { //判断当前天数是否大于零
      for (let i = 1; i <= nextMonthNums; i++) {
        let time = new Date(year, month - 1, i).toLocaleDateString()
        nextMonthDays.push({
          date: i, //几号
          week: this.data.weeksArr[new Date(nowYear, nowMonth - 1, i).getDay()], //星期几
          time,
          isNowMonthDay: ''
        });
      }
    }
    this.setData({
      nextMonthDays
    })
    // console.log(nextMonthDays)
  },
  //切换月份
  changeMonth(e) {
    let {
      year,
      month
    } = this.data
    let type = e.currentTarget.dataset.type //类型
    if (type == 'pre') { //上一个月
      year = month - 1 > 0 ? year : year - 1
      month = month - 1 > 0 ? month - 1 : 12
    } else { //next 下个月
      year = (parseInt(month) + 1) > 12 ? year + 1 : year
      month = (parseInt(month) + 1) > 12 ? 1 : parseInt(month) + 1
    }
    this.setData({
      year,
      month,
      lastType: "nowMonthDays", //切换月份,时间类型默认为本月
    })
    this.createDays(year, month)
  },
  //选择时间
  selectDate(e) {
    let type = e.currentTarget.dataset.type //选择的时间类型
    let index = e.currentTarget.dataset.index //选择的下标
    // console.log("选择的时间",type,index)
    let {
      lastType
    } = this.data
    //将上一次选择的时间类型的 isNowMonthDay 全改为''
    this.data[lastType]?.forEach(item => { 
      item.isNowMonthDay = ''
    })
    this.data[type]?.forEach((item, idx) => {
      if (index == idx) {
        item.isNowMonthDay = (item.time == new Date().toLocaleDateString() ? "isNowMonthDay" : "isNotNowMonthDay"); //判断当前选中的日期是否是当前时间
      } else {
        item.isNowMonthDay = ''
      }
    })
    this.setData({
      [lastType]: this.data[lastType],
      [type]: this.data[type],
      lastType: type
    })
  }
})

到了这里,关于微信小程序开发——日历实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序开发|基于微信小程序的健身陪练系统的设计与实现

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月12日
    浏览(37)
  • 微信小程序开发---购物商城系统。【详细业务需求描述+实现效果】

    视频演示 以下演示为手机真机录屏 微信小程序商品系统功能演示       该微信商城系统实现的主要如下图所示 3.1 首页        首页基本构成:1、顶部搜索页;2、轮播图(点击轮播图可跳转);3、导航栏分类(点击可跳转)。4、商品分类图集(点击页面可跳转);

    2024年02月11日
    浏览(43)
  • 微信小程序开发--利用和风天气API实现天气预报小程序

    本来是参照《微信小程序开发实战》做一个天气预报小程序的,实际运行的时候提示错误,code 400,参数错误。说明问题应该出在查询API的语句上,没有返回结果。 查阅后才知道,可能书籍出版时间较早,现在的和风获取天气的API出现了一些调整,具体见实时天气 for API | 和

    2023年04月27日
    浏览(88)
  • uniapp小程序开发|基于微信小程序实现小型比赛自动编排系统

    作者主页:编程指南针 作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库

    2024年02月11日
    浏览(43)
  • jQuery UI -- 日历选择器,高端web前端开发

    2、关于JS的部分,将我们引入的 js 文件: jquery-ui-1.10.3.custom.min.js 替换为: jquery.ui.core.js 和 jquery.ui.datepicker.js 。 jquery-ui-1.10.3.custom.min.js 的大小是223KB,而 jquery.ui.core.js 和 jquery.ui.datepicker.js 的大小一起是84KB。 这样,我们同样能实现一个日期选择器的功能,但是就没有 jQuery U

    2024年04月17日
    浏览(38)
  • 微信小程序开发笔记 进阶篇④——基于iconfont快速实现icon图标显示

    进入iconfont素材网 挑选想要的素材,加入购物车 点击右上角购物车图标,将图标 添加至项目 项目设置,勾选base64 生成代码,下载至本地 有用的是 iconfont.css iconfont.wxss 就是iconfont.cn网站下载的 iconfont.css 改下后缀即可 关键代码在于 text class=\\\"icon-alipay iconfont icon\\\"/text 其中 ico

    2024年02月08日
    浏览(50)
  • 微信小程序实现日历功能、日历转换插件、calendar

    效果图 微信小程序实现交互

    2024年02月13日
    浏览(56)
  • 【前端高频面试题--微信小程序篇】

    🚀 作者 :“码上有前” 🚀 文章简介 :前端高频面试题 🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬 【前端高频面试题–HTML篇】 【前端高频面试题–CSS上篇】 【前端高频面试题–CSS下篇】 【前端高频面试题–JS上篇】 【前端高频面试题–JS下篇】 【前端高频面试题–

    2024年02月20日
    浏览(32)
  • 微信小程序开发——使用Vant组件库van-dropdown-menu实现下拉列表切换页面内容

    请先根据官网要求安装好vant组件库并引入相关组件 1、思路 在页面中使用hidden属性判断是否选中当前信息,再隐藏其他所有内容,仅显示所选内容。 2、代码 wxml部分 js部分 3、实际效果(view模块中的内容可以根据实际开发调整)

    2024年02月14日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包