微信小程序-日期时间选择器_项嵌入时间选择器

我在官方表单组件的基础上改出了几种比较常用的日期（时间）选择器，为了更清晰，我没给任何样式，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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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]]
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

data2.WXSS