微信小程序日期选择
components / DateTimePicker index.wxml
<!-- 组件模板 -->
<view class="wrapper">
<slot></slot>
<view >{{title}}</view>
<!-- 日期模态框 -->
<view class="modelboxbg"></view>
<view class="modelbox">
<view class = "model_picker">
<view class = "button_model">
<text catchtap='canslebtn' >取消</text>
<text catchtap='closebtn' >确定</text>
</view>
<view class = "cont_model">
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{timevalue}}" catchchange="fnbindChange">
<!-- 年 -->
<picker-view-column wx:if="{{years.length > 0}}">
<view wx:for="{{years}}" wx:key="{{index}}" style="line-height: 50px">{{item}}</view>
</picker-view-column>
<!-- 月 -->
<picker-view-column wx:if="{{months.length > 0}}">
<view wx:for="{{months}}" wx:key="{{index}}" style="line-height: 50px">{{item}}</view>
</picker-view-column>
<!-- 日 -->
<picker-view-column wx:if="{{days.length > 0}}">
<view wx:for="{{days}}" wx:key="{{index}}" style="line-height: 50px">{{item}}</view>
</picker-view-column>
<!-- 时 -->
<picker-view-column wx:if="{{hours.length > 0}}">
<view wx:for="{{hours}}" wx:key="{{index}}" style="line-height: 50px">{{item}}</view>
</picker-view-column>
<!-- 分 -->
<picker-view-column wx:if="{{minutes.length > 0}}">
<view wx:for="{{minutes}}" wx:key="{{index}}" style="line-height: 50px">{{item}}</view>
</picker-view-column>
</picker-view>
</view>
</view>
</view>
</view>
index.wxss
.modelboxbg{
position:absolute;
top:0;
z-index:10000;
width:100%;
height: 100%;
background: #000;
opacity: 0.3;
}
.modelbox{
position:absolute;
bottom:0;
z-index:999999;
width:100%;
background: #fff;
}
picker-view-column{
text-align: center;
}
view.model_picker{
position: relative;
}
.button_model{
height: 80rpx;
width: 100%;
background: #fff;
position: relative;
border-bottom: 1px solid #d9d9d9;
}
.button_model text{
color: #007aff;
position: absolute;
background:transparent;
border: none;
line-height: 80rpx;
}
.button_model text:first-child{
left: 32rpx;
}
.button_model text:last-child{
right: 32rpx;
}
index.js
Component({
/**
* 组件的属性列表
*/
properties: {
timevalue: {
type: Array,
value: "标题"
},
years: {
type: Array,
value: "年"
},
months: {
type: Array,
value: "月"
},
days: {
type: Array,
value: "日"
},
hours: {
type: Array,
value: "小时"
},
minutes: {
type: Array,
value: "分钟"
}
},
/* 组件的初始数据*/
data: {
},
/** 组件的方法列表 **/
methods: {
//取消
canslebtn(){
this.triggerEvent("canslebtn");
},
//确认
closebtn() {
this.triggerEvent("closebtn");
},
// 调用父组件 事件
fnbindChange(e){
this.triggerEvent("bindChangeEvent",e.detail);
}
}
})
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
