picker-view日期选择器

最新推荐文章于 2025-07-07 00:15:00 发布

原创

最新推荐文章于 2025-07-07 00:15:00 发布 · 4.5k 阅读

14 ·

CC 4.0 BY-SA版权

本文介绍了如何使用小程序的picker-view组件创建日期和时间选择器。功能包括提供便捷的时间日期选择，并展示了日期选择器、时间选择器以及精确到分钟的选择器的使用方法和效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小程序-时间选择器（picker-view）
一、功能介绍：
基于picker-view组件实现嵌入页面的选择器，用来实现日期选择器和时间选择器，可以更便捷、简单的选择时间日期。

二、使用方法：
点击页面时间，弹出悬浮窗，悬浮窗内是时间选择器，选定时间日期后点击确定即可。

三、效果展示：

1、页面：

在这里插入图片描述

2、日期选择器：

在这里插入图片描述
3、时间选择器：

在这里插入图片描述

4、精确到分的选择器：

在这里插入图片描述

四、示例代码：
1、日期选择器：

WXML代码
<view class="mask" catchtouchmove="preventTouchMove" wx:if="{
  
  {showModal}}"></view>
<view class="modalDlg" wx:if="{
  
  {showModal}}">
<view class="time_text">{
  
  {year}}年{
  
  {month}}月{
  
  {day}}日</view>
<picker-view wx:if="{
  
  {years.length>0 && months.length>0 && days.length>0}}" style="width: 100%; height: 500rpx;" indicator-style="height: 50px;" class="view_picker" value="{
  
  {value}}" bindchange="bindChange">
<picker-view-column style='margin-left: 20rpx;'>
<view wx:for="{
  
  {years}}" class="view_picker_text" wx:key="{
  
  {index}}">{
  
  {item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{
  
  {months}}" class="view_picker_text" wx:key="{
  
  {index}}">{
  
  {item}}月</view>
</picker-view-column>
<picker-view-column style='margin-right: 20rpx;'>
<view wx:for="{
  
  {days}}" class="view_picker_text" wx:key="{
  
  {index}}">{
  
  {item}}日</view>
</picker-view-column>
</picker-view>

<button style='width:100%;color:blue;' bindtap="go">确定</button>
</view>
<button bindtap="submit">日期选择</button>
WXSS代码
.mask{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
z-index: 9000;
opacity: 0.7;
}
.modalDlg{
width: 648rpx;
height: 748rpx;
position: fixed;
top: 35%;
left: 0;
z-index: 9999;
margin: -270rpx 50rpx;
background-color: rgb(233, 235, 232);
border-radiu