描述

切换月份, 当天文案为今天, 日期背景变色, 日期红点标识, 点击选中日期.

效果


源码

calendar.wxml

<view class="component">
<view class="header">
<view bindtap="handlePrevMonthClick">{{'<'}}</view>
<view>{{year}}年{{month}}月</view>
<view bindtap="handleNextMonthClick">></view>
</view>
<view>
<view class="week">周一</view>
<view class="week">周二</view>
<view class="week">周三</view>
<view class="week">周四</view>
<view class="week">周五</view>
<view class="week">周六</view>
<view class="week">周日</view>
</view>
<view class="daybox">
<block wx:for="{{dayList}}" wx:key="{{index}}">
<view wx:if="{{item.day}}" class="day {{item.day === day ? 'day-checked': ''}} {{item.bg ? 'day-bg' : ''}}" data-day="{{item.day}}" bindtap="handleDayClick">
<view>{{item.isToday ? '今天' : item.day}}</view>
<view class="point" wx:if="{{item.point}}"></view>
</view>
<view wx:else class="day"></view>
</block>
</view>
</view>

calendar.js

const weekNameMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

Component({
properties: {
mydate: String, // 选中的天 Date String 格式
mylist: Array,
}, data: {
year: null,
month: null,
day: null,
list: [],
}, lifetimes: {
attached: function () {
const now = new Date();
this.setData({
year: now.getFullYear(),
month: now.getMonth() + 1,
day: now.getDate(),
}, this.calcDayList)
},
}, observers: {
'mydate': function (mydate) {
let date = new Date(mydate);
this.setData({
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate(),
}, this.calcDayList);
}, 'mylist': function (mylist) {
this.setData({ list: mylist }, this.calcDayList);
},
}, methods: { // 获取当月共多少天
getThisMonthDays: function (year, month) {
return new Date(year, month, 0).getDate()
}, // 获取当月第一天星期几 0 星期日
getFirstDayOfWeek: function (year, month) {
return new Date(Date.UTC(year, month - 1, 1)).getDay();
}, calcDayList: function () {
const { year, month, list, } = this.data; let totalDay = this.getThisMonthDays(year, month);
let firstDay = this.getFirstDayOfWeek(year, month); let dayList = [];
for (let i = 0; i < (totalDay); i++) {
dayList.push({
day: i + 1,
weekName: weekNameMap[(firstDay + i) % 7],
})
} // 向前添加
for (let i = 0; i < (firstDay || 7) - 1; i++) {
dayList.unshift({ day: 0, });
} // 向后添加
for (let i = 0; i < 42 - totalDay - ((firstDay || 7) - 1); i++) {
dayList.push({ day: 0, });
} // 当天
let now = new Date();
if (now.getFullYear() === year && now.getMonth() + 1 === month) {
(dayList.find(d => d.day === now.getDate()) || {}).isToday = true;
} // 业务数据处理
list.forEach(item => {
let find = dayList.find(d => d.day === item.day);
if (find) {
Object.assign(find, item);
}
}) this.setData({ dayList, });
}, // 点击上个月
handlePrevMonthClick: function () {
let year = this.data.year;
let month = this.data.month;
if (this.data.month === 1) {
year = this.data.year - 1;
month = 12;
} else {
month = this.data.month - 1;
}
this.handleDateChange({ year, month });
}, // 点击下个月
handleNextMonthClick: function () {
let year = this.data.year;
let month = this.data.month;
if (this.data.month === 12) {
year = this.data.year + 1;
month = 1;
} else {
month = this.data.month + 1;
}
this.handleDateChange({ year, month });
}, // 点击 天
handleDayClick: function (e) {
const { day } = e.currentTarget.dataset;
this.handleDateChange({ day })
}, // 处理日期变化
handleDateChange: function (time) {
const { year, month, day } = this.data;
let date = { year, month, day, ...time };
if (!this.data.mydate) {
this.setData({ ...date });
if (time.year || time.month) this.calcDayList();
}
this.triggerEvent('mydatechange', { date: new Date(`${date.year}/${date.month}/${date.day}`).toString() })
} }
})

calendar.wxss

.component {
background: #fff;
}
.header {
display: flex;
justify-content: space-around;
padding: 20rpx;
border-top: 1px solid #eee;
}
.header view {
height: 80rpx;
line-height: 80rpx;
font-size: 40rpx;
color: rgba(0, 0, 0, 0.85);
min-width: 100rpx;
}
.header view:nth-child(2n-1) {
font-size: 50rpx;
} .week {
display: inline-block;
width: 107rpx;
line-height: 2;
color: rgba(0, 0, 0, 0.45);
font-size: 28rpx;
text-align: center;
} .daybox {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #eee;
} .day {
width: 107rpx;
height: 107rpx;
box-sizing: border-box;
text-align: center;
line-height: 2;
color: rgba(0, 0, 0, 0.85);
border: 4rpx solid #fff;
} .day:nth-child(7n), .day:nth-child(7n-1) {
color: #ff9b80;
} .day-checked {
border: 4rpx solid #ffa78f!important;
border-radius: 10rpx;
}
.day-bg {
background: #ffe9e4!important;
} .point {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background: #ff876d;
margin: 0 auto;
margin-top: 5rpx;
}

calendar.json

{
"component": true,
"usingComponents": {}
}

使用例子

参数 类型 默认值 说明
mydate? String 当天时间字符串 选中的日期
mylist? Array [] 当月数据
handleDateClick? ({ detail: { date } }) => void 点击某天的的回调

test.wxml

<calendar mydate="{{mydate}}" mylist="{{list}}" bindmydatechange="handleDateClick" />

test.js

Page({
data: {
mydate: new Date().toString(),
mylist: [
{ day: 1, // 当月天
bg: true, // 是否显示背景
point: true, // 是否显示圆点
},
{ day: 3, bg: true },
{ day: 4, bg: true },
{ day: 5, bg: true, point: true },
{ day: 6, bg: true, point: true },
{ day: 7, point: true },
{ day: 8, point: true },
{ day: 9, point: true },
]
}, handleDateClick: function ({ detail: { date } }) {
this.setData({ mydate: date });
}, })

test.json

{
"navigationBarTitleText": "demo",
"usingComponents": {
"calendar": "/components/calendar/calendar"
}
}

注意

组件properties的数据类型不支持Date, 所以日期使用字符串格式传递。

[组件封装]微信小程序-日历的更多相关文章

  1. [组件封装]微信小程序-图片批量上传照片墙

    描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...

  2. [组件封装]微信小程序-底部弹框

    描述 模仿ios浏览器底部弹框效果. 遮罩层淡入淡出,弹框高度根据内容自适应. 效果 源码 popup-bottom.wxml <!-- popup-bottom.wxml --> < ...

  3. 详解封装微信小程序组件及小程序坑(附带解决方案)

    一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模 ...

  4. 简单封装微信小程序

    一.不同环境配置封装 新建config文件夹,根据自己有不同环境设置不同的js文件 具体js文件内容: exports.config = { requestHost: 'https://******. ...

  5. 封装微信小程序支付

    <?php /** * User: Eden * Date: 2019/3/21 * 共有内容 */ namespace Common\Service; use Think\Exception; ...

  6. 【组件】微信小程序input搜索框的实现

    开发小程序的过程,是一个学习知识,解决问题的过程,每当实现了一个需求,总会有很大的成就感,每天记录一个开发过程中的细节.实现效果如下: 官方参考链接:https://developers.weixin ...

  7. 微信小程序日历面板插件

    创建日历面板组件,在components目录下创建calendar文件夹 1.calendar.js // components/calendar/calendar.js var util = req ...

  8. 微信小程序日历课表

    最近项目中使用到了日历,在网上找了一些参考,自己改改,先看效果图 wxml <view class="date"> <image class="dire ...

  9. 微信小程序日历插件

    1/   wxml代码 <view class="timePick"> <picker mode="date" fields="mo ...

随机推荐

  1. java增强型for循环

    http://blog.csdn.net/itmyhome1990/article/details/8797005

  2. JAVAscript的DOM操作及实例

    一.Windows对象操作 (1)用代码打开窗口:window.open("第一部分","第二部分","第三部分","第四部分&q ...

  3. Android(四)-JVM与DVM区别

    JVM与DVM区别 1.由来 Android是基于java的既然java已经有了java虚拟机,为什么android还要弄一个DVM了?最重要的就是版权问题,一开始就是用的 JVM,没过多久就被SUN ...

  4. TDA2050功率放大器研究

    音频功率放大模块(以下简称功放)用于处理模拟信号,将功率较低的输入信号进行线性放大,输出大功率的信号以驱动换能器.通常,电子发烧友自己设计功放,与各类音源和喇叭匹配,以得到满意的音响效果.在测试中,实 ...

  5. fsLayuiPlugin多数据表格使用

    fsLayuiPlugin 是一个基于layui的快速开发插件,支持数据表格增删改查操作,提供通用的组件,通过配置html实现数据请求,减少前端js重复开发的工作. GitHub下载 码云下载 测试环 ...

  6. 前端javascript知识(一)

    介绍一下 JS 的基本数据类型. Undefined.Null.Boolean.Number.String 介绍一下 JS 有哪些内置对象. Object 是 JavaScript 中所有对象的父对象 ...

  7. 第一个Hystrix程序 Hystrix 一

    1.导入jar包 <dependencies> <dependency> <groupId>com.netflix.hystrix</groupId> ...

  8. 必备技能echarts

    echart 设置图例图标形状 https://blog.csdn.net/qq_15390381/article/details/81736796legend: { data: ["总数& ...

  9. var, let ,const区别

    ES6中加入了let,const字符,先说说新的区别: 作用域:let 声明的变量只在它所在的代码块内有效,而且不存在变量提升,即变量可以在声明之前使用,值为undefined.let未声明变量前会报 ...

  10. python自动化第二课 - python基础2

    1.判断奇数偶数 num = input("请输入一个数字,判断是否为偶数:") print(not int(num) % 2) 2.浮点数的高精度计算用Decimal(from ...