组件文件(time-danxuan)
1、timedan.js
Component({
properties: {
start: {
type: String,
value: '',
observer: function (newVal) {
if (typeof (newVal) == 'string' && newVal.length > 0) {
var t = new Date(newVal)
if (!isNaN(t.getTime())) {
var y = t.getFullYear(),
m = t.getMonth(),
d = t.getDate()
this.setData({
startDate: [y, m, d]
})
}
}
}
},
end: {
type: String,
value: '',
observer: function (newVal) {
if (typeof (newVal) == 'string' && newVal.length > 0) {
var t = new Date(newVal)
if (!isNaN(t.getTime())) {
var y = t.getFullYear(),
m = t.getMonth(),
d = t.getDate()
this.setData({
endDate: [y, m, d]
})
}
}
}
},
value: {
type: String,
value: '',
observer: function (newVal) {
if (typeof (newVal) == 'string' && newVal.length > 0) {
var t = new Date(newVal)
if (!isNaN(t.getTime())) {
var y = t.getFullYear(),
m = t.getMonth(),
d = t.getDate()
this.setData({
valueDate: [y, m, d],
year: y,
month: m
})
}
}
}
},
timeid:Number
},
data: {
show: true,
startDate: [],
endDate: [],
valueDate: [],
year: new Date().getFullYear(),
month: new Date().getMonth(),
days: []
},
methods: {
loadData: function () {
var that = this,
data = that.data,
year = data.year,
month = data.month,
valueDate = data.valueDate,
startDate = data.startDate,
endDate = data.endDate,
date = new Date(year, month, 1),
week = date.getDay(),
days = [],
last = new Date(year, (month + 1), 0),
max = last.getDate(),
lastWeek = last.getDay()
if (week > 0) {
for (var i = 0; i < week; i++) {
days.push({
day: 0
})
}
}
if (valueDate[0]) var currentTime = new Date(valueDate[0], valueDate[1], valueDate[2]).getTime()
if (startDate[0]) var startTime = new Date(startDate[0], startDate[1], startDate[2]).getTime()
if (endDate[0]) var endTime = new Date(endDate[0], endDate[1], endDate[2]).getTime()
for (var i = 1; i <= max; i++) {
var current = false,
disabled = false,
d = new Date(year, month, i),
t = d.getTime()
if (currentTime && currentTime == t) current = true
if (startTime && startTime > t) disabled = true
if (endTime && endTime < t) disabled = true
days.push({
day: i,
current: current,
disabled: disabled
})
}
if (lastWeek != 6) {
for (var i = 0, l = (6 - lastWeek); i < l; i++) {
days.push({
day: 0
})
}
}
that.setData({
days: days
})
},
prevMonth: function () {
var that = this,
data = that.data,
year = data.year,
month = data.month,
date = new Date(year, (month - 1), 1)
that.setData({
year: date.getFullYear(),
month: date.getMonth()
}, () => {
that.loadData()
})
},
nextMonth: function () {
var that = this,
data = that.data,
year = data.year,
month = data.month,
date = new Date(year, (month + 1), 1)
that.setData({
year: date.getFullYear(),
month: date.getMonth()
}, () => {
that.loadData()
})
},
changeMonth: function (e) {
var that = this,
value = e.detail.value,
date = new Date(value + '-01')
that.setData({
year: date.getFullYear(),
month: date.getMonth()
}, () => {
that.loadData()
})
},
changeDate: function (e) {
var that = this,
data = that.data,
year = data.year,
month = data.month,
days = data.days,
index = e.currentTarget.dataset.i,
value = {}
if (days[index] && days[index].day > 0 && !days[index].disabled) {
if (!days[index].current) {
for (var i = 0, l = days.length; i < l; i++) {
if (days[i].current) {
days[i].current = false
break
}
}
}
days[index].current = true
that.setData({
days: days
})
that.closeCalendar()
value.year = year
month += 1
value.month = month
value.day = days[index].day
value.date =[{}]
var timeid = this.data.timeid; //获取传入数据
value.date[timeid] = year + '-' + (month < 10 ? '0' + month : month) + '-' + (days[index].day < 10 ? '0' + days[index].day : days[index].day)
that.triggerEvent('doChange', value)
}
},
closeCalendar: function () {
var that = this
that.setData({
show: false
})
setTimeout(function () {
that.triggerEvent('doClose')
}, 400)
}
},
attached: function () {
this.loadData()
}
})
2、timedan.wxml
<view bindtap="closeCalendar" class="mask {{show?'mask_show':'mask_hide'}}"></view>
<view class="popup {{show?'popup_show':'popup_hide'}}">
<view class="tishi" bindtap="closeCalendar">
<text wx:if="{{timeid==0}}">请选择开始时间</text>
<text wx:if="{{timeid==1}}">请选择结束时间</text>
<image src="/pages/images/chahei.png"></image>
</view>
<view class="popup_head">
<!-- <view bindtap="closeCalendar" class="popup_cancel">取消</view> -->
<view class="popup_month">
<view bindtap="prevMonth" class="popup_prev"></view>
<picker class="yanse" mode="date" bindchange="changeMonth" fields="month" value="{{year}}-{{(month+1)}}"
start="{{startDate[0]?startDate[0]+'-'+(startDate[1]+1)+'-1':''}}"
end="{{endDate[0]?endDate[0]+'-'+(endDate[1]+1)+'-1':''}}">
<view class="popup_month_picker yanse">{{year}}年{{(month+1)}}月</view>
</picker>
<view bindtap="nextMonth" class="popup_next"></view>
</view>
</view>
<view class="popup_body">
<view class="cal">
<view class="cal_week">
<view class="cal_week_text">日</view>
<view class="cal_week_text">一</view>
<view class="cal_week_text">二</view>
<view class="cal_week_text">三</view>
<view class="cal_week_text">四</view>
<view class="cal_week_text">五</view>
<view class="cal_week_text">六</view>
</view>
<view class="cal_days">
<view wx:for="{{days}}" wx:key="index" bindtap="changeDate" data-i="{{index}}"
class="cal_day {{item.current?'current':''}} {{item.disabled?'disabled':''}}">{{item.day>0?item.day:''}}
</view>
</view>
</view>
</view>
</view>
3、timedan.wxss
.mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 9000;
}
.mask_show {
animation: mask_show ease 0.3s forwards;
}
@keyframes mask_show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.mask_hide {
animation: mask_hide ease 0.3s forwards;
}
@keyframes mask_hide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.popup {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
z-index: 9001;
padding-bottom: env(safe-area-inset-bottom);
margin: 0 20rpx;
border-radius: 10rpx 10rpx 0 0 ;
}
.popup_show {
animation: popup_show ease 0.3s forwards;
}
@keyframes popup_show {
0% {
transform: translate(0, 100%);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
.popup_hide {
animation: popup_hide ease 0.3s forwards;
}
@keyframes popup_hide {
0% {
transform: translate(0, 0);
opacity: 1;
}
100% {
transform: translate(0, 100%);
opacity: 0;
}
}
.popup_head {
border-top: 2rpx solid #f6f6f6;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx 30rpx;
font-size: 34rpx;
}
.popup_cancel {
color: #888;
}
.popup_month {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.popup_prev,
.popup_next {
display: flex;
justify-content: center;
align-items: center;
width: 30rpx;
}
.popup_prev::before,
.popup_next::before {
display: block;
content: '';
box-sizing: border-box;
box-sizing: border-box;
width: 12rpx;
height: 24rpx;
border-top: 12rpx solid #fff;
border-bottom: 12rpx solid #fff;
}
.popup_prev {
margin-right: 20rpx;
width: 50rpx;
height: 50rpx;
}
.popup_prev::before {
border-right: 12rpx solid #5028A0;
}
.popup_next {
margin-left: 20rpx;
width: 50rpx;
height: 50rpx;
}
.popup_next::before {
border-left: 12rpx solid #5028A0;
}
.popup_month_picker {
display: flex;
justify-content: space-between;
align-items: center;
}
.yanse{
color: #5028A0;
}
.popup_month_picker::after {
margin-left: 8rpx;
display: block;
content: '';
box-sizing: border-box;
width: 24rpx;
height: 12rpx;
border-top: 12rpx solid #5028A0;
border-left: 12rpx solid #fff;
border-right: 12rpx solid #fff;
}
.popup_body {
border-top: 2rpx solid #f6f6f6;
/* padding-top: 16rpx; */
padding-bottom: 16rpx;
}
.cal {
margin: 0 auto;
}
.cal_week {
display: flex;
justify-content: flex-start;
align-items: center;
}
.cal_week_text {
width: 104rpx;
padding: 10rpx 0;
text-align: center;
color: #999;
font-size: 24rpx;
}
.cal_days {
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: wrap;
font-size: 30rpx;
}
.cal_day {
width:14.28%;
border-top: 2rpx solid #eee;
padding: 16rpx 0;
text-align: center;
}
.cal_days .current {
background: #5028A0;
color: #fff;
}
.cal_days .disabled {
color: #ccc;
}
.tishi {
padding: 20rpx 0;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 20rpx;
}
.tishi text {
font-size: 32rpx;
color: #212121;
font-weight: 600;
}
.tishi image {
width: 35rpx;
height: 35rpx;
}
二、引用
以首页为例
1,index.js
var app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
timexuanz: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
var that = this;
var timestamp = Date.parse(new Date());
var date = new Date(timestamp);
//获取年份
var Y = date.getFullYear();
//获取月份
var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
//获取当日日期
var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
var xianzhikaishitime = Y + '-' + M + '-' + D;
//数据获取
that.setData({
xianzhikaishitime: xianzhikaishitime,
})
},
// 日期选择
showCalendar: function (e) {
var that = this;
var biankuang_color = e.currentTarget.dataset.name;
var timeid = e.currentTarget.dataset.idt;
var timexuanz = that.data.timexuanz;
var date_lanse = timexuanz[timeid];
that.setData({
showCalendar: true,
timeid: timeid,
date_lanse: date_lanse,
biankuang_color: biankuang_color,
})
},
//选择日期
_doChange: function (e) {
var that = this;
var timeid = that.data.timeid;
var timexuanz = that.data.timexuanz;
timexuanz[timeid] = e.detail.date[timeid]
that.setData({
timexuanz: timexuanz
})
},
//关闭选择器
_doClose: function () {
var that = this;
that.setData({
showCalendar: false
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
//util统一跳转
onUrls: function (event) {
util.onUrls(event);
},
// /**
// * 用户点击右上角分享
// */
// onShareAppMessage: function () {
// }
})
2、index.json
{
"navigationBarTitleText": " ",
"enablePullDownRefresh": false,
"backgroundTextStyle": "dark",
"usingComponents": {
"timedan": "/components/time-danxuan/timedan"
}
}
3、index.wxml
//为了防止冒泡,data-idt的值请务必保证唯一性,
<input bindtap="showCalendar" data-idt="0" value="{{timexuanz[0]}}" disabled="disabled"/>
<input bindtap="showCalendar" data-idt="1" value="{{timexuanz[1]}}" disabled="disabled"/>
//日期选择
<timedan wx:if="{{showCalendar}}" timeid="{{timeid}}" start="{{xianzhikaishitime}}" end="" value="{{date_lanse}}" bind:doChange="_doChange" bind:doClose="_doClose"></timedan>