我的时间选择组件在common文件夹里
datePicker组件代码
html:
<view class="date_bg_view">
</view>
<view class="date_content">
<view class="date_title">
<image src="/image/icon_close_black.png" class="close" bindtap="onClose"></image>
<text class="date_title_txt">选择时间</text>
</view>
<view class="line"></view>
<!-- 快速选择 -->
<view class="date_quick_choose">
<text class="date_quick_txt">快速选择</text>
<view class="date_quick_show">
<view class="{{item.flag ? 'quick_cell_flag' : 'quick_cell'}}" wx:for="{{dateList}}" wx:key="id" bindtap="handleQuickChoose" data-index="{{index}}">
{{item.name}}
</view>
</view>
</view>
<!-- 自定义时间 -->
<view class="date_quick_choose">
<text class="date_quick_txt">自定义时间</text>
<view class="date_picker">
<picker mode="date" value="{{startDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange" data-type="1" mask-style=" color='#0A3E79'">
<view class="picker">
{{startDate?startDate:'开始时间'}}
</view>
</picker>
<text style="width: 20rpx;height: 1rpx;background-color: #999;"></text>
<picker mode="date" value="{{endDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange" data-type="2">
<view class="picker">
{{endDate?endDate:'结束时间'}}
</view>
</picker>
</view>
</view>
<button class="sure_btn" bindtap="handleSure"> 确定 </button>
</view>
css:
.date_bg_view{
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.3;
}
.date_content{
position: fixed;
bottom: 0;
left: 0;
z-index: 11;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: 75%;
background-color: #fff;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
}
.date_title{
z-index: 11;
width: 100%;
display: flex;
justify-content: center;
height: 90rpx;
line-height: 90rpx;
}
.close{
position: absolute;
top: 20rpx;
right: 20rpx;
width: 30rpx;
height: 30rpx;
}
.date_title_txt{
font-size: 35rpx;
font-weight: bold;
}
.line{
margin: 10rpx;
width: 100%;
height: 1rpx;
background-color: #eee;
}
.date_quick_choose{
z-index: 11;
padding: 20rpx;
width: 100%;
}
.date_quick_txt{
z-index: 12;
margin: 20rpx;
font-size: 30rpx;
color: #666;
}
.date_quick_show{
z-index: 12;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
width: 100%;
}
.quick_cell{
z-index: 12;
margin: 2%;
padding: 5rpx;
width: 29%;
height: 60rpx;
text-align: center;
line-height: 60rpx;
font-size: 28rpx;
background-color: #F7F7F7;
color: #999;
border: 1rpx solid #F7F7F7;
border-radius: 10rpx;
}
.quick_cell_flag{
z-index: 12;
margin: 2%;
padding: 5rpx;
width: 29%;
height: 60rpx;
line-height: 60rpx;
font-size: 28rpx;
text-align: center;
background-color: #fff;
color: #19b2ff;
border: 1rpx solid #19b2ff;
border-radius: 10rpx;
}
.date_picker{
margin-top: 30rpx;
margin-left: 10%;
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
}
.picker{
padding: 10rpx 40rpx;
background-color: #fff;
font-size: 30rpx;
color: #19b2ff;
font-weight: bold;
}
.sure_btn{
margin-top: 80rpx;
font-size: 28rpx;
width: 90%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background-color: #19b2ff;
color: #fff;
}
js:
const util = require('../../utils/util.js');
import {
formatDate
} from "../../utils/date";
const app = getApp();
Component({
lifetimes: {
attached: function () {
// 在组件实例进入页面节点树时执行
var currentDate = new Date();
// 获取当前年份和月份
var currentYear = currentDate.getFullYear();
// 计算五年内的上学期和下学期
var semesters = [];
for (var i = 0; i < 5; i++) {
var years = currentYear - i;
semesters.push({
name: years + '下半学年',
dates: [years + '-09-01', (years + 1) + '-01-31'],
flag: false
});
semesters.push({
name: years + '上半学年',
dates: [years + '-02-01', years + '-06-30'],
flag: false
});
}
// 输出结果
this.setData({
dateList: semesters
})
},
},
properties: {},
/**
* 组件的初始数据
*/
data: {
dateList: [],
startDate: '',
endDate: '',
currentTime: formatDate(new Date()),
oidx: null,
},
methods: {
/**
* 快速选择
* @param {*} e
*/
handleQuickChoose(e) {
let that = this;
let oidx = e.currentTarget.dataset.index;
let odateList = that.data.dateList
// 遍历数组，并修改flag属性为false
odateList.forEach(item => {
item.flag = false;
});
odateList[oidx].flag = true
that.setData({
startDate: odateList[oidx].dates[0],
endDate: odateList[oidx].dates[1],
oidx,
dateList: odateList
})
},
bindDateChange(e) {
//console.log('picker发送选择改变，携带值为', e)
let that = this;
let type = e.currentTarget.dataset.type
if (type == 1) {
that.setData({
startDate: e.detail.value
})
} else {
that.setData({
endDate: e.detail.value
})
}
},
/**
* 顶部关闭按钮
*/
onClose() {
this.triggerEvent('sync', {
show: false
})
},
/**
* 确定
*/
handleSure() {
let that = this;
if (!that.data.startDate || !that.data.endDate) {
util.alert('学期选择不能为空！');
return false;
}
if (that.data.startDate <= that.data.endDate) {
that.triggerEvent('sync', {
show: false,
startDate: that.data.startDate,
endDate: that.data.endDate
})
} else {
util.alert('结束时间不能小于开始时间');
return false;
}
}
},
})
json:
{
"component": true,
"usingComponents": {}
}
调用的页面：
json:
"usingComponents": {
"datePicker":"../../common/datePicker/index"
},
html:
<view class="check-list">
<view class="check-list-lef">学期选择</view>
<view class="check-list-rig">
<view class="picker" bind:tap="openDatePicker">{{ startDate && endDate ? (startDate + ' - ' + endDate) : '请选择学期'}}</view>
<!-- 时间选择组件 bind:sync 子类回传数据的方法-->
<datePicker wx:if="{{show}}" bind:sync="syncGetDate"></datePicker>
</view>
</view>
js:
data:{
startDate: '',
endDate: '',
show: false,//显示隐藏时间控件
}
openDatePicker(e) {
this.setData({
hiddenChart: true,
show:true
})
},
syncGetDate(e){
let that = this;
let show = e.detail.show;
if(!show){ // 子组件点击了关闭 关闭弹窗
that.setData({
show:false,
startDate: e.detail.startDate,
endDate: e.detail.endDate,
//hiddenChart: false,
})
}
//console.log("子组件：",e);
//this.getStatisticThemeActivitiesTrend()
},
