微信小程序自定义可滑动日历界面


Posted in Javascript onDecember 28, 2018

本文实例为大家分享了微信小程序可滑动日历界面的具体代码,供大家参考,具体内容如下

参考某个博主的自定义控件做了一些改动,希望这篇博客能帮助需要的人。

WXML

<view class='container'>
<view class='month flex m-around'>
 <view class='arrow' bindtap='prevMonth'>《 </view>
 <view class='year-and-month'>
  <picker mode="date" value="{{date}}" start="2015-09" end="2020-09" fields='month' bindchange="bindDateChange">
  <view>
   {{date}}
  </view>
  </picker>
 </view>
 <view class='arrow' bindtap='nextMonth'> 》</view>
</view>
<view class='calendar flex column s-center'>
 <view class='week-row flex m-around'>
 <view class='grid' wx:for="{{week}}" wx:key='item'>{{item}}</view>
 </view>
 <swiper class='swpier-box' circular="true" current="{{swiperIndex}}" bindchange='swiperChange'>
 <swiper-item class='flex m-around days-table '>
  <view wx:for="{{calendar.first}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 <swiper-item class='flex m-around days-table '>
  <view wx:for="{{calendar.second}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' data-test='{{(year + "-" +month + "-" + day)}}' bindtap='bindDayTap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 <swiper-item class='flex m-around days-table'>
  <view wx:for="{{calendar.third}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 <swiper-item class='flex m-around days-table '>
  <view wx:for="{{calendar.fourth}}" wx:for-item='x' wx:key='x.date'
  class='grid {{x.month === month?"":"notCurrent"}} {{x.date === today?"today":""}} {{x.date == beSelectDate ? "choice":""}}' data-month='{{x.month}}' data-day='{{x.day}}' data-date='{{x.date}}' bindtap='bindDayTap'>
  <view>{{x.date === today?'今天':x.day}}</view>
  </view>
 </swiper-item>
 </swiper>
</view>
</view>

CSS

/* pages/calendar/calendar.wxss */
 .container {
 height: 100vh;

 background-color: #393E44;
}
.days-table {
 flex-wrap: wrap;
 align-content: flex-start;
}
.calendar{
 position: fixed;
 z-index:10000;
 background: #393E44;
 
}
.grid {
 width: 107.14rpx;
 height: 100rpx;
 text-align: center;
 line-height: 100rpx;
 font-size:.7rem;
 color:#fff;
}
.today {
 color: #88a1fd;
}
.grid view {
 height:85rpx;
 line-height: 85rpx;
 width:85rpx;
}
.choice view{
 border-radius: 50%;
 background: #88a1fd;
 background-position:center;
 color: white;
}
/* 非本月日期 */
.notCurrent {
 color: silver;
}
.day-hover {
 background: red;
}
.swpier-box {
 height: 550rpx;
 width: 100%;
}
.arrow {
 width: 100rpx;
 color: #88a1fd;
 text-align: center;
}
.year-and-month{
 color: #88a1fd;
}

.flex {
 display: flex;
}
/* 轴向 */
.column {
 flex-direction: column;
}
/* 主轴方向 */
.m-start {
 justify-content: flex-start;
}

.m-end {
 justify-content: flex-end;
}

.m-around {
 justify-content: space-around;
}
.m-between {
 justify-content: space-between;
}
.m-center {
 justify-content: center;
}
/* 侧轴方向 */
.s-start {
 align-items: flex-start;
}
.s-end {
 align-items: flex-end;
}

.s-around {
 align-items: space-around;
}
.s-between {
 align-items: space-between;
}
.s-center {
 align-items: center;
}

JS

// pages/calendar/calendar.js

'use strict';

let choose_year = null,
 choose_month = null;
const conf = {
 data: {
 day: '',
 year: '',
 month: '',
 date: '2017-01',
 today: '',
 week: ['日', '一', '二', '三', '四', '五', '六'],
 calendar: {
  first: [],
  second: [],
  third: [],
  fourth: []
 },
 swiperMap: ['first', 'second', 'third', 'fourth'],
 swiperIndex: 1,
 showCaldenlar: false
 },
 onLoad() {
 const date = new Date()
  , month = this.formatMonth(date.getMonth() + 1)
  , year = date.getFullYear()
  , day = this.formatDay(date.getDate())
  , today = `${year}-${month}-${day}`
 let calendar = this.generateThreeMonths(year, month)

 this.setData({
  calendar,
  month,
  year,
  day,
  today,
  beSelectDate: today,
  date: `${year}-${month}`
 })
 },

 showCaldenlar() {
 this.setData({
  showCaldenlar: !this.data.showCaldenlar
 })
 },
 /**
 * 
 * 左右滑动
 * @param {any} e 
 */
 swiperChange(e) {
 const lastIndex = this.data.swiperIndex
  , currentIndex = e.detail.current
 let flag = false
  , { year, month, day, today, date, calendar, swiperMap } = this.data
  , change = swiperMap[(lastIndex + 2) % 4]
  , time = this.countMonth(year, month)
  , key = 'lastMonth'

 if (lastIndex > currentIndex) {
  lastIndex === 3 && currentIndex === 0
  ? flag = true
  : null
 } else {
  lastIndex === 0 && currentIndex === 3
  ? null
  : flag = true
 }
 if (flag) {
  key = 'nextMonth'
 }

 year = time[key].year
 month = time[key].month
 date = `${year}-${month}`
 day = ''
 if (today.indexOf(date) !== -1) {
  day = today.slice(-2)
 }

 time = this.countMonth(year, month)
 calendar[change] = null
 calendar[change] = this.generateAllDays(time[key].year, time[key].month)

 this.setData({
  swiperIndex: currentIndex,
  //文档上不推荐这么做,但是滑动并不会改变current的值,所以随之而来的计算会出错
  year,
  month,
  date,
  day,
  calendar
 })
 },
 /**
 * 
 * 点击切换月份,生成本月视图以及临近两个月的视图
 * @param {any} year 
 * @param {any} month 
 * @returns {object} calendar
 */
 generateThreeMonths(year, month) {
 let { swiperIndex, swiperMap, calendar } = this.data
  , thisKey = swiperMap[swiperIndex]
  , lastKey = swiperMap[swiperIndex - 1 === -1 ? 3 : swiperIndex - 1]
  , nextKey = swiperMap[swiperIndex + 1 === 4 ? 0 : swiperIndex + 1]
  , time = this.countMonth(year, month)
 delete calendar[lastKey]
 calendar[lastKey] = this.generateAllDays(time.lastMonth.year, time.lastMonth.month)
 delete calendar[thisKey]
 calendar[thisKey] = this.generateAllDays(time.thisMonth.year, time.thisMonth.month)
 delete calendar[nextKey]
 calendar[nextKey] = this.generateAllDays(time.nextMonth.year, time.nextMonth.month)
 return calendar
 },
 bindDayTap(e) {
 let { month, year } = this.data
  , time = this.countMonth(year, month)
  , tapMon = e.currentTarget.dataset.month
  , day = e.currentTarget.dataset.day
 if (tapMon == time.lastMonth.month) {
  this.changeDate(time.lastMonth.year, time.lastMonth.month)
 } else if (tapMon == time.nextMonth.month) {
  this.changeDate(time.nextMonth.year, time.nextMonth.month)
 } else {
  this.setData({
  day
  })
 }
 let beSelectDate = e.currentTarget.dataset.date;
 this.setData({
  beSelectDate,
  showCaldenlar: false
 })
 },
 bindDateChange(e) {
 if (e.detail.value === this.data.date) {
  return
 }

 const month = e.detail.value.slice(-2)
  , year = e.detail.value.slice(0, 4)

 this.changeDate(year, month)
 },
 prevMonth(e) {
 let { year, month } = this.data
  , time = this.countMonth(year, month)
 this.changeDate(time.lastMonth.year, time.lastMonth.month)
 },
 nextMonth(e) {
 let { year, month } = this.data
  , time = this.countMonth(year, month)
 this.changeDate(time.nextMonth.year, time.nextMonth.month)
 },
 /**
 * 
 * 直接改变日期
 * @param {any} year 
 * @param {any} month 
 */
 changeDate(year, month) {
 let { day, today } = this.data
  , calendar = this.generateThreeMonths(year, month)
  , date = `${year}-${month}`
 date.indexOf(today) === -1
  ? day = '01'
  : day = today.slice(-2)

 this.setData({
  calendar,
  day,
  date,
  month,
  year,
 })
 },
 /**
 * 
 * 月份处理
 * @param {any} year 
 * @param {any} month 
 * @returns 
 */
 countMonth(year, month) {
 let lastMonth = {
  month: this.formatMonth(parseInt(month) - 1)
 }
  , thisMonth = {
  year,
  month,
  num: this.getNumOfDays(year, month)
  }
  , nextMonth = {
  month: this.formatMonth(parseInt(month) + 1)
  }

 lastMonth.year = parseInt(month) === 1 && parseInt(lastMonth.month) === 12
  ? `${parseInt(year) - 1}`
  : year + ''
 lastMonth.num = this.getNumOfDays(lastMonth.year, lastMonth.month)
 nextMonth.year = parseInt(month) === 12 && parseInt(nextMonth.month) === 1
  ? `${parseInt(year) + 1}`
  : year + ''
 nextMonth.num = this.getNumOfDays(nextMonth.year, nextMonth.month)
 return {
  lastMonth,
  thisMonth,
  nextMonth
 }
 },
 currentMonthDays(year, month) {
 const numOfDays = this.getNumOfDays(year, month)
 return this.generateDays(year, month, numOfDays)
 },
 /**
 * 生成上个月应显示的天
 * @param {any} year 
 * @param {any} month 
 * @returns 
 */
 lastMonthDays(year, month) {
 const lastMonth = this.formatMonth(parseInt(month) - 1)
  , lastMonthYear = parseInt(month) === 1 && parseInt(lastMonth) === 12
  ? `${parseInt(year) - 1}`
  : year
  , lastNum = this.getNumOfDays(lastMonthYear, lastMonth) //上月天数
 let startWeek = this.getWeekOfDate(year, month - 1, 1) //本月1号是周几
  , days = []
 if (startWeek == 7) {
  return days
 }

 const startDay = lastNum - startWeek

 return this.generateDays(lastMonthYear, lastMonth, lastNum, { startNum: startDay, notCurrent: true })
 },
 /**
 * 生成下个月应显示天
 * @param {any} year 
 * @param {any} month
 * @returns 
 */
 nextMonthDays(year, month) {
 const nextMonth = this.formatMonth(parseInt(month) + 1)
  , nextMonthYear = parseInt(month) === 12 && parseInt(nextMonth) === 1
  ? `${parseInt(year) + 1}`
  : year
  , nextNum = this.getNumOfDays(nextMonthYear, nextMonth) //下月天数
 let endWeek = this.getWeekOfDate(year, month)  //本月最后一天是周几
  , days = []
  , daysNum = 0
 if (endWeek == 6) {
  return days
 } else if (endWeek == 7) {
  daysNum = 6
 } else {
  daysNum = 6 - endWeek
 }
 return this.generateDays(nextMonthYear, nextMonth, daysNum, { startNum: 1, notCurrent: true })
 },
 /**
 * 
 * 生成一个月的日历
 * @param {any} year 
 * @param {any} month 
 * @returns Array
 */
 generateAllDays(year, month) {
 let lastMonth = this.lastMonthDays(year, month)
  , thisMonth = this.currentMonthDays(year, month)
  , nextMonth = this.nextMonthDays(year, month)
  , days = [].concat(lastMonth, thisMonth, nextMonth)
 return days
 },
 /**
 * 
 * 生成日详情
 * @param {any} year 
 * @param {any} month 
 * @param {any} daysNum 
 * @param {boolean} [option={
 * startNum:1,
 * grey: false
 * }] 
 * @returns Array 日期对象数组
 */
 generateDays(year, month, daysNum, option = {
 startNum: 1,
 notCurrent: false
 }) {
 const weekMap = ['一', '二', '三', '四', '五', '六', '日']
 let days = []
 for (let i = option.startNum; i <= daysNum; i++) {
  let week = weekMap[new Date(year, month - 1, i).getUTCDay()]
  let day = this.formatDay(i)
  days.push({
  date: `${year}-${month}-${day}`,
  event: false,
  day,
  week,
  month,
  year
  })
 }
 return days
 },
 /**
 * 
 * 获取指定月第n天是周几 |
 * 9月第1天: 2017, 08, 1 |
 * 9月第31天:2017, 09, 0 
 * @param {any} year 
 * @param {any} month 
 * @param {number} [day=0] 0为最后一天,1为第一天
 * @returns number 周 1-7, 
 */
 getWeekOfDate(year, month, day = 0) {
 let dateOfMonth = new Date(year, month, 0).getUTCDay() + 1;
 dateOfMonth == 7 ? dateOfMonth = 0 : '';
 return dateOfMonth;
 },
 /**
 * 
 * 获取本月天数
 * @param {number} year 
 * @param {number} month 
 * @param {number} [day=0] 0为本月0最后一天的
 * @returns number 1-31
 */
 getNumOfDays(year, month, day = 0) {
 return new Date(year, month, day).getDate()
 },
 /**
 * 
 * 月份处理
 * @param {number} month 
 * @returns format month MM 1-12
 */
 formatMonth(month) {
 let monthStr = ''
 if (month > 12 || month < 1) {
  monthStr = Math.abs(month - 12) + ''
 } else {
  monthStr = month + ''
 }
 monthStr = `${monthStr.length > 1 ? '' : '0'}${monthStr}`
 return monthStr
 },
 formatDay(day) {
 return `${(day + '').length > 1 ? '' : '0'}${day}`
 }
}
Page(conf)

效果图

微信小程序自定义可滑动日历界面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
javascript面向对象快速入门实例
Jan 13 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
10行代码实现微信小程序滑动tab切换
Dec 28 #Javascript
微信小程序实现复选框效果
Dec 28 #Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 #Javascript
微信小程序下拉框组件使用方法详解
Dec 28 #Javascript
微信小程序实现星级评价效果
Dec 28 #Javascript
微信小程序实现日历效果
Dec 28 #Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 #Javascript
You might like
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
jQuery窗口、文档、网页各种高度的精确理解
2014/07/02 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
javascript实现表单验证
2016/01/29 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
JavaScript+Java实现HTML页面转为PDF文件保存的方法
2016/05/30 Javascript
基于jQuery实现简单人工智能聊天室
2017/02/10 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
小程序实现展开/收起的效果示例
2018/09/22 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
Python随机生成一个6位的验证码代码分享
2015/03/24 Python
Python 多进程和数据传递的理解
2017/10/09 Python
使用Python抓取豆瓣影评数据的方法
2018/10/17 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
全民健身日活动方案
2014/01/29 职场文书
运动会方阵口号
2014/06/07 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Selenium浏览器自动化如何上传文件
2022/04/06 Python