微信小程序之实现常用日期格式（一）

样品介绍

本文介绍了项目中常用的两种日期格式。

1、滚动选择器选择日期格式(显示7天非周末日期)；

2、卡片选择日期格式；

实现过程

首先，滚动选择器选择日期格式。

1、文件*。wxml和*。wxss代码如下：

View class='time-box '

View class='time-title '预定日期/view

picker bind change=' bindpickerchange ' value=' { { index } } ' range=' { { datearry } } '

View class='picker '

{{datearry [索引]}}

/view

/皮克

/view.time-box {

Padding: 32rpx 30rpx:

display : flex:

background-color : # fff；

}

.time-box。time-title {

color : # 9 a 9 a 9 a；

margin-right : 73 rpx；

Width: 150rpx

}

.time-box picker {

Width: 480rpx

}2，文件*。js存储所有功能的逻辑代码，代码实现如下：

1)滚动选择器选择组件picker的常规选择器，重点是计算范围内的数据以滚动数据。

2)函数dateLater用于获取修改日期(da() later)之后的月、日和星期几的信息(datestring)。

3)函数getDates用于根据传入数字(days)获取所有dateString数据，并将其添加到dateArry(picker的range数据)中。

Page({ /** * 页面的初始数据 */ data: { index: 0, dateArry: [] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { (7); }, // 选择预约日期 bindPickerChange: function (e) { ({ index: e.de }) }, //获取d当前时间多少天后的日期和对应星期 getDates: function (days) { let dateArry = []; for (let i = 0; i < days; i++) { let dateObj = (i); if (dateObj) { // 非周六日才添加 da(dateObj) } } ({ dateArry }); }, /** * 传入时间后几天 * param：传入时间：later:往后多少天 */ dateLater: function (later) { let dateString = ''; let show_day = new Array('星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'); let date = new Date(); da() + later); // setData实现日期的相加减 let day = da(); // 获取星期的数字 if (day == 0 || day == 6) { // 用于去掉周六周日 return false; } let year = da(); // 给月日补0 let month = () + 1) < 10 ? ("0" + () + 1)) : da() + 1); let dayNumber = () < 10 ? ("0" + da()) : da()); let week = show_day[day]; dateString = `${year}-${month}-${dayNumber} ${week}`; return dateString; } })

二、卡片选择日期格式

1、文件*.wxml和*.wxss代码如下：

为了实现选中效果，利用了radio的选择事件；所以为了能点击到radio且看不见，需要修改radio的样式在最上层且遮盖卡片并透明显示。

<radio-group class="radio-group" name="radioTag"> <label wx:for="{{timeLabels}}" wx:key="id" class="radio {{i ? 'active' : ''}}"> <radio value="{{i}}" bindtap="radioChangeTag" data-id="{{i}}" checked="{{i}}" disabled="{{i == 0 ? true : false}}" /> <view class="item {{i == 0 ? 'disabled' : ''}}"> <view class="time">{{i}}</view> <view class="number">{{i == 0 ? '已约满' : '可预约'+i+'人'}}</view> </view> </label> </radio-group>/* 预约时间段 */ .item { height: 104rpx; text-align: center; border: 2rpx solid #EBEBEB; border-radius: 8rpx; background-color: #fff; font-size: 26rpx; padding-top: 24rpx; position: absolute; top: 0; left: 0; width: 100%; } .item .time { color: #343434; margin-bottom: 8rpx; } .item .number { color: #3E7AF5; } .radio.active .item { background-color: #3E7AF5; } .radio.active .item .time { color: #fff; } .radio.active .item .number { color: #fff; } .i .time { color: #ADADAD; } .i .number { color: #FA7014; } /* radio样式 */ .radio-group { padding: 0 30rpx; } .radio-group .radio { position: relative; display: inline-block; margin: 30rpx 30rpx 0 0; width: 210rpx; height: 128rpx; } .radio-group .radio:nth-child(3n) { margin-right: 0; } .radio-group radio .wx-radio-input{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8rpx; border: 2rpx solid #f2f2f2; z-index: 1; opacity: 0; }

2、文件*.js存放所有功能的逻辑代码，代码实现如下：

函数radioChangeTag用于判断点击id跟数组那个数据id一样，一样则选中，反之则不选中。

Page({ /** * 页面的初始数据 */ data: { timeLabels: [{ id: 1, time: '09:00-09:30', number: 15, checked: true }, { id: 2, time: '09:30-10:00', number: 12, checked: false }, { id: 3, time: '10:00-10:30', number: 0, checked: false },{ id: 4, time: '10:30-11:00', number: 5, checked: false }, { id: 5, time: '11:00-11:30', number: 2, checked: false }, { id: 6, time: '11:30-12:00', number: 1, checked: false },{ id: 7, time: '14:30-15:00', number: 5, checked: false }, { id: 8, time: '15:00-15:30', number: 8, checked: false }, { id: 9, time: '15:30-16:00', number: 1, checked: false }] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, // 选择时间段（单选） radioChangeTag: function (e) { let timeLabels = ; let id = e.curren; ((item, index) => { if (i == id) { timeLabels[index].checked = true; } else { timeLabels[index].checked = false; } }); ({ timeLabels }) } })