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


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 相关文章推荐
js根据给定的日期计算当月有多少天实现思路及代码
Feb 25 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
详解通过JSON数据使用VUE.JS
May 26 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
javascript回调函数详解
Feb 06 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
vue组件中实现嵌套子组件案例
Aug 31 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获取当前时间的毫秒数的方法
2014/01/26 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
php递归函数怎么用才有效
2018/02/24 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
jQuery对表单的操作代码集合
2011/04/06 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
详解Vue 多级组件透传新方法provide/inject
2018/05/09 Javascript
解决vue中修改了数据但视图无法更新的情况
2018/08/27 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
2019/07/23 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
vue项目在线上服务器访问失败原因分析
2020/08/14 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python正则分组的应用
2013/11/10 Python
Python之PyUnit单元测试实例
2014/10/11 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python WSGI的深入理解
2018/08/01 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
PyTorch搭建多项式回归模型(三)
2019/05/22 Python
python读文件的步骤
2019/10/08 Python
Python 输出详细的异常信息(traceback)方式
2020/04/08 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
食品安全承诺书
2014/05/22 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Django模型层实现多表关系创建和多表操作
2021/07/21 Python