【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)

这篇具有很好参考价值的文章主要介绍了【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)

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

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

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

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


前言

  大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第53篇文章;
  今天开始学习微信小程序的第40天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
  专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。


一、表单组件

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

【微信小程序】-- 表单组件 - 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

  除了上述通用的属性,对于不同的 modepicker 拥有不同的属性。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

<view>
  <view class="date-picker">
    <view></view>
    <picker mode="date"  end="{{checkMaxDate}}" value="{{startDateIndex}}" bindchange="bindCheckinDateChange">
      <view class="picker-item">入住日期: {{startDateIndex}}</view>
    </picker>
  </view>
  <view>
  ========
  </view>
  <view class="date-picker">
    <view></view>
    <picker mode="date" start="{{checkMinDate}}" value="{{endDateIndex}}" bindchange="bindCheckoutDateChange">
      <view class="picker-item">离开日期: {{endDateIndex}}</view>
    </picker>
  </view>
</view>

  Step2、在 JS 文件中定义变量 startDateIndexendDateIndex,分别用于保存用户选择的入住日期和离开日期的时间戳,还需要 checkMaxDate 来设置入住日期的最大日期范围,checkMinDate 来设置离开日期的的最小日期范围。

  Step3、在设置入住日期和离开日期的 picker 组件时,可以使用 bindchange 事件监听用户选择的日期,并在回调函数中进行处理。具体地,可以在回调函数中通过 setData 方法更新入住日期和离开日期的值,并根据当前选择的日期设置另一个 picker 组件的最小可选日期或者最大可选日期。

  Step4、在 onLoad 方法中,设置离开日期的最小可选日期为明天的日期,并存储在 checkMinDate 中,和入住日期的最大可选日期 checkMaxDate

  注意:这里 toISOString() 方法返回一个符合 ISO 8601 标准的日期字符串,包括年、月、日、时、分、秒和毫秒等信息。获取到时间不一定我们当前的,想要获取本地的时间就要使用 toLocaleDateString() 方法将日期格式化为字符串,这两种方法获取到时间字符串是不一样的,分别是 2023-4-7,2023/4/7。

message.js

// pages/contact/contact.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    startDateIndexInit: '',
    checkMaxDate: '',
    startDateIndex: '',

    endDateIndexInit: '',
    checkMinDate: '',
    endDateIndex: '',
  },

  // 在入住日期 picker 组件的 bindchange 事件回调函数中更新入住日期的值,并根据当前选择的日期设置离开日期的最小可选日期
  bindCheckinDateChange: function (e) {
    const checkinDate = e.detail.value;
    const todayStr = new Date(checkinDate);
    const td = new Date(todayStr);

    td.setDate(td.getDate() + 1);
    // const td = td.toISOString().substring(0, 10);

    // const  new Date(checkinDate).getTime() + 24 * 60 * 60 * 1000
    console.dir('In ======> '+ td.toISOString().substring(0, 10));
    this.setData({
      startDateIndex: checkinDate,
      checkMinDate: td.toISOString().substring(0, 10)
    });
  },

  // 在离开日期 picker 组件的 bindchange 事件回调函数中更新离开日期的值,并根据当前选择的日期设置入住日期的最大可选日期
  bindCheckoutDateChange: function (e) {
    const checkoutDate = e.detail.value;

    const yesterdayStr = new Date(checkoutDate);
    const yd = new Date(yesterdayStr);

    yd.setDate(yd.getDate() - 1);

    // console.dir(checkoutDate); 
    console.dir('Out ======> '+ yd.toISOString().substring(0, 10));
    if (checkoutDate <= this.data.startDateIndex) {
      wx.showToast({
        title: '离开日期必须晚于入住日期',
        icon: 'none'
      });
      return;
    }
    // new Date(checkoutDate).getTime() - 24 * 60 * 60 * 1000
    this.setData({
      endDateIndex: checkoutDate,
      checkMaxDate: yd.toISOString().substring(0, 10)
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const today = new Date();
    const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000);
    console.dir("today ==== "+ today);
    console.dir("tomorrow ==== "+ tomorrow.toLocaleDateString().substring(0, 10));
    this.setData({
      // startDateIndexInit: today.getTime(),
      checkMaxDate: today.toISOString().substring(0, 10),
      startDateIndex: today.toISOString().substring(0, 10),

      checkMinDate: tomorrow.toISOString().substring(0, 10),
      // endDateIndexInit: tomorrow.getTime(), // 设置为明天的日期
      endDateIndex: tomorrow.toISOString().substring(0, 10),
    });
  },
})

  在上面的代码中,入住日期 picker 组件的值为 startDateIndex,离开日期 picker 组件的值为 endDateIndex

  在bindCheckinDateChange 方法中,更新入住日期的值为用户选择的日期,并根据该日期设置离开日期的最小可选日期为入住日期的后一天,即 checkinDate 的时间戳加上一天的时间戳值。

  注意:这里有个坑点,pick 组件的 start 或者 end 属性赋值时,别直接把时间戳赋值进去,看下前面的参数表就能知道这里要字符串格式为"YYYY-MM-DD"的字符串。

  在 bindCheckoutDateChange 方法中,更新离开日期的值为用户选择的日期,并判断离开日期是否晚于入住日期。如果不是,弹出提示框并返回;如果是,根据离开日期的值设置入住日期的最大可选日期为离开日期的前一天,即 checkoutDate 的时间戳减去一天的时间戳值。

运行效果:

【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)


总结

  感谢观看,这里就是表单组件 - picker 实现日期选择器,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉

更多专栏订阅:

  • 😀 【LeetCode题解(持续更新中)】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记(华为云)】
  • 🦄 【程序错误解决方法(建议收藏)】
  • 🚀 【软件安装教程】



订阅更多,你们将会看到更多的优质内容!!文章来源地址https://www.toymoban.com/news/detail-414974.html

到了这里,关于【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包