日期推算/日历（小程序）

微信小程序项目，遇到这么个需求。效果图如下：

每页显示4个周的日期，可点击日期时间段，也可点击左右箭头图标进行日期翻页，这一块其实就是推算日期，把每个周的起始时间和结束时间推算出来，并正确显示出来就行了。默认（未进行左右翻页）第一个周的起始时间为当前时间即可。

var self;
var day = 0;
var page = 0;
var weekArr = [];Page({/*** 页面的初始数据*/data: {arr: [],clickIndex: 0,},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {self = this;self.getWeekArr(day);},/*** 点击日期*/clickItem(e) {self.setData({clickIndex: e.currentTarget.dataset.index,});console.log(e.currentTarget.dataset.week_start + '-' + e.currentTarget.dataset.week_end);},/*** 后退*/left() {page--;day = page * 28;self.getWeekArr(day);},/*** 前进*/right() {page++;day = page * 28;self.getWeekArr(day);},/*** 获取周数据*/getWeekArr(day) {weekArr.splice(0, weekArr.length);for (var i = 0; i < 4; i++) {var week = {'week_start': self.getDay(day),'week_end': self.getDay(day + 6),};weekArr.push(week);day += 7;}self.setData({arr: weekArr,clickIndex: 0,});console.log(self.data.arr);var week = self.data.arr[0];console.log(week.week_start + '-' + week.week_end);},/*** 计算日期*/getDay(day){var date = new Date();var milliseconds = date.getTime() + 1000 * 60 * 60 * 24 * day;date.setTime(milliseconds);var month = date.getMonth() + 1;var day = date.getDate();return month + "." + day;},
})

<view class='container'><image src='../image/zuojiantou.png' class='arrow' bindtap='left'></image><view class='date_container'><view class="item {{clickIndex==index?'active':''}}" wx:for='{{arr}}' wx:key='{{item}}' bindtap='clickItem' data-index='{{index}}' data-week_start='{{item.week_start}}' data-week_end='{{item.week_end}}'>{{item.week_start}}-{{item.week_end}}</view></view><image src='../image/youjiantou.png' class='arrow' bindtap='right'></image>
</view>

.container {display: flex;height: 200rpx;align-content: center;align-items: center;
}.arrow {width: 70rpx;height: 70rpx;
}.date_container {flex: 1;display: flex;align-items: center;
}.item {width: 150rpx;height: 150rpx;font-size: 26rpx;background-color: #f00;text-align: center;color: white;line-height: 150rpx;border-radius: 50%;margin-left: 10rpx;
}.active {width: 160rpx;height: 160rpx;background-color: blue;line-height: 160rpx;
}

——————————————————————————————————————————————————————————

还有一种是日历效果，效果图如下：

具体样式跟调整css来自定义。这里我是以弹窗的形式展示的。

<button type='primary' bindtap='showCalendar'>展示日历</button><view class='mask' hidden='{{show_calendar}}' bindtap='closeCalendar' catchtouchmove='true'><view class='dialog'><view class="calendar"><view class="leftBgView" bindtap="handleCalendar" data-handle="prev"><image src='../image/arrow_left.png' class='arrow'></image></view><view class="centerView">{{cur_year}} 年 {{cur_month}} 月</view><view class="rightBgView" bindtap="handleCalendar" data-handle="next"><image src='../image/arrow_right.png' class='arrow'></image></view></view><view class="weekBgView"><view class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}">{{item}}</view></view><view class="dateBgView"><view class='emptyView' wx:if="{{hasEmptyGrid}}" wx:for="{{empytGrids}}" wx:key="{{index}}"></view><view class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction"><view><view class="datesView {{index==todayIndex?'dateSelectView':''}}">{{item.day}}</view><view class='red_point_container'><view wx:if='{{item.haveMeeting}}' class='red_point'></view></view></view></view></view></view>
</view>

.dialog {position: fixed;top: 0;left: 0;right: 0;background: white;
}.mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.4);
}.calendar {height: 80rpx;font-size: 28rpx;display: flex;align-items: center;justify-content: center;
}.leftBgView {width: 80rpx;height: 80rpx;display: flex;justify-content: center;align-items: center;
}.arrow {width: 40rpx;height: 40rpx;
}.centerView {width: 50%;height: 80rpx;text-align: center;display: flex;align-items: center;justify-content: center;
}.rightBgView {width: 80rpx;height: 80rpx;display: flex;justify-content: center;align-items: center;
}.weekBgView {height: 50rpx;display: flex;align-items: center;
}.weekView {width: 14.2857%;text-align: center;font-size: 28rpx;
}.dateBgView {display: flex;flex-wrap: wrap;
}.emptyView {width: 14.2857%;
}.dateView {width: 14.2857%;height: 80rpx;display: flex;justify-content: center;
}.datesView {height: 56rpx;line-height: 56rpx;text-align: center;font-size: 26rpx;display: flex;justify-content: center;
}.dateSelectView {width: 56rpx;height: 56rpx;border-radius: 50%;line-height: 56rpx;color: white;text-align: center;background-color: green;
}.red_point_container {width: 100%;display: flex;justify-content: center;
}.red_point {width: 10rpx;height: 10rpx;border-radius: 50%;background-color: red;
}

var arr = [];
var self;
Page({data: {hasEmptyGrid: false,cur_year: '',cur_month: '',show_calendar: true,},onLoad(options) {self = this;//1、2、25号添加圆点儿标识arr.push(1);arr.push(2);arr.push(25);self.setNowDate();},dateSelectAction(e) {var cur_day = e.currentTarget.dataset.idx;this.setData({todayIndex: cur_day,show_calendar: true,})console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);},setNowDate() {const date = new Date();const cur_year = date.getFullYear();const cur_month = date.getMonth() + 1;const todayIndex = date.getDate() - 1;const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];this.calculateEmptyGrids(cur_year, cur_month);this.calculateDays(cur_year, cur_month);this.setData({cur_year: cur_year,cur_month: cur_month,weeks_ch,todayIndex,})},getThisMonthDays(year, month) {return new Date(year, month, 0).getDate();},getFirstDayOfWeek(year, month) {return new Date(Date.UTC(year, month - 1, 1)).getDay();},calculateEmptyGrids(year, month) {const firstDayOfWeek = this.getFirstDayOfWeek(year, month);let empytGrids = [];if (firstDayOfWeek > 0) {for (let i = 0; i < firstDayOfWeek; i++) {empytGrids.push(i);}this.setData({hasEmptyGrid: true,empytGrids});} else {this.setData({hasEmptyGrid: false,empytGrids: []});}},calculateDays(year, month) {let days = [];const thisMonthDays = this.getThisMonthDays(year, month);for (let i = 1; i <= thisMonthDays; i++) {days.push({day: i,haveMeeting: arr.indexOf(i) != -1,});}this.setData({days});},handleCalendar(e) {const handle = e.currentTarget.dataset.handle;const cur_year = this.data.cur_year;const cur_month = this.data.cur_month;if (handle === 'prev') {let newMonth = cur_month - 1;let newYear = cur_year;if (newMonth < 1) {newYear = cur_year - 1;newMonth = 12;}this.calculateDays(newYear, newMonth);this.calculateEmptyGrids(newYear, newMonth);this.setData({cur_year: newYear,cur_month: newMonth})} else {let newMonth = cur_month + 1;let newYear = cur_year;if (newMonth > 12) {newYear = cur_year + 1;newMonth = 1;}this.calculateDays(newYear, newMonth);this.calculateEmptyGrids(newYear, newMonth);this.setData({cur_year: newYear,cur_month: newMonth})}},/*** 显示日历*/showCalendar() {self.setData({show_calendar: false,});},/*** 关闭日历*/closeCalendar() {self.setData({show_calendar: true,});}
})

日期推算/日历（小程序）相关推荐

Calendar日历小程序
//有待完善,有点bug package com.sunshine.framework.calendar.model; import java.util.Calendar; /** * * < ...
java gui 日历_Java实现简单日历小程序 Java图形界面小日历开发
今天给大家介绍一下如何用Java swing开发一款简单的小日历,下面我们来看代码: 首先创建一个CalendarBean类,用于基本的日期计算: package other1; import jav ...
又发福利！日历小程序源码
继续分享99个小程序源码. 本期分享的小程序是是一个日历小程序,可以实现上下翻页的.这个小程序是单机版的,导入开发工具就可以运行,开发者可以在此基础上根据业务场景二次开发. 如上图所示,可以展示星期几 ...
Java实现简单的日历小程序之Java图形界面开发小日历
首先创建一个CalendarBean类,用于基本的日期计算: package other1;import java.util.Calendar; public class CalendarBean { ...
java 日历界面_Java实现简单日历小程序 Java图形界面小日历开发
今天给大家介绍一下如何用java swing开发一款简单的小日历,下面我们来看代码: 首先创建一个calendarbean类,用于基本的日期计算: package other1; import jav ...
java简易日历程序报告_Java实现简单日历小程序 Java图形界面小日历开发
今天给大家介绍一下如何用Java swing开发一款简单的小日历,下面我们来看代码: 首先创建一个CalendarBean类,用于基本的日期计算: package other1; import jav ...
不知道有哪些日历小程序的，看这里！
最近很多小伙伴都在问我哪些天气小程序是比较好用的,还有不知道有哪些日历小程序的,看这里啦! 一.天天预约日历天天预约日历简单的来说就是一个备忘录,您只需要在上面挑选一个日期,选择好时间,填上您那天想 ...
python日历小程序_python写的日历小程序
查看: 14785|回复: 262 [作品展示] python写的日历小程序电梯直达发表于 2013-8-19 21:38:32 | 只看该作者 |倒序浏览 |阅读模式马上注册,结交更多好友,享 ...
编程日历小程序，对小程序云开发和生成分享海报的实践
1.起源朋友圈晒的很多的一本日历书<了不起的程序员 2021>,我也买了,很厚,纸质书嘛,现在已经很少看了,加上这是一本日历书,希望是每天都打开看.可实际上的情况是,要么忘记看今天的内容 ...

日期推算/日历（小程序）

日期推算/日历（小程序）相关推荐

最新文章

热门文章