要实现的效果图如下
看一下页面结构,首先是组件的
下面是页面
直接上代码
// components/daychoose/daychoose.js
var util = require('../../utils/util.js');
Component({
attached() {
const date = new Date();
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day=date.getDate();
const maxDate = new Date(this.properties.endDate);
console.log("maxDate", maxDate);
let maxYear=maxDate.getFullYear();
let maxMonth=maxDate.getMonth()+1;
let maxDay = maxDate.getDate();
let isNext = (maxYear > year) || (maxYear == year && maxMonth > month) || (maxYear == year && maxMonth == month&&maxDay>day);
this.setData({
year: year,
month: month,
day:day,
maxYear: maxYear,
maxMonth: maxMonth,
maxDay: maxDay,
nextActive: isNext
});
},
/**
* 组件的属性列表
*/
properties: {
endDate:{
type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
value: null,
}
},
/**
* 组件的初始数据
*/
data: {
year: 1900,
month: 1,
day:1,
maxYear: 1900,
maxMonth: 1,
maxDay:1,
preActive:false,
nextActive:false
},
/**
* 组件的方法列表
*/
methods: {
bindPreDay:function(){
let { year, month,day} = this.data;
let curday = year + '-' + month + '-' + day;
//前一天的日期
let dateText = util.getNextPreDate(curday, -1).split('-');
year = dateText[0];
month = dateText[1];
day = dateText[2];
const date = new Date();
let minYear = date.getFullYear();
let minMonth = date.getMonth() + 1;
let minDay=date.getDate();
let isPre = (year > minYear) || (year == minYear && month > minMonth) || (year == minYear && month == minMonth&&day>minDay);
this.setData({
year: year,
month: month,
day:day,
nextActive: true,
preActive: isPre
});
this.triggerEvent("bindpreDay", { year, month,day});
},
bindNextDay:function(){
let { year, month,day, maxYear, maxMonth,maxDay}=this.data;
let curday=year+'-'+month+'-'+day;
//后一天的日期
let dateText=util.getNextPreDate(curday,1).split('-');
year = dateText[0];
month=dateText[1];
day=dateText[2];
let isNext = (maxYear > year) || (maxYear == year && maxMonth > month) || (maxYear == year && maxMonth == month && maxDay > day);
this.setData({
year: year,
month: month,
day:day,
nextActive: isNext,
preActive:true
});
this.triggerEvent("bindnextDay", { year, month,day })
}
}
})
<!--components/daychoose/daychoose.wxml-->
<view class='month-view'>
<view class='{{preActive ? "active" : "disable"}}' bindtap="bindPreDay">前一天</view>
<view>{{year}}年{{month}}月{{day}}日</view>
<view class='{{nextActive ? "active" : "disable"}}' bindtap="bindNextDay">后一天</view>
</view>
.month-view{
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 20rpx 30rpx;
font-size: 32rpx;
border-bottom: 1px solid #682E09;
}
.active{
color: #682E09;
}
.disable{
color: #e4e4e4;
}
<!--pages/schedule/schedule.wxml-->
<daychoose id='dayC' name="dayC"
endDate='{{endtime}}'
bind:bindpreDay="_bindpreDay"
bind:bindnextDay="_bindnextDay">
</daychoose>
// pages/schedule/schedule.wxss
page{
font-size: 32rpx;
}
.view-schItem{
display: flex;
flex-direction: row;
justify-content: space-between;
height: 100rpx;
align-items: center;
border-bottom:1px solid #e4e4e4;
}
.view-sch{
padding: 0 30rpx;
margin-top:30rpx;
}
.inner-vie{
width:20%;
}
.btn-item {
width:100%;
height:60rpx;
font-size:28rpx;
line-height:60rpx;
justify-self: flex-end;
color:#682E09;
background-color:#ffffff;
border:1px solid #682E09;
}
.txt-nm {
width:40%;
font-size:28rpx;
text-align:left;
}
.txt-del{
width: 20%;
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
font-size:28rpx;
line-height:46rpx;
}
// pages/schedule/schedule.js
Page({
/**
* 页面的初始数据
*/
data: {
endtime:'2019-06-30'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
_bindpreDay(e) {
let { year, month,day } = e.detail;
this.getDoctorList(year, month);
},
_bindnextDay(e) {
let { year, month,day } = e.detail;
this.getDoctorList(year, month);
},
})
不要忘了引用组件
{
"usingComponents": {
"daychoose": "/components/daychoose/daychoose"
}
}
上面代码中用到了util.js中的方法,需要加进去
/*
*获取指定日期的前一天,后一天
*date 代表指定的日期,格式:2018-09-27
*day 传-1表始前一天,传1表始后一天
*/
const getNextPreDate = function getNextPreDate(date, day) {
var dd = new Date(date);
dd.setDate(dd.getDate() + day);
var y = dd.getFullYear();
var m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
return y + "-" + m + "-" + d;
};
module.exports = {
formatTime: formatTime,
changeDateFormat: changeDateFormat,
numberFormat: numberFormat,
getNextPreDate: getNextPreDate
}
好了,搞定(这是在上一篇博文-- 微信小程序自定义组件--时间组件(上月下月切换)的基础上改的,可以参考哦)