微信小程序自定义带价格显示日历效果


Posted in Javascript onDecember 29, 2018

本文实例为大家分享了微信小程序自定义日历效果的具体代码,供大家参考,具体内容如下

微信小程序自定义带价格显示日历效果

JS代码:

var Moment = require("../../utils/moment.js");
var DATE_YEAR = new Date().getFullYear();
var DATE_MONTH = new Date().getMonth() + 1;
var DATE_DAY = new Date().getDate();
Page({
 data: {
 year: '',
 month: '',
 day: '',
 days: {},
 systemInfo: {},
 weekStr: ['日', '一', '二', '三', '四', '五', '六'],
 checkDate:[]
 },
 onLoad: function(options) {
 var _this = this;
 let now = new Date();
 let year = now.getFullYear();
 let month = now.getMonth() + 1;
 // 页面初始化 options为页面跳转所带来的参数
 this.createDateListData();
 this.setData({
  year: year,
  month: month
 })
 wx.getSystemInfo({
  success: function(res) {
  _this.setData({
   systemInfo: res,
  });
  }
 })
 },
 onReady: function() {
 // 页面渲染完成
 },
 onShow: function() {
 
 },
 
 /**创建日历数据 */
 createDateListData: function(setYear, setMonth) {
 //全部时间的月份都是按0~11基准,显示月份才+1
 let dateArr = []; //需要遍历的日历数组数据
 let arrLen = 0; //dateArr的数组长度
 let now = setYear ? new Date(setYear, setMonth) : new Date();
 let year = setYear || now.getFullYear();
 let nextYear = 0;
 let month = setMonth || now.getMonth();
 //没有+1方便后面计算当月总天数
 let nextMonth = (month + 1) > 11 ? 1 : (month + 1);
 console.log("当前选中月nextMonth:" + nextMonth);
 //目标月1号对应的星期
 let startWeek = this.getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay(); 
 console.log("目标月1号对应的星期startWeek:" + startWeek);
 //获取目标月有多少天
 let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate();   
 console.log("获取目标月有多少天dayNums:" + dayNums);
 let obj = {};
 let num = 0;
 if (month + 1 > 11) {
  nextYear = year + 1;
  dayNums = new Date(nextYear, nextMonth, 0).getDate();
 }
 for (var j = -startWeek + 1; j <= dayNums; j++) {
  var tempWeek = -1;
  if (j > 0) {
  tempWeek = this.getWeek(year, nextMonth, j);
  //console.log(year + "年" + month + "月" + j + "日" + "星期" + tempWeek);
  }
  var clazz = '';
  if (tempWeek == 0 || tempWeek == 6)
  clazz = 'week'
  if (j < DATE_DAY && year == DATE_YEAR && nextMonth == DATE_MONTH)
  //当天之前的日期不可用
  clazz = 'unavailable ' + clazz;
  else
  clazz = '' + clazz
  /**如果当前日期已经选中,则变色 */
  var date = year + "-" + nextMonth + "-" + j;
  var index = this.checkItemExist(this.data.checkDate, date);
  if (index != -1) {
  clazz = clazz + ' active';
  } 
  dateArr.push({
  day: j,
  class: clazz,
  amount:'¥99.8'
  })
 }
 this.setData({
  days: dateArr
 })
 },
 /**
 * 上个月
 */
 lastMonthEvent:function(){
 //全部时间的月份都是按0~11基准,显示月份才+1
 let year = this.data.month - 2 < 0 ? this.data.year - 1 : this.data.year;
 let month = this.data.month - 2 < 0 ? 11 : this.data.month - 2;
 this.setData({
  year: year,
  month: (month + 1)
 })
 this.createDateListData(year, month);
 },
 /**
 * 下个月
 */
 nextMonthEvent:function(){
 //全部时间的月份都是按0~11基准,显示月份才+1
 let year = this.data.month > 11 ? this.data.year + 1 : this.data.year;
 let month = this.data.month > 11 ? 0 : this.data.month;
 this.setData({
  year: year,
  month: (month + 1)
 })
 this.createDateListData(year, month);
 },
 /*
 * 获取月的总天数
 */
 getTotalDayByMonth: function(year, month) {
 month = parseInt(month, 10);
 var d = new Date(year, month, 0);
 return d.getDate();
 },
 /*
 * 获取月的第一天是星期几
 */
 getWeek: function(year, month, day) {
 var d = new Date(year, month - 1, day);
 return d.getDay();
 },
 /**
 * 点击日期事件
 */
 onPressDateEvent: function(e) {
 var {
  year,
  month,
  day,
  amount
 } = e.currentTarget.dataset;
 console.log("当前点击的日期:" + year + "-" + month + "-" + day);
 //当前选择的日期为同一个月并小于今天,或者点击了空白处(即day<0),不执行
 if ((day < DATE_DAY && month == DATE_MONTH) || day <= 0)
  return;
 
 this.renderPressStyle(year, month, day, amount);
 },
 renderPressStyle: function (year, month, day, amount) {
 var days = this.data.days;
 //渲染点击样式
 for (var j = 0; j < days.length; j++) {
  var tempDay = days[j].day;
  if (tempDay == day) {
  var date = year + "-" + month + "-" + day;
  var obj = {
   day: date,
   amount: amount
  };
  var checkDateJson = this.data.checkDate;
  var index = this.checkItemExist(checkDateJson, date);
  if (index == -1) {
   checkDateJson.push(obj);
   days[j].class = days[j].class + ' active';
  } else {
   checkDateJson.splice(index, 1);
   days[j].class = days[j].class.replace('active',' ');
  }
  this.setData({
   checkDate: checkDateJson
  })
  console.log(JSON.stringify(this.data.checkDate));
  break;
  }
 }
 this.setData({
  days: days
 });
 
 },
 /**检查数组中是否存在该元素 */
 checkItemExist: function (arr,value){
 for (var i = 0; i < arr.length; i++) {
  if (value === arr[i].day) {
  return i;
  }
 }
 return -1;
 }
})

WXML代码

<view class="date-year-month"><image bindtap='lastMonthEvent' src='../../image/left.png'></image>{{year}}年{{month}}月<image src='../../image/right.png' bindtap='nextMonthEvent' ></image></view>
 
<view ></view>
<view>
<view style="background:#F5F5F5;font-size: 30rpx; ">
 <view class="layout-flex row" style="background-color: #F5F5F5;">
 <text class="date-week" style="width:{{systemInfo.windowWidth/7-10}}px;height:20px" wx:for="{{weekStr}}" wx:key="{{index}}">
     <text wx:if="{{item !=='日' && item !=='六'}}">{{item}}</text>
 <text wx:if="{{item ==='日' || item ==='六'}}" class="week">{{item}}</text>
 </text>
 </view>
</view>
 <view class="layout-flex row" style="flex-wrap: wrap;margin-top:30rpx;">
 <view class="date-day {{item.day<=0?'bgwhite':item.class}}" style="width:{{systemInfo.windowWidth/7-10}}px;height:{{systemInfo.windowWidth/7}}px;" data-year="{{year}}" data-month="{{month}}" data-day="{{item.day}}" data-amount="{{item.amount}}"bindtap="onPressDateEvent"
  wx:for="{{days}}" wx:key="{{index}}">
  <view class='item-days'>
  <text>{{item.day>0?(item.daytext?item.daytext:item.day):''}}</text>
  <text class='amount' wx:if='{{item.day>0}}'>{{item.amount}}</text>
  
  </view>
 </view>
 </view>
</view>

WXSS代码

/* pages/dateSelect/dateSelect.wxss */
 
.date-day {
 display: flex;
 padding: 5px;
 text-align: center;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}
 
.date-day.bgitem {
 background-color: #d8ecf9;
}
 
.date-day.active {
 background: #099fde;
 color: #fff;
}
 
.date-day.unavailable {
 color: #aaa;
}
 
.date-week {
 display: flex;
 justify-content: center;
 align-content: center;
 margin: 5px;
}
 
.week {
 color: #099fde;
}
 
.row {
 display: flex;
 flex-direction: row;
}
 
.item-days {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 font-size: 35rpx;
}
.amount{
 font-size: 30rpx;
}
.bgwhite {
 background-color: #fff;
}
 
.date-year-month {
 text-align: center;
 font-size: 35rpx;
 height: 100rpx;
 line-height: 100rpx;
 display: flex;
 justify-content: center;
 align-items: center;
}
.date-year-month image{
 height: 50rpx;
 width: 50rpx;
 margin: 0 30rpx;
}

moment.js

var Moment = function (date) {
 var date;
 if (date)
 this.date = new Date(date);
 else
 this.date = new Date();
 return this;
};
/**  
 * 对Date的扩展,将 Date 转化为指定格式的String  
 * 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符  
 * 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)  
 * eg:  
 * "yyyy-MM-dd hh:mm:ss.S" ==> 2006-07-02 08:09:04.423 
 * "yyyy-M-d h:m:s.S" ==> 2006-7-2 8:9:4.18  
 * "yyyy-MM-dd E HH:mm:ss" ==> 2009-03-10 二 20:09:04  
 * "yyyy-MM-dd EE hh:mm:ss" ==> 2009-03-10 周二 08:09:04  
 * "yyyy-MM-dd EEE hh:mm:ss" ==> 2009-03-10 星期二 08:09:04 
 */
Moment.prototype.format = function (format) {
 var date = this.date;
 /*
  var r= /^(\d{4})-(\d{1,2})-(\d{1,2})$/; //正则表达式 匹配出生日期(简单匹配)  
  r.exec('1985-10-15');
  s1=RegExp.$1;s2=RegExp.$2;s3=RegExp.$3;//结果为1985 10 15
  */
 if (typeof date === 'string')
 date = this.parse(date);
 var o = {
 "M+": date.getMonth() + 1, //月份 
 "(d+|D+)": date.getDate(), //日 
 "(h+|H+)": date.getHours(), //小时 
 "m+": date.getMinutes(), //分 
 "s+": date.getSeconds(), //秒 
 "q+": Math.floor((date.getMonth() + 3) / 3), //季度 
 "S": date.getMilliseconds() //毫秒 
 };
 var week = {
 "0": "/u65e5",
 "1": "/u4e00",
 "2": "/u4e8c",
 "3": "/u4e09",
 "4": "/u56db",
 "5": "/u4e94",
 "6": "/u516d"
 };
 if (/(y+|Y+)/.test(format))
 format = format.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
 if (/(E+)/.test(format))
 format = format.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f" : "/u5468") : "") + week[date.getDay() + ""]);
 for (var k in o) {
 if (new RegExp("(" + k + ")").test(format))
  format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 }
 return format;
}
 
Moment.prototype.parse = function () {
 return this.date;
}
/**
 * 计算两个日期差差
 * return day
 */
Moment.prototype.differ = function (date) {
 var time1 = this.date.getTime();
 if (typeof date === 'string')
 date = new Date(date);
 var time1 = this.date.getTime();
 var time2 = date.getTime();
 var differ = Math.ceil((time1 - time2) / (1000 * 3600 * 24));//除不尽时,向上取整
 return differ;
}
 
Moment.prototype.add = function (num, optionType) {
 var date = this.date;
 if ('day' === optionType) {
 date.setDate(date.getDate() + num);
 }
 if ('month' === optionType) {
 date.setMonth(date.getMonth() + num);
 }
 if ('year' === optionType) {
 date.setFullYear(date.getFullYear() + num);
 }
 this.date = date;
 return this;
}
 
Moment.prototype.before = function (date) {
 return this.date.getTime() < new Date(date).getTime()
}
Moment.prototype.after = function (date) {
 return this.date.getTime() > date.getTime()
}
 
module.exports = function (date) {
 return new Moment(date);
}

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

Javascript 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JavaScript作用域链示例分享
May 27 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
js的各种排序算法实现(总结)
Jul 23 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
JavaScript中各数制转换全面总结
Aug 21 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
javascript网页随机点名实现过程解析
Oct 15 Javascript
javascript代码实现简易计算器
Jan 25 Javascript
微信小程序日历效果
Dec 29 #Javascript
微信小程序日历组件使用方法详解
Dec 29 #Javascript
微信小程序自定义可滑动日历界面
Dec 28 #Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 #Javascript
微信小程序实现复选框效果
Dec 28 #Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 #Javascript
微信小程序下拉框组件使用方法详解
Dec 28 #Javascript
You might like
php中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
判断客户端浏览器是否安装了Flash插件的多种方法
2010/08/11 Javascript
js Function类型
2011/12/04 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jQuery实现简单的tab标签页效果
2016/09/12 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
Vue中对iframe实现keep alive无刷新的方法
2019/07/23 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
Python中的rfind()方法使用详解
2015/05/19 Python
Python抽象类的新写法
2015/06/18 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python运维自动化之nginx配置文件对比操作示例
2018/08/29 Python
Python数据集切分实例
2018/12/08 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python使用while循环花式打印乘法表
2019/01/28 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python实现京东抢秒杀功能
2021/01/25 Python
Oracle的内存结构(Memory structures)
2015/06/10 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
应届生学校辅导员求职信
2013/11/07 职场文书
心得体会开头
2014/01/01 职场文书
yy婚礼司仪主持词
2014/03/14 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
制冷与空调专业毕业生推荐信
2014/07/07 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python