在微信小程序使用picker实现日期选择

Ccousin

已于 2023-03-15 16:07:09 修改

阅读量3.7k

点赞数

文章标签：微信小程序小程序前端

于 2023-03-15 10:25:31 首次发布

Ccousin

本文链接：https://blog.csdn.net/weixin_47600678/article/details/129545530

版权

微信小程序开发项目中，或多或少要使用时间选择器picker实现日期选择。选择开始日期和结束日期

在这里插入图片描述
而且选择开始时间后，选择结束时间，能够选择的日期不能比开始日期还要早。要实现以上效果可这样写：
在wxml中写

<view class="ranges all">
                <view class="picker-title">日期范围:</view>
                <!-- 时间段 -->  
                    <view class="picker_group">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ccousin

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
在微信小程序使用picker实现日期选择

微信小程序使用picker实现日期选择
复制链接

扫一扫

wxcdatepicker微信小程序日期时间选择器

08-10

wxc-datepicker：微信小程序日期、时间选择器

微信小程序实现自定义picker选择器弹窗内容

08-27

微信小程序实现自定义Picker选择器弹窗内容是指在微信小程序中实现自定义的Picker选择器弹窗内容，满足开发者对选择器弹窗内容的个性化需求。本文将详细介绍微信小程序实现自定义Picker选择器弹窗内容的方法和技术...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序 - 日期时间段选择 - picker之日期选择器

05-08

1342

picker组件是微信小程序提供的一个用于选择器，支持单列选择和多列选择，常用于日期、时间选择或自定义列表选择等场景。通过上述步骤，我们掌握了如何在微信小程序中利用picker组件处理数组对象，不仅增强了用户体验，也展示了数据处理的灵活性。你是否在实际项目中遇到过更复杂的场景？如何处理多维度的选择器或者自定义样式？欢迎在评论区分享你的经验与挑战，我们共同探讨，让小程序开发之路更加顺畅。欢迎来到我的博客，很高兴能够在这里和您见面！

微信小程序使用picker-view自定义时间选择器

LRQQHM的博客

03-01

882

【代码】微信小程序简单自定义时间选择器。

微信小程序之日期时间筛选器实现（支持年月日时分）

就是有点怕怕的博客

01-14

1万+

开发微信小程序过程中，有个需求需要用到日期时间筛选器，查看微信官方文档后，发现官方文档的picker筛选器只能单独支持日期或者是时间，所以为了实现需求自己参考企业微信封装了个日期时间筛选器组件。原理筛选器的实现，我参考的是小程序官方方式，通过半屏弹窗（mp-half-screen-dialog）结合picker_view进行日期、时间的选择，最终在选择时间后，通过事件触发返回一个change事件，其中参数值为毫秒级时间戳。实现 1.弹窗的显隐：在组件的 properties 中传入一个 show 字

微信小程序时间选择器年月日时分

shaojiashun的博客

09-15

653

1.新建pickertime.js。

微信小程序自定义日期选择器组件

每天都要努力学习哦~~

09-07

7506

【代码】微信小程序自定义日期选择器组件。

使用原生小程序组件Picker自定义日期时间选择器

ITKidKid的博客

08-16

1万+

选择器可以看到Picker类型有5种，具体可以查看微信开放文档 picker。Picker（选择器）是一种常见的用户界面控件，用于从多个选项中选择一个或多个选项。在小程序中，Picker 是一种可用于选择日期、时间、地点等信息的组件。小程序中的 Picker 组件提供了几种不同的模式，包括等。（单列选择器）：该模式下，可以通过设置range属性指定一个数组作为选择器的选项列表，用户可以从中选择一个选项。（多列选择器）：该模式下，可以通过设置range。

小程序日期（日历）时间 选择器组件

少年的范儿的博客

02-24

5790

封装一个很好用 小程序的日期（日历）时间组件，日期用日历选择，时间用 小程序 的 picker-view 来实现

微信小程序使用vant时间选择器二次封装成自定义区间时间选择

weixin_42017221的博客

02-09

829

showtime是控制时间选择器显示隐藏的，通过事件改变。

微信小程序选择器picker的使用（selector 普通选择器）

m0_52244931的博客

03-10

2437

从底部弹起的滚动选择器。就是类似于element-ui中的下拉选择器。

微信小程序之picker日期和时间选择器

01-19

下面来介绍小picker，分三种样式：默认的自己可以定义数据的 mode=”time”是时间选择器 mode=”date”是日期选择器 跟其他的一样先来看下picker.wxml <text class=page__title>picker 选择器 <...

微信小程序使用picker实现时间和日期选择框功能【附源码下载】

08-28

picker组件是微信小程序中的一种基础控件，用于实现选择功能。它可以用来选择日期、时间、城市等信息。基本语法如下： ```html <picker value="{{pickerValue}}" range="{{pickerRange}}" bindchange=...

微信小程序选择开始时间和结束时间组件

wst26311的博客

01-22

882

微信小程序选择开始时间和结束时间组件

uniapp开发微信小程序之时间选择器

only_zing的博客

05-30

3945

时间范围选择器的ui组件以及对时间范围选择器插件的使用和改善

微信小程序--多种类型日期选择器（年月、月日...）

weixin_49909441的博客

05-12

2万+

这里写自定义目录标题微信小程序--多种类型日期选择器（年月、月日...）时间选择器（年月日）时间选择器（年月）时间选择器（年）时间选择器（月日）时间选择器（月）时间选择器（日） 微信小程序–多种类型日期选择器（年月、月日…）在业务开发的过程中，有许多对picker选择器的使用场景，根据开发需要列出了几种常见的类型，可供大家共同参考、学习时间选择器（年月日）效果图： wxml： <picker mode="date" header-text="选择时间" value="{{date}}" bi

picker-view、微信小程序自定义时间选择器（非官方）

九州县令的博客

06-07

983

picker-view自定义时间选择器 官网的自定义时间选择器比较简陋、日期不准下面是我自己写的一个demo <view class="baseList"> <view class="list clearfix"> <view class="fl listName"><text class="reqIcon">*</text> 参展时间</view> <view class="listMain fr" bi

微信小程序时间选择器弹窗时分秒

05-27

好的，关于微信小程序时间选择器弹窗时分秒的问题，你可以通过以下代码来实现： 1. 在 WXML 文件中添加以下代码： ``` <view class="container"> <view class="btn" bindtap="showTimePicker">选择时间</view> </view> <view class="picker-container" wx:if="{{showPicker}}"> <view class="picker-mask" bindtap="hidePicker"></view> <view class="picker"> <picker mode="time" value="{{time}}" bindchange="bindTimeChange"> <view class="time-picker"> {{time}} </view> </picker> </view> </view> ``` 2. 在相关的 WXSS 文件中添加以下代码： ``` .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .btn { background-color: #007aff; color: #fff; padding: 10px 20px; border-radius: 5px; } .picker-container { position: fixed; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; } .picker-mask { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; } .picker { position: absolute; bottom: 0; left: 0; right: 0; background-color: #fff; padding: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; } .time-picker { display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: bold; margin: 20px 0; } ``` 3. 在相关的 JS 文件中添加以下代码： ``` Page({ data: { showPicker: false, time: '12:00', }, showTimePicker() { this.setData({ showPicker: true, }); }, hidePicker() { this.setData({ showPicker: false, }); }, bindTimeChange(e) { this.setData({ time: e.detail.value, }); }, }); ``` 这样就可以实现微信小程序时间选择器弹窗时分秒了，具体效果可以通过微信开发者工具进行查看。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交