小程序 日历

最新推荐文章于 2021-07-20 18:19:53 发布
最新推荐文章于 2021-07-20 18:19:53 发布
阅读量271 收藏
点赞数
分类专栏： html js 小程序 css 文章标签： 小程序、wxml、js、css、日历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/brake_lzk/article/details/96981181
版权
html 同时被 3 个专栏收录
7 篇文章 0 订阅
订阅专栏
js
6 篇文章 0 订阅
订阅专栏
css
4 篇文章 0 订阅
订阅专栏

 

 

 

 

 

wxml

<view class="content">

<!--年月选择 -->

<view class="preAndNext" wx:if="{{showMonthAndWeek}}">

<view class="jt" data-currentYear="{{currentYear}}" data-currentMonth="{{currentMonth}}" catchtap="toPreMonth">{{'<'}}</view>

<view catchtap="choose">{{currentYear}}-{{currentMonth}}</view>

<view class="jt" data-currentYear="{{currentYear}}" data-currentMonth="{{currentMonth}}" catchtap="toNextMonth">{{'>'}}</view>

</view>

<view class="monthAndWeekBox">

<!-- 显示周、天 -->

<view class="monthAndWeek" wx:if="{{showMonthAndWeek}}">

<view class="weekBox">

<block wx:for="{{weekArr}}" wx:key="index">

<view class="itemBox">{{item.name}}</view>

</block>

</view>

 

<view class="monthBox">

<block wx:for="{{showMonth}}" wx:key="index">

<view class="itemBox {{item.date==nowDate&&currentMonth==nowMonth&&currentYear==nowYear?'nowDate':''}} {{item.month!='current'?'noCurrent':''}}">{{item.date}}</view>

</block>

</view>

</view>

 

<!-- 显示月 -->

<view class="showMonthBox" wx:if="{{showMonthArr}}">

<view class="preAndNext">

<view class="jt" data-currentYear="{{currentYear}}" catchtap="toPreYear">{{'<'}}</view>

<view catchtap="chooseYear">{{currentYear}}</view>

<view class="jt" data-currentYear="{{currentYear}}" catchtap="toNextYear">{{'>'}}</view>

</view>

<view class="showMonth">

<block wx:for="{{monthArr}}" wx:key="index">

<view class="month {{item.name==currentMonth+'月'?'currentMonth':''}}" data-choosemonth="{{item.name}}" catchtap="chooseMonth">{{item.name}}</view>

</block>

</view>

</view>

 

<!--显示年 -->

<view class="showYearBox" wx:if="{{showYearArr}}">

<view class="preAndNext">

<view>{{currentYear}}</view>

</view>

<scroll-view scroll-y scroll-with-animation scroll-into-view="currentMonth" class="showYearitemBox">

<view class="showYear">

<block wx:for="{{allYear}}" wx:key="index">

<view id="{{item==currentYear?'currentMonth':''}}" class="month {{item==currentYear?'currentMonth':''}}" data-chooseyear="{{item}}" catchtap="chooseYearItem">{{item}}</view>

</block>

</view>

</scroll-view>

</view>

 

</view>

</view>

 

css

 

.preAndNext{

display: flex;

width: 100%;

justify-content: center;

background: #000;

border-radius: 10rpx;

margin: 20rpx 0;

padding: 20rpx;

box-sizing: border-box;

color: #fff;

}

.jt{

padding: 0 30rpx;

}

.monthAndWeekBox{

width: 100%;

background: #000;

border-radius: 10rpx;

padding: 20rpx;

box-sizing: border-box;

}

.monthAndWeek{

width: 100%;

background: #fff;

border-radius: 10rpx;

}

.itemBox{

width: 14%;

text-align: center;

padding: 10rpx;

margin: 2rpx 0;

box-sizing: border-box;

}

.weekBox{

display: flex;

justify-content: space-around;

}

 

.monthBox{

display: flex;

justify-content: space-around;

flex-wrap: wrap;

}

.nowDate{

background: #FF671D;

color: #fff;

border-radius: 50rpx;

}

.noCurrent{

background: #efefef;

}

 

.showMonthBox{

width: 100%;

}

.itemYear{

width: 100%;

padding: 10rpx 0;

text-align: center;

}

.showMonth{

width: 100%;

background: #fff;

border-radius: 10rpx;

display: flex;

flex-wrap: wrap;

justify-content: space-around;

}

.month{

width: 25%;

padding: 50rpx 0;

text-align: center;

}

.currentMonth{

background: #3396FB;

border-radius: 10rpx;

color: #fff;

}

.showYearitemBox{

width: 100%;

height: 590rpx;

background: #fff;

border-radius: 10rpx;

}

.showYear{

width: 100%;

display: flex;

flex-wrap: wrap;

 

}

 

 

js

Page({

 

/**

* 页面的初始数据

*/

data: {

showMonth:[],

weekArr: [

{ name: '一', id: 'Mon' },

{ name: '二', id: 'Tue' },

{ name: '三', id: 'Wed' },

{ name: '四', id: 'Thu' },

{ name: '五', id: 'Fri' },

{ name: '六', id: 'Sat' },

{name:'日',id:'Sun'}

],

showMonthAndWeek:true,

showMonthArr:false,

showYearArr:false,

monthArr:[

{ name: '1月', id: 'Jan' },

{ name: '2月', id: 'Feb' },

{ name: '3月', id: 'Mar' },

{ name: '4月', id: 'Apr' },

{ name: '5月', id: 'May' },

{ name: '6月', id: 'Jun' },

{ name: '7月', id: 'Jul' },

{ name: '8月', id: 'Aug' },

{ name: '9月', id: 'Sept' },

{ name: '10月', id: 'Oct' },

{ name: '11月', id: 'Nov' },

{ name: '12月', id: 'Dec' },

]

},

 

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

let nowTime=new Date()

let currentYear=nowTime.getFullYear()

let currentMonth=nowTime.getMonth()+1

let nowDate = nowTime.getDate()

 

let minYear = currentYear - 100

let maxYear = currentYear + 100

let allYear=[]

for(let i=minYear;i<=maxYear;i++){//计算当前年的前后100年的数组

allYear.push(i)

}

this.setData({

allYear: allYear,

currentYear: currentYear,

currentMonth: currentMonth,

nowDate: nowDate,//当前日

nowMonth: currentMonth,//当前月

nowYear: currentYear,//当前年

})

 

// console.log('有几天', this.getDateLen(this.data.currentYear, this.data.currentMonth))

// console.log('周几', this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth))

// console.log('当月数据', this.getCurrentArr())

// console.log('上月', this.preMonth(this.data.currentYear, this.data.currentMonth))

// console.log('上月剩余', this.getPreArr())

// console.log('下月', this.nextMonth(this.data.currentYear, this.data.currentMonth))

// console.log('下月剩余', this.getNextArr())

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth=showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

getDateLen(year,month){//获得某年某月总共多少天

let actualMonth=month-1;

let timeDistance = + new Date(year, month) - + new Date(year, actualMonth);

return timeDistance / (1000*60*60*24)

 

},

 

getFirstDateWeek(year,month){//获取某月1号是周几

let week = new Date(year, month - 1, 1).getDay()

if (week==0){

week=7

}

return week

},

 

getCurrentArr() {//获取当月数据，返回数组

let currentMonthDateLen = this.getDateLen(this.data.currentYear, this.data.currentMonth) // 获取当月天数

let currentMonthDateArr = [] // 定义空数组

 

if (currentMonthDateLen > 0) {

for (let i = 1; i <= currentMonthDateLen; i++) {

currentMonthDateArr.push({

month: 'current', // 只是为了增加标识，区分上下月

date: i

})

}

}

this.setData({

currentMonthDateLen

})

return currentMonthDateArr

},

 

preMonth(year,month){//上月 年、月

if(month==1){

return{

year:--year,

month:12

}

}else{

return{

year:year,

month:--month

}

}

},


 

getPreArr() {// 获取当月中，上月多余数据，返回数组

let preMonthDateLen = (this.getFirstDateWeek(this.data.currentYear, this.data.currentMonth))-1 // 当月1号是周几-1 == 上月残余天数

let preMonthDateArr = [] // 定义空数组

 

if (preMonthDateLen > 0) {

let { year, month } = this.preMonth(this.data.currentYear, this.data.currentMonth) // 获取上月 年、月

 

let date = this.getDateLen(year, month) // 获取上月天数

 

for (let i = 0; i < preMonthDateLen; i++) {

preMonthDateArr.unshift({ // 尾部追加

month: 'pre', // 只是为了增加标识，区分当、下月

date: date

})

date--

}

}

 

this.setData({

preMonthDateLen

})

 

return preMonthDateArr

},


 

nextMonth(year, month) { // 下月 年、月

if (month == 12) {

return {

year: ++year,

month: 1

}

} else {

return {

year: year,

month: ++month

}

}

},


 

getNextArr() {// 获取当月中，下月多余数据，返回数组

let nextMonthDateLen = 42 - this.data.preMonthDateLen - this.data.currentMonthDateLen // 下月多余天数

let nextMonthDateArr = [] // 定义空数组

if (nextMonthDateLen > 0) {

for (let i = 1; i <= nextMonthDateLen; i++) {

nextMonthDateArr.push({

month: 'next',// 只是为了增加标识，区分当、上月

date: i

})

}

}

 

return nextMonthDateArr

},

 

toPreMonth(e){//点击上一月

let currentyear = e.currentTarget.dataset.currentyear

let currentmonth = e.currentTarget.dataset.currentmonth

let timer = this.preMonth(currentyear, currentmonth)

this.setData({

currentYear: timer.year,

currentMonth:timer.month,

showMonth:[]

})

 

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth = showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

toNextMonth(e){//点击下一月

let currentyear = e.currentTarget.dataset.currentyear

let currentmonth = e.currentTarget.dataset.currentmonth

let timer = this.nextMonth(currentyear, currentmonth)

this.setData({

currentYear: timer.year,

currentMonth: timer.month,

showMonth:[]

})

 

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth = showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

choose(){//选择年月

this.setData({

showMonthAndWeek:false,//隐藏周月

showMonthArr:true,//显示月

})

},

 

chooseMonth(e){//选择月份后

let choosemonth = e.currentTarget.dataset.choosemonth

choosemonth = choosemonth.substring(0,(choosemonth.indexOf('月')))

 

this.setData({

currentMonth: choosemonth,

showMonthAndWeek: true,//显示周月

showMonthArr: false,//，隐藏月

showMonth:[]

})

 

let getPreArr = this.getPreArr()//上月剩余

let getCurrentArr = this.getCurrentArr()//当月数据

let getNextArr = this.getNextArr()//下月剩余

let showMonth = this.data.showMonth//展示数据

showMonth = showMonth.concat(getPreArr)

showMonth = showMonth.concat(getCurrentArr)

showMonth = showMonth.concat(getNextArr)

this.setData({

showMonth: showMonth

})

},

 

toPreYear(e){//上一年

let currentyear = e.currentTarget.dataset.currentyear

let nowYear = this.data.nowYear//当前年份

currentyear = --currentyear

if (currentyear <= nowYear-100){//小于100年以前

wx.showToast({

title: '无更多数据',

icon:'none'

})

return

}

this.setData({

currentYear: currentyear,

})

},

 

toNextYear(e) {//上一年

let currentyear = e.currentTarget.dataset.currentyear

currentyear = ++currentyear

if (currentyear >= nowYear + 100) {//大于100年以后

wx.showToast({

title: '无更多数据',

icon: 'none'

})

return

}

this.setData({

currentYear: currentyear,

})

},

 

chooseYear(){//选择年

this.setData({

showMonthAndWeek: false,//隐藏周月

showMonthArr: false,//隐藏月

showYearArr:true,//显示年

})

},

 

chooseYearItem(e){//选择年后

let chooseyear = e.currentTarget.dataset.chooseyear

this.setData({

currentYear: chooseyear,

showMonthAndWeek: false,//隐藏周月

showMonthArr: true,//显示月

showYearArr: false,//隐藏年

})

 

}

 

})

brake_lzk
关注
专栏目录
小程序 - 日历
01-04
以日历形式来展示当前日期，可查看上个月和下个月的日期
小程序日历
m0_53912016的博客
05-23 466
日历组件 自定义滑动日历组件 小程序折叠伸展与滑动日历
日历小程序
ziqin1984的专栏
10-20 892
/* * 因为Date类的大多数方法都已经废除了，所以Java提供了一个罗马日历类来取代Date类 * * **/import java.util.*;public class CalendarTest { public static void main(String[] args) { GregorianCalendar d = new Gregor
小程序日历组件，可显示农历！休假补班！自定义提醒
02-27
总结，构建一个功能完备的小程序日历组件，需要涉及农历转换、休假补班逻辑、自定义提醒等功能，并且需要良好的用户体验设计。通过合理的数据结构和逻辑处理，我们可以创建一个既实用又美观的日历组件，满足用户多样...
微信小程序日历日期选择器.zip
06-02
本项目“微信小程序日历日期选择器”提供了一种定制化解决方案，允许开发者根据需求调整显示的月份和可选日期范围，并且能够结合价格信息进行显示。 1. **微信小程序基础**： 微信小程序是腾讯公司推出的一种轻量...
微信小程序日历组件（可多选单选）
01-13
微信小程序日历组件是开发微信小程序时常用的一种交互元素，它允许用户在日历视图中选择特定日期或时间段，通常用于预约、日程管理、时间选择等场景。本组件的特点在于其支持单选和多选模式，可以方便地进行日期操作...
微信小程序日历弹窗选择器代码实例
10-17
从给出的内容来看，微信小程序日历弹窗选择器代码实例展示了如何通过WXML（微信小程序标记语言）、WXSS（微信小程序样式表）和JavaScript来构建一个日历弹窗选择器。WXML是用于描述页面结构的标记语言，类似于HTML，...
微信小程序日历（微信小程序日历）
07-21
该小程序主要是用于实现小程序日历，功能主要为滑动一次显示一次数据。 该小程序主要是用于实现小程序日历，功能主要为滑动一次显示一次数据。 该小程序主要是用于实现小程序日历，功能主要为滑动一次显示一次数据。
微信小程序日历
空&白的博客
10-17 576
首先，做完的页面展示 html <!-- 签到 --> <view class="sign"> <view class='wrap'> <!-- 显示年月 --> <view> <view class='selectDate'> <view class='goleft' ...
一个日历小程序.
zhkza99c的专栏
06-05 1289
#include#define Sunday 0#define Monday 1#define Tuesday 2#define Wednesday 3#define Thursday 4#define Friday 5#define Saturday 6void GiveInstructions(void);/*输出介绍*/int GetYearFromUser(void);/*用户输入年份*/
微信小程序 -- 日历
Wang_MengHan的博客
03-11 260
效果: wxml: <!-- 日历 --> <view class="myReport-calendar" style="background-image:url('/imgs/calendar.png');background-size: 100%;"> <view class="calendar"> <view class="selectDate">
小程序-日历（普通版）
02-23
这是一个基于小程序开发的普通版日历，可以像我们平时查看的日历一样显示日历表在小程序里，展示日历。
小程序插件-预约日历插件-微信小程序日历插件
01-26
小程序插件-预约日历组件 已经审核通过 APPID：wx84472d5652384779 版本号：1.0.0 名称：预约日历 代码片段链接 务必填写已经添加该插件的APPID wechatide://minicode/HbH9Yim56XZy 插件效果 申请插件 在小程序管理...
小程序日历组件
weixin_43090018的博客
03-03 1834
先看一下效果图 本篇文章只是在原文的基础上进行小修改和代码的部分优化，里面注释我已经写的很清楚了，这个组件可以用来做签到，买火车票那种的组件等等；屁话不多说，直接上代码 ** 子组件代码 ** 组件wxml代码 <view class="calendar-main-container {{isBtnShowModal===0?'calendar-transit':''}} {{isShowModal?'':'calendar-unactive'}}"> <!-- 年月份、左右箭
小程序-日历（状态版）
02-23
这是基于小程序日历普通版本日历的前提下，增加的一个日历之日对应的日状态的日历组件
微信小程序-微信小程序－日历
08-07
微信小程序－日历 说明： 实现日历功能，包括阳历和阴历。 数据接口: 使用本地数据 目录结构： pages — 存放项目页面文件 utils — 存放格式化文件 开发环境： 微信web开发者工具 v0.11.122100 项目截图： https://www.getweapp.com/project?projectId=5892a2dc52e1e8733dc567ea
小程序之日历实现
zhw189sy807的博客
07-20 1088
前言：最近刚学习2周小程序，写了个日历练练手，对之前学习的知识进行复习。 代码 主要使用到的知识: wxml 字符转义 css 的flex布局 js 的 Date 对象 setData 数组指定item更新 wxml中的字符转义 字符转义可以使用decode='true' <text decode='true'> &lt; </text> css 的flex布局 区域1 整体使用 flex-direction: column 使组件垂直显示 <view
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值