【微信小程序】进阶篇 -- 表单组件 - picker 实现日期选择器（五十三）

• 💌 所属专栏：【微信小程序开发教程】

• 😀 作  者：我是夜阑的狗🐶

• 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

• 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

  
  

  您的点赞、关注、收藏、评论，是对我最大的激励和支持！！！🤩 🤩 🤩

  

  文章目录

  • 前言
  • 一、表单组件
  • • • 1、picker
      • 二、实现日期选择器
      • 总结

        ---

        前言

          大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第53篇文章;

          今天开始学习微信小程序的第40天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。

          专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。

          如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

        ---

        一、表单组件

          最近比较忙，所以更新暂时先缓缓，这一篇是穿插进来的，原因是有个朋友问我小程序关于实现日期选择器的一些问题，由于这个我用的不是很多，自己也亲手写了一遍，踩了挺多坑的。接下来就来讲解一下表单组件 - picker 实现日期选择器。话不多说，让我们开始吧，勇敢牛牛不怕困难。

        

        1、picker

          首先简单讲一下 picker 组件的定义，它是从底部弹起的滚动选择器。下面是 picker 组件常用的属性：

        属性	类型	默认值	必填	说明	最低版本
        header-text	string		否	选择器的标题，仅安卓可用	2.11.0
        mode	string	selector	否	选择器类型	1.0.0
        disabled	boolean	false	否	是否禁用	1.0.0
        bindcancel	eventhandle		否	取消选择时触发	1.9.90

          除了上述通用的属性，对于不同的 mode，picker 拥有不同的属性。mode 有以下选项：

        合法值	说明
        selector	普通选择器
        multiSelector	多列选择器
        time	时间选择器
        date	日期选择器
        region	省市区选择器

          待会要用到日期选择器：mode = date ，所以简单了解一下具体参数：

        属性名	类型	默认值	说明
        value	string	当天	表示选中的日期，格式为"YYYY-MM-DD"
        start	string		表示有效日期范围的开始，字符串格式为"YYYY-MM-DD"
        end	string		表示有效日期范围的结束，字符串格式为"YYYY-MM-DD"
        fields	string	day	有效值 year,month,day，表示选择器的粒度
        bindchange	eventhandle		value 改变时触发 change 事件，event.detail = {value}

          其中 fields 有效值：

        值	说明
        year	选择器粒度为年
        month	选择器粒度为月份
        day	选择器粒度为天

          这里参数比较多，所以要一定仔细了解清楚，方便后续开发以及避免踩坑。

        二、实现日期选择器

          使用微信小程序的 picker 组件来实现入住日期和离开日期选择功能，可以通过以下步骤来实现：

          Step1、在 WXML 文件中添加两个 picker 组件，分别用于选择入住日期和离开日期。

        message.wxml

手机扫描二维码访问