返回顶部
首页 > 资讯 > 精选 >微信小程序日历插件怎么实现
  • 478
分享到

微信小程序日历插件怎么实现

2023-06-26 08:06:51 478人浏览 独家记忆
摘要

这篇文章主要介绍了微信小程序日历插件怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序日历插件怎么实现文章都会有所收获,下面我们一起来看看吧。微信小程序的日历插件,主要针对酒店选择时间段的日历,带

这篇文章主要介绍了微信小程序日历插件怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序日历插件怎么实现文章都会有所收获,下面我们一起来看看吧。

微信小程序的日历插件,主要针对酒店选择时间段的日历,带有公历的节日。

微信小程序日历插件怎么实现

主要函数: 
通过选择入住与离店时间,记录对应的时间段,判断选择的开始时间和结束时间,通过改变背影颜色连成对应时间段。

  selectDataMarkLine: function () { let dateList = this.data.dateList; let { checkInDate, checkOutDate } = wx.getStorageSync("ROOM_SOURCE_DATE"); let curreInid = checkInDate.substr(0, 4) + "-" + (checkInDate.substr(5, 2) < 10 ? checkInDate.substr(6, 1) : checkInDate.substr(5, 2));//选择入住的id let curreOutid = checkOutDate.substr(0, 4) + "-" + (checkOutDate.substr(5, 2) < 10 ? checkOutDate.substr(6, 1) : checkOutDate.substr(5, 2));//选择离店的id let dayIn = checkInDate.substr(8, 2) >= 10 ? checkInDate.substr(8, 2) : checkInDate.substr(9, 1);//选择入住的天id let dayOut = checkOutDate.substr(8, 2) >= 10 ? checkOutDate.substr(8, 2) : checkOutDate.substr(9, 1);//选择离店的天id let monthIn = checkInDate.substr(5, 2) >= 10 ? checkInDate.substr(5, 2) : checkInDate.substr(6, 1);//选择入店的月id let monthOut = checkOutDate.substr(5, 2) >= 10 ? checkOutDate.substr(5, 2) : checkOutDate.substr(6, 1);//选择离店的月id if (curreInid == curreOutid) {//入住与离店是当月的情况 for (let i = 0; i < dateList.length; i++) { if (dateList[i].id == curreInid) { let days = dateList[i].days; for (let k = 0; k < days.length; k++) { if (days[k].day >= dayIn && days[k].day <= dayOut) {              days[k].class = days[k].class + ' bgitem'; } if (days[k].day == dayIn) {              days[k].class = days[k].class + ' active';              days[k].inday = true; } if (days[k].day == dayOut) {              days[k].class = days[k].class + ' active';              days[k].outday = true; } } } } } else {//跨月 for (let j = 0; j < dateList.length; j++) { if (dateList[j].month == monthIn) {//入住的开始月份 let days = dateList[j].days; for (let k = 0; k < days.length; k++) { if (days[k].day >= dayIn) {              days[k].class = days[k].class + ' bgitem'; } if (days[k].day == dayIn) {              days[k].class = days[k].class + ' active';              days[k].inday = true; } } } else {//入住跨月月份 if (dateList[j].month < monthOut) {//离店中间的月份 let days = dateList[j].days; for (let k = 0; k < days.length; k++) {              days[k].class = days[k].class + ' bgitem'; } } else if (dateList[j].month == monthOut) {//离店最后的月份 let days = dateList[j].days; for (let k = 0; k < days.length; k++) { if (days[k].day <= dayOut) {                days[k].class = days[k].class + ' bgitem'; } if (days[k].day == dayOut) {                days[k].class = days[k].class + ' active';                days[k].outday = true; } } } } } } this.setData({      dateList: dateList }) },

关于“微信小程序日历插件怎么实现”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“微信小程序日历插件怎么实现”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

--结束END--

本文标题: 微信小程序日历插件怎么实现

本文链接: https://lsjlt.com/news/308206.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序日历插件怎么实现
    这篇文章主要介绍了微信小程序日历插件怎么实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序日历插件怎么实现文章都会有所收获,下面我们一起来看看吧。微信小程序的日历插件,主要针对酒店选择时间段的日历,带...
    99+
    2023-06-26
  • 微信小程序日历插件怎么用
    这篇“微信小程序日历插件怎么用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序日历插件怎么用”文章吧。属性如下:使用...
    99+
    2023-06-26
  • 微信小程序中日历/日期选择插件怎么用
    这篇文章给大家分享的是有关微信小程序中日历/日期选择插件怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下wxml<view class="...
    99+
    2024-04-02
  • 微信小程序日历签到怎么实现
    这篇文章主要介绍“微信小程序日历签到怎么实现”,在日常操作中,相信很多人在微信小程序日历签到怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序日历签到怎么实现”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-26
  • 微信小程序实现日历打卡
    本文实例为大家分享了微信小程序实现日历打卡的具体代码,供大家参考,具体内容如下 样式比较简单,要改自己改 let currentMonthDays = new Date(year,...
    99+
    2024-04-02
  • 小程序下订单日历插件怎么实现
    今天小编给大家分享一下小程序下订单日历插件怎么实现的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。  这个插件分为上下两部分,...
    99+
    2023-06-26
  • 微信小程序实现日历签到功能
    本文实例为大家分享了微信小程序实现日历签到的具体代码,供大家参考,具体内容如下 wxml: <!--pages/signin/signin.wxml--> <vi...
    99+
    2024-04-02
  • 微信小程序实现简单日历效果
    本文实例为大家分享了微信小程序实现日历效果的具体代码,供大家参考,具体内容如下 效果: wxml: <!-- 日历 -->         <view class...
    99+
    2024-04-02
  • 微信小程序向系统日历添加事件(提醒)实现
    直接上代码 // pages/calendar/calendar.jsPage({ // 点击添加日程按钮 handleAddCalendar() { wx.getSetting({ success(res) { ...
    99+
    2023-09-22
    微信小程序 小程序 javascript
  • 微信小程序中的历史记录怎么实现
    在微信小程序中实现历史记录功能通常需要以下步骤: 数据存储:首先需要将用户的历史记录数据存储在小程序的数据库中,可以使用小程序自...
    99+
    2024-04-09
    微信小程序
  • 微信小程序如何实现数据遍历
    小编给大家分享一下微信小程序如何实现数据遍历,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!制作数据遍历的步骤在index.js中...
    99+
    2024-04-02
  • 微信小程序第三方插件怎么接入
    这篇文章主要介绍“微信小程序第三方插件怎么接入”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序第三方插件怎么接入”文章能帮助大家解决问题。  一、开通插件功能  小程序开发者无需重新注册帐号...
    99+
    2023-06-26
  • 微信小程序的视频插件怎么使用
    本篇内容主要讲解“微信小程序的视频插件怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序的视频插件怎么使用”吧!一、在小程序中引入插件。进入微信公众平台,在设置中找到第三方服务,在...
    99+
    2023-06-26
  • 微信小程序tabBar怎么实现
    这篇文章主要介绍“微信小程序tabBar怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序tabBar怎么实现”文章能帮助大家解决问题。tabBar先创建几个页面,要注意文件夹和页面名...
    99+
    2023-06-26
  • 微信小程序父子组件通信怎么实现
    这篇文章主要介绍“微信小程序父子组件通信怎么实现”,在日常操作中,相信很多人在微信小程序父子组件通信怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”微信小程序父子组件通信怎么实现”的疑惑有所帮助!接下来...
    99+
    2023-07-04
  • 微信小程序如何实现日期时分组件
    这篇文章主要介绍了微信小程序如何实现日期时分组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如图所示效果第一步新建picker组件文件1,pickerTime.js组件代码...
    99+
    2023-06-25
  • 微信小程序实现日期格式化
    最近做了一个微信小程序的项目,关于后端给我传递日期的时候,我拿到的是一串数字如:createDate: 1552117531000 ,这是一个列的创建时间,现在却变成了一串数字,这是...
    99+
    2024-04-02
  • 微信小程序怎么实现小说阅读小程序
    这篇文章主要介绍了微信小程序怎么实现小说阅读小程序,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一、先来上图:二、然后下面是详细的说明首先先...
    99+
    2024-04-02
  • 小程序实现日历效果
    本文实例为大家分享了小程序实现日历效果的具体代码,供大家参考,具体内容如下 项目中需要做一个日历,最终效果如下: 日历实现是可以点击日期左右箭头和弹窗选择日期,下面上代码: htm...
    99+
    2024-04-02
  • 微信小程序中怎么实现组件传值
    今天就跟大家聊聊有关微信小程序中怎么实现组件传值,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。父传子<!-- 父组件A w...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作