周日历功能，课程表、食谱等功能可能会用到的日历简单实现，刚学小程序一个月，有不好的地方还请大家提出

一、功能演示

第一次写博客，但一定写的完整，方便参考，直接上效果，点击切换上下周，点击日期将日期返回到调用组件的页面。默认显示当前日期。这样就可以在调用页面根据日期更改下面要显示的内容了。可以自己进行选中日期的样式改变。

小程序组件实现周日历功能，课程表、食谱等功能可能会用到的日历简单实现

二、代码及说明

先简单说一下思路流程，这样的界面肯定要维护一个日期列表对象，可以获取一周的日期并且可以切换上下周，首先这时候就需要一个对时间进行操作的工具类，并且可以直接返回我们想要的列表，下面是工具类的代码，每个方法都有详细注释

//获取当前周和日期对应列表

function getWeekDayList(selectWeek){

// 1.获取周一对应得时间

// 2.用循环七次添加周一到周日对应得周几和几号

var selectWeekTime = getCurrentTimeStamp() + (selectWeek * 7) * 24 * 60 * 60 * 1000

var mondayTime = selectWeekTime - (getWeekNumber(selectWeekTime)-1) * 24 * 60 * 60 * 1000

//创建我们想要的时间列表

var timeBean = {

yearMonth: '', //年月

weekDayList: [] //周和日的列表

}

for(var i=0;i<7;i++){

var weekDay={

week:'',

day:''

}

weekDay.week = getWeek(mondayTime + i * 24 * 60 * 60 * 1000)

weekDay.day = getMyDay(mondayTime + i * 24 * 60 * 60 * 1000)

timeBean.weekDayList.push(weekDay)

}

timeBean.yearMonth = getYearMonth(selectWeekTime);

return timeBean;

}

//获取当前时间戳

function getCurrentTimeStamp() {

var timestamp = new Date().getTime();

return timestamp

}

//获取当前周几 0123456

function getCurrenrWeek() {

var str = "7123456".charAt(new Date().getDay());

return str;

}

//时间戳获得年月

function getYearMonth(res) {

var time = new Date(res);

var y = time.getFullYear();

var m = time.getMonth() + 1;

return y+"-"+m;

}

//时间戳转几号

function getMyDay(res) {

var time = new Date(res);

var d = time.getDate();

return d;

}

//时间戳转周几

function getWeek(res){

var time = new Date(res);

var y = time.getFullYear();

var m = time.getMonth() + 1;

var d = time.getDate();

return "日一二三四五六".charAt(new Date(y + '-' + m + '-' + d).getDay());

}

//时间戳转周几 0123456

function getWeekNumber(res) {

var time = new Date(res);

var y = time.getFullYear();

var m = time.getMonth() + 1;

var d = time.getDate();

return "0123456".charAt(new Date(y + '-' + m + '-' + d).getDay());

}

module.exports = { //向外提供需要调用的方法

getWeekDayList: getWeekDayList,

}

我们有了这个工具类也就解决了数据方面的问题，剩下的只是界面和组件的事情就非常简单了，如果还不了解小程序组件的同学自己去百度一下。以下是组件 js json wxml wxss的代码，可以直接复制使用，代码也很简单

js： weekCalendar.js

// compoents/weekCalendar/weekCalendar.js

var util = require("../../utils/time-utils.js")

Component({

options: {

multipleSlots: true // 在组件定义时的选项中启用多slot支持

/** * 组件的属性列表 * 用于组件自定义设置 */

properties: {

// 弹窗标题

timeBean: { // 属性名

type: Object, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）

value: ''// 属性初始值（可选），如果未指定则会根据类型选择一个

selectWeek:{

type: Number,

}

/**

* 组件的方法列表

* 更新属性和数据的方法与更新页面数据的方法类似

methods: {

lastWeek:function(e){ //点击了上一周

this.setData({

selectWeek: --this.data.selectWeek,

timeBean: util.getWeekDayList(this.data.selectWeek--) // -- 是获取上一周的日期列表

})

nextWeek:function(e){

this.setData({

selectWeek: ++this.data.selectWeek,

timeBean: util.getWeekDayList(this.data.selectWeek++) // ++ 是获取下一周的日期列表，看工具类调用

})

itemClick: function (e) {

var index = e.currentTarget.dataset.index

this.triggerEvent("dayClick", index);

}

})

json：

{

"component": true //开启组件属性

}

wxml：

</view>

<view class='timeType'>{{timeBean.yearMonth}}</view>

</view>

<view class='weekType'>{{timeBean.weekDayList[index].week}}</view>

<view class='dateType'>{{timeBean.weekDayList[index].day}}</view>

</view>

wxss：这里用到了字体图标，可以直接复制使用

/* compoents/weekCalendar/weekCalendar.wxss */

.row { display:flex; flex-direction:row; justify-content: space-around; align-items: center;}

.column{

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

padding-bottom: 20rpx;

padding-top: 20rpx;

margin-top: 5rpx;

width: 100%;

}

.timeType{

font-size: 35rpx;

}

.dateType{

font-size: 35rpx;

}

.weekType{

font-size: 28rpx;

color: darkgrey;

}

.line{

height: 1rpx;

width: 100%;

background-color: gainsboro;

}

@font-face {font-family: "iconfont";

src: url('iconfont.eot?t=1532501003320'); /* IE9*/

src: url('iconfont.eot?t=1532501003320#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAVwAAsAAAAAB+AAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7khKY21hcAAAAYAAAABnAAABnM8qauxnbHlmAAAB6AAAAYMAAAGcuJvmK2hlYWQAAANsAAAALwAAADYSG74MaGhlYQAAA5wAAAAcAAAAJAfeA4VobXR4AAADuAAAABAAAAAQD+kAAGxvY2EAAAPIAAAACgAAAAoBRACmbWF4cAAAA9QAAAAfAAAAIAETAF1uYW1lAAAD9AAAAUUAAAJtPlT+fXBvc3QAAAU8AAAANAAAAEUwSZYyeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/sU4gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDyLY27438AQw9zA0AAUZgTJAQAq/AzMeJzFkMENwCAIRT9iG9P07BQ9Nh3HQ08dwYlZwwJ6cQK/eQI/RAwANgCsXEoE6APB9KpL7jMO9yMerZOeoLFKltLalJnIO5JnwV6mHctE60bPOv2+R2X7rgP9ouSO7VVKB/wDMGoRQwB4nB2QPW/TUBSG73tv/BXbN6nt+CZO7HxhX1AgUtzEGaq2DCAB6lCp6oDo0rkqa5cOWSp16MDCH0Ag+BGV6A9gBImhC4LfwNZbbjg6OsM50nP0vMQg5P4Xu2ZtEpKHZEaekX1CYE4w4jTFUM6ndILW0GiJiDM5lkNrPJqybYiRGcVlNS+EaZkNcGTYHJaVnFKJxXyHbqGMU6DTTQ6CvBewd6i3ZXahXtEPaPXHvcbOE/Xy8W5UDkL7zAuCThBc2aZh2JTWGhynInYMp26qj0YjaV33H9E+vI5M9l77g25wfDl/m+bCAVYrhN0B/7y7kWzoPk/iMOhYTd9uJ/74QYSzP2479NLiN9FF/49b+pfERGjLalEVEgVHrFFrnSWW1XJGv8MyXPWFF13ttVDfeC/nOGSM4QTUz1w895HmXN2qnzxPfbyo1Yw1GjrLO/qDUZ2lpi9RlXFkOYgjc6T/yAqblOGNlwlX3eCpKzJPfXIBvGfrteh76kZ9XZ9x5Dbdf++1QjcAeJxjYGRgYABiTp07E+P5bb4ycLMwgMD1OltuBP3/IQsDswSQy8HABBIFAPtvCJYAeJxjYGRgYG7438AQw8IAAkCSkQEVsAAARwoCbQQAAAAD6QAABAAAAAQAAAAAAAAAAHYApgDOAAB4nGNgZGBgYGEIZGBlAAEmIOYCQgaG/2A+AwAREgFxAHicZY9NTsMwEIVf+gekEqqoYIfkBWIBKP0Rq25YVGr3XXTfpk6bKokjx63UA3AejsAJOALcgDvwSCebNpbH37x5Y08A3OAHHo7fLfeRPVwyO3INF7gXrlN/EG6QX4SbaONVuEX9TdjHM6bCbXRheYPXuGL2hHdhDx18CNdwjU/hOvUv4Qb5W7iJO/wKt9Dx6sI+5l5XuI1HL/bHVi+cXqnlQcWhySKTOb+CmV7vkoWt0uqca1vEJlODoF9JU51pW91T7NdD5yIVWZOqCas6SYzKrdnq0AUb5/JRrxeJHoQm5Vhj/rbGAo5xBYUlDowxQhhkiMro6DtVZvSvsUPCXntWPc3ndFsU1P9zhQEC9M9cU7qy0nk6T4E9XxtSdXQrbsuelDSRXs1JErJCXta2VELqATZlV44RelzRiT8oZ0j/AAlabsgAAAB4nGNgYoAALgbsgIWRiZGZkYWRlYGxgisrMzGvJL+0Mr+UK7GoKL88Pic1rYSBAQCCcwk8') format('woff'),

url('iconfont.ttf?t=1532501003320') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/

url('iconfont.svg?t=1532501003320#iconfont') format('svg'); /* iOS 4.1- */

}

.iconfont {

font-family:"iconfont" !important;

font-size:16px;

font-style:normal;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-arrow_right:before { content: "\e616"; }

.icon-arrow_left:before { content: "\e65e"; }

下面是页面调用的代码调用非常简单，没什么需要详细说明的

js：

// pages/recipeList/recipeList.js

var util = require("../../utils/time-utils.js")

var that = this

Page({

/**

* 页面的初始数据

data: {

selectWeek:0, //记录是哪一周，0：本周 -1上一周 1下一周

timeBean:{

yearMonth: '',

weekDayList: [{

week: '',

day: ''

}]

/**

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

onLoad: function (options) {

this.setData({ //界面加载时获得本周

timeBean: util.getWeekDayList(this.data.selectWeek)

})

dayClick:function(index){

console.log("点击的号为", this.data.timeBean.weekDayList[index.detail].day)

)}

json：

{

"navigationBarTitleText": "园所食谱",

"usingComponents": {

"weekCalendar": "../../compoents/weekCalendar/weekCalendar"

}

wxml：

到此结束

小程序组件实现周日历功能，课程表、食谱等功能可能会用到的日历简单实现

一、功能演示

二、代码及说明

相关推荐