微信小程序picker-view日期选择器
2016-12-23 11:29
597 查看
使用微信小程序设计下拉菜单,发现官方文档中关于picker-view的示例代码有错误,
顶部天数不随着滑动而变化,并且默认出现的月份和天数是写死的,不是根据当天日期显示。
修改后的js文件为
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
Page({
data: {
//数组中保存的可选日期
years: years,
months: months,
days: days,
//默认的顶部日期
year: date.getFullYear(),
month: date.getMonth()+1,
day: date.getDate(),
//滑动框中放入的是第几个值
value: [date.getFullYear(), date.getMonth(), date.getDate()-1],
},
bindChange: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
}
})
date.getMonth()取得的月份比真实月份小1,即从0到11月份,并且需要注意的是getMonth()方法必须带括号,微信开发工具自动提示的不带括号,需要自己手动补上括号。
并且data中的value值,目测天数项要减1才能符合,没弄懂这个地方是为什么,
wxml文件
<view>
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
顶部天数不随着滑动而变化,并且默认出现的月份和天数是写死的,不是根据当天日期显示。
修改后的js文件为
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
months.push(i)
}
for (let i = 1; i <= 31; i++) {
days.push(i)
}
Page({
data: {
//数组中保存的可选日期
years: years,
months: months,
days: days,
//默认的顶部日期
year: date.getFullYear(),
month: date.getMonth()+1,
day: date.getDate(),
//滑动框中放入的是第几个值
value: [date.getFullYear(), date.getMonth(), date.getDate()-1],
},
bindChange: function (e) {
const val = e.detail.value
this.setData({
year: this.data.years[val[0]],
month: this.data.months[val[1]],
day: this.data.days[val[2]]
})
}
})
date.getMonth()取得的月份比真实月份小1,即从0到11月份,并且需要注意的是getMonth()方法必须带括号,微信开发工具自动提示的不带括号,需要自己手动补上括号。
并且data中的value值,目测天数项要减1才能符合,没弄懂这个地方是为什么,
wxml文件
<view>
<view>{{year}}年{{month}}月{{day}}日</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" style="line-height: 50px">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" style="line-height: 50px">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" style="line-height: 50px">{{item}}日</view>
</picker-view-column>
</picker-view>
</view>
相关文章推荐
- 微信小程序例子——使用picker实现时间和日期选择框
- 微信小程序使用picker实现时间和日期选择框功能【附源码下载】
- 微信小程序-picker组件地区,时间,日期选择
- 转:【微信小程序常见问题】下拉框选择器设置picker属性。(包括:城市、日期和时间选择器)
- 微信小程序之picker日期和时间选择器
- 微信小程序 picker-view 组件详解及简单实例
- 省市区三级联动picker-view-微信小程序
- 微信小程序的时间控件picker-view
- ios开发 自定义日期选择器 PTXDatePickerView
- 微信小程序picker组件下拉框选择input输入框的实例
- 013 - 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序的日期选择器
- 微信小程序日期选择器实例代码
- 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序picker组件下拉框选择某个值动态添加input输入框
- 微信小程序picker组件下拉框选择input输入框的实例
- 微信小程序日期时间选择器使用方法
- 在微信小程序中实现时间日期的选择,并且显示当前选择的时间日期
- 微信小程序开发之选择器 时间选择器 日期选择器 地区选择器
- 微信小程序日期选择器