小程序自定义时间选择组件开发-CSDN博客

本文链接：https://blog.csdn.net/weixin_43046729/article/details/106375960

博主不满意现有的小程序时间选择组件，于是进行了二次开发，创建了一个新的组件。文章分享了开发过程，并提供了演示Demo和GitHub源码链接。

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

最近做的小程序时间选择领导感觉太陋，不好看，不够实用，然后我翻了一下其他人的组件，发现了一款日历组件，但是不符合要求哇，蒙版了，时间修改了都不太行，就做了一次二次开发，组件拿走吧

//正文
<!--index.wxml-->
<!--
  @param showModal:boolean 显示/隐藏 example->false/true
  @param date:string 默认日期：'2018-01-02'格式
  @param propA:string 默认时分：'10:30'格式
  @param enableTime:boolean 是否显示时分选择 example->false/true
  @param bindonselectdate:functionName 选择完毕后触发的函数
-->
<view class="container">
    <view class="row">
    <view class="label">时间选择</view>
    <date-picker date="{{'2018-01-02'}}" bindonselectdate="handleSelecteDate" />
    <date-picker showModal="{{true}}"  date="{{'2018-01-02'}}" propA="{{'10:30'}}"  bindonselectdate="handleSelecteDate" enableTime="{{true}}"/>
    </view>
</view>
<!--js -->
 handleSelecteDate(e) {
   consoel.log(e.detail.date)
 }
<!--执行上面之后会返回日期控件所展示的时间 -->