我在官方表单组件的基础上改出了几种比较常用的日期(时间)选择器,为了更清晰,我没给任何样式,wxss可根据个人喜好添加。
一、picker-view (嵌入页面的滚动选择器)
注意:其中只可放置组件,其他节点不会显示
picker-view-column
仅可放置于中,其孩子节点的高度会自动设置成与picker-view的选中框的高度一致
二、picker
从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
我这里用到的是多列选择器,时间选择器和日期选择器。
组件详情请进官网查看
https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
三.基于picker-view 进行完善的日期时间选择器。
1.新建目录:新建目录有两种方式
(1)在pages上单击右键,选择新建目录,输入你想起的名称。建好目录后在新目录上单 击右键,新建wxml/js/wxss/json四个文件,文件名与目录名最好一致,便于查找。
(2)在app.json 中的pages里直接新建目录"pages/目录名/里面四个文件名"。推荐使用,比较方便快捷。
注意:这里所有的目录名和文件名只能用英文和数字命名,不能用汉字。
2.日期选择器:
(1)示例代码:“pages/data1/data1”
data1.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}}" wx:key='{
{index}}' style="line-height: 50px">{
{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
{months}}" wx:key='{
{index}}' style="line-height: 50px">{
{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
{days}}" wx:key='{
{index}}' style="line-height: 50px">{
{item}}日</view>
</picker-view-column>
</picker-view>
</view>
data1.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,
year: date.getFullYear(),
months,
month: 2,
days,
day: 2,
value: [9999, 1, 1],
},
// 获取改变后的日期
bindChange(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]]
})
}
})
3.时间选择器
(1)示例代码:“pages/data2/data2”
data2.WXML
<view>
<view style="text-align:center;color:#45BCE8">{
{hour}}:{
{minute}}:{
{min}}<label style="float:right;margin-right:10px;">确定</label></view>
<view style="border-top:1px solid #45BCE8;height:25px;font-size:14px;">
<view class="time-title">时</view>
<view class="time-title">分</view>
<view class="time-title">秒</view>
</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{
{value}}" bindchange="bindChange">
<picker-view-column class="picker-text">
<view wx:for="{
{hours}}" wx:key='{
{index}}' style="line-height: 50px">{
{item}}</view>
</picker-view-column>
<picker-view-column class="picker-text">
<view wx:for="{
{minutes}}" wx:key='{
{index}}' style="line-height: 50px">{
{item}}</view>
</picker-view-column>
<picker-view-column class="picker-text">
<view wx:for="{
{mins}}" wx:key='{
{index}}' style="line-height: 50px">{
{item}}</view>
</picker-view-column>
</picker-view>
</view>
data2.WXSS
.