### DateTimePicker 微信小程序日期选择 [年，月，日，时，分，秒]
### 只显示[年，月，日]
##### 代码示例
**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);
}
}
})
```
微信小程序日期选择.zip
需积分: 1 20 浏览量
2024-01-09
23:02:04
上传
评论
收藏 265KB ZIP 举报
微信小程序日期选择.zip （19个子文件） 
open_weixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxcxxxxxxxxxxxxcxvcvcv pages activity_add 
index.wxml 773B index.js 3KB index.json 133B index.wxss 660B pic 
001.PNG 109KB 002.png 26KB app.json 228B project.config.json 616B app.js 53B utils activity_util.js 2KB app.wxss 1B components DateTimePicker index.wxml 2KB index.js 873B index.json 48B index.wxss 730B .gitignore 145B images icon_Right.png 3KB youjiaoxueyuan.png 161KB README.md 4KB资源评论
