位置: IT常识 - 正文

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

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

推荐整理分享【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)(微信小程序游戏手游排行榜),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:微信小程序游戏手游排行榜,微信小程序开发公司,微信小程序怎么制作自己的小程序,微信小程序开发平台,微信小程序制作,微信小程序开发公司,微信小程序开发公司,微信小程序怎么制作自己的小程序,内容如对您有帮助,希望把文章链接给更多的朋友!

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

😀 作  者:我是夜阑的狗🐶

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

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

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

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

一、表单组件

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

1、picker

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

属性类型默认值必填说明最低版本header-textstring否选择器的标题,仅安卓可用2.11.0modestringselector否选择器类型1.0.0disabledbooleanfalse否是否禁用1.0.0bindcanceleventhandle否取消选择时触发1.9.90

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

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

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

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

  其中 fields 有效值:

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

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

二、实现日期选择器

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

【微信小程序】-- 表单组件 - 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 文件中定义变量 startDateIndex 和 endDateIndex,分别用于保存用户选择的入住日期和离开日期的时间戳,还需要 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.jsPage({ /** * 页面的初始数据 */ 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 实现日期选择器,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

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

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

更多专栏订阅:

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

订阅更多,你们将会看到更多的优质内容!!

本文链接地址:https://www.jiuchutong.com/zhishi/297344.html 转载请保留说明!

上一篇:头歌-CSS入门(头歌实践教学平台官网)

下一篇:警惕!建信信托暴雷,是否欺骗用户?(建信信托介绍)

  • 苹果手机怎么恢复删除的照片(苹果手机怎么恢复数据)

    苹果手机怎么恢复删除的照片(苹果手机怎么恢复数据)

  • oppo手机权限管理在设置的哪里(oppo手机权限管理在哪里找)

    oppo手机权限管理在设置的哪里(oppo手机权限管理在哪里找)

  • 东芝不做笔记本了吗

    东芝不做笔记本了吗

  • 音箱上的录音怎么录的(音响录音使用方法)

    音箱上的录音怎么录的(音响录音使用方法)

  • 苹果手机wifi信号弱怎么调(苹果手机wifi信号满格但网速慢)

    苹果手机wifi信号弱怎么调(苹果手机wifi信号满格但网速慢)

  • qq聊天图片没了(qq聊天图片没了怎么恢复)

    qq聊天图片没了(qq聊天图片没了怎么恢复)

  • 云录制是什么(腾讯会议云录制是什么)

    云录制是什么(腾讯会议云录制是什么)

  • 快手如何设置不允许下载视频(快手如何设置不让他看)

    快手如何设置不允许下载视频(快手如何设置不让他看)

  • 保存网页的快捷键(保存网页的快捷键是哪个)

    保存网页的快捷键(保存网页的快捷键是哪个)

  • 微信收款码是固定的吗(微信收款码是固定的还是随机生成的)

    微信收款码是固定的吗(微信收款码是固定的还是随机生成的)

  • nova5用三星屏吗(华为nova5z用的什么屏幕)

    nova5用三星屏吗(华为nova5z用的什么屏幕)

  • 荣耀9x的屏幕怎么样(荣耀9xoled屏幕的手机)

    荣耀9x的屏幕怎么样(荣耀9xoled屏幕的手机)

  • xna是什么(xna是什么意思网络用语)

    xna是什么(xna是什么意思网络用语)

  • 怎么看固态硬盘多大(怎么看固态硬盘的型号)

    怎么看固态硬盘多大(怎么看固态硬盘的型号)

  • 华为手环睡眠监测原理(华为手环睡眠监测准确么)

    华为手环睡眠监测原理(华为手环睡眠监测准确么)

  • ipad能不能外接一个内存卡(iPad能不能外接摄像头)

    ipad能不能外接一个内存卡(iPad能不能外接摄像头)

  • 手机怎样把几张照片合成一张照片(手机怎样把几张图片做成一个文档)

    手机怎样把几张照片合成一张照片(手机怎样把几张图片做成一个文档)

  • mate30pro有没有呼吸灯(华为mate30pro有呼叫功能吗)

    mate30pro有没有呼吸灯(华为mate30pro有呼叫功能吗)

  • word文档不允许修改(word文档不允许修改怎么设置)

    word文档不允许修改(word文档不允许修改怎么设置)

  • 荣耀v20取消虚拟按键(荣耀手机虚拟)

    荣耀v20取消虚拟按键(荣耀手机虚拟)

  • 电子照片怎么做(电子照片怎么做成jpg格式)

    电子照片怎么做(电子照片怎么做成jpg格式)

  • 磨砂照片怎么拍(最近流行的磨砂照片怎么拍)

    磨砂照片怎么拍(最近流行的磨砂照片怎么拍)

  • p30移动版有什么区别(p30移动定制版)

    p30移动版有什么区别(p30移动定制版)

  • 一加怎么从振动改铃声(一加手机调成了振动模式怎么返回)

    一加怎么从振动改铃声(一加手机调成了振动模式怎么返回)

  • 金科德定时器怎么设置时间(金科德定时器怎么复位)

    金科德定时器怎么设置时间(金科德定时器怎么复位)

  • phpcms如何破解管理员密码(php源码破解)

    phpcms如何破解管理员密码(php源码破解)

  • 银行日记账写错了怎么改
  • 报关单找不到了怎么办
  • 转让土地使用权会计分录怎么做
  • 专项资金可以存定期吗
  • 保证金存款余额
  • 应入固定资产的已做费用,如何调账
  • 未收到发票暂估入库的进项税额可以暂估进原料成本吗
  • 个调税手续费会计分录怎么写?
  • 隔年的费用发票怎样入账
  • 应收账款无法收回分录
  • 营改增后还有建筑业发票吗
  • 职工因公出差伙食补助标准
  • 企业恢复生产经营方案
  • 关联申报不报有影响吗
  • 采购原材料运费会计分录
  • 报税提示您可能缺少相关组件怎么处理
  • 开票金额开多了,对公司有影响吗
  • 售后服务领用材料分录
  • 电脑不支持windows 11
  • 系统日志在哪里打开
  • win 11 中文
  • 孕妇可以喝蜂蜜水吗?
  • windows10如何关机
  • 企业所得税如何计算
  • 退休返聘工资如何申报个人所得税
  • 用彩泥可以做什么食物?
  • php如何删除数组元素
  • thinkphp saveall
  • php-xml
  • 【深度学习时间序列预测案例】零基础入门经典深度学习时间序列预测项目实战(附代码+数据集+原理介绍)
  • php 后期静态绑定
  • ldconfig命令怎么用
  • 合伙企业退伙个税
  • 信息技术服务是什么公司
  • 公司的财务报表能看出什么
  • 补充医疗保险属于什么
  • java的范式
  • 注册子公司需要的材料
  • 金蝶软件如何新增账套
  • 邮电通信企业业务收入包括哪些内容?
  • 一般纳税人也会被税吗
  • 应收利息和应收股利属于什么科目
  • 去税务局流程
  • 小规模纳税人转一般纳税人的条件
  • 在建工程待摊支出结转
  • 滴滴打车老板起源故事
  • 暂估入库已结转成本,下月票回来,还用红冲吗
  • 搬迁赔偿款
  • 农产品加计扣除1%账务处理
  • 工业总产值如何计算的
  • 垫款报销
  • 非同一控制下企业合并,企业合并成本包括
  • 单位租用员工个人的车可以不收租吗
  • 理财产品利息计入本金吗
  • 一般纳税人月底进项税销项税怎么做分录
  • 购买金税盘取得的发票
  • 暂估的进项税额怎么抵扣
  • 注册表的使用
  • windows iis配置
  • linux修改yum
  • linux系统常用命令怎么记住
  • xp系统怎么弄成win7
  • gzip压缩慢
  • windows与linux的关系
  • ipguard关闭进程
  • ubuntu系统键盘无用
  • linux getuid
  • w1020h2更新失败
  • Android OpenGL ES(一)----必备知识
  • react-redux用法
  • android通知消息
  • css一个页面跳转到另一页面
  • OKHttp源码解析-ConnectionPool对Connection重用机制&Http/Https/SPDY协议选择
  • python递归写法
  • js中overlay
  • android获取屏幕大小
  • 成都税务局网站首页
  • 车险包括车船费吗
  • 去地税开个人发票
  • 工会经费怎么缴付
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设