广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序实现根据日期和时间排序功能
  • 946
分享到

微信小程序实现根据日期和时间排序功能

2024-04-02 19:04:59 946人浏览 独家记忆
摘要

最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助。 需求分析(这是已

最近接手了一个小程序项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助。

需求分析(这是已完成的效果)

这里有具体的日期时间和具体的小时时间,后端数据给我传来的是这样式的


startDate: "2021-08-27" //日期年月日
startTime: "10:15" //开始时间
endTime: "20:00"   //结束时间

实现代码


//  根据日期排序
  comparedate: function (property) {
    // console.log(property); 
    return function (a, b) { 
    var value1 = Date.parse(new Date(a[property]));  //转换成十六进制获取日期
    var value2 = Date.parse(new Date(b[property]));
    // console.log( value1 -value2);
      return value1 - value2; //value1-value2是从小到大排序 反过来则是从大到小的排序
 
    }
},

// 根据时间排序 时间格式是10:00的个格式,所以我们用到slice进行截取字符串前两位,通过小时来进行比较时间的先后顺序
compareahour: function (property) {
  // console.log(property);
  return function (a, b) {
    var value1 = a.startTime.slice(0,2)  //slice(0,2) 获取字符串前两位进行比较
    var value2 = b.endTime.slice(0,2)
    // console.log(value1-value2)
   return value1 -value2 //value1-value2是从小到大排序 反过来则是从大到小的排序

  }
},

  
MyTaskList:function(){
    var that=this
    wx.request({
      url: '请求接口',
      data: {
       //放参数
      },
      method: "POST",
      header: {
        'content-type': 'application/JSON'
      },
      success: function (res) {
        // 根据时间排序
        if(res.data.list.orderDetailsList!=""){
          var dataListaaa=res.data.list.orderDetailsList;
          dataListaaa.forEach((item) => {
             var starttime=item.startTime
              var endtime =item.endTime

    
          })
                      dataListaaa.sort(that.compareatime('starttime')); //调用上面时间时间排序的方法
        }
        //根据日期排序
        if(res.data.data=="success"){
          console.log(res);
          if(res.data.list.orderDetailsList!=""){
            var dataList=res.data.list.orderDetailsList;
            dataList.forEach((item) => {
            //循环之后进行转换时间的格式
              var month=new Date(item.startDate.replace(/-/g,'/')).getMonth()+1;
              var day=new Date(item.startDate.replace(/-/g,'/')).getDate();
              var dateVal=month+'月'+day+'日'; //拼接‘月' 和‘日'
              item['startDateFORMat']=dateVal;
                // console.log(day);
                
              // console.log(dateVal);
            })
                         dataList.sort(that.comparedate('startDate')); //根据日期排序使用的方法结合上面的comparedate

         
  
  },

总结

以上就是微信小程序根据日期和时间进行排序的全部过程,希望对大家有所帮助。

本文的全部内容为大家介绍完了,也希望大家多多支持编程网。

--结束END--

本文标题: 微信小程序实现根据日期和时间排序功能

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

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序实现根据日期和时间排序功能
    最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助。 需求分析(这是已...
    99+
    2022-11-12
  • sql怎么根据日期和时间降序排序
    在SQL中,可以使用`ORDER BY`子句来进行排序。要按照日期和时间降序排序,可以使用以下步骤:1. 确保日期和时间以正确的格式...
    99+
    2023-10-11
    sql
  • 微信小程序实现日期时间筛选器
    开发微信小程序过程中,有个需求需要用到日期时间筛选器,查看微信官方文档后,发现官方文档的picker筛选器只能单独支持日期或者是时间,所以为了实现需求自己参考企业微信封装了个日期时间...
    99+
    2022-11-13
  • 微信小程序怎么使用picker实现时间和日期选择框功能
    这篇文章主要介绍微信小程序怎么使用picker实现时间和日期选择框功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:1、效果展示2、关键代码① index.wxml<...
    99+
    2022-10-19
  • 微信小程序wxs日期时间处理的实现示例
    目录1、时间戳转日期2、UTC转北京时间WXS(WeiXin Script)是小程序的一套脚本语言,wxs 与 javascript 是不同的语言,有自己的语法,并不和 javasc...
    99+
    2022-11-12
  • 使用微信小程序实现拖拽排序功能
    使用微信小程序实现拖拽排序功能 示例代码刚开始学习微信小程序时,我一直以为实现拖拽排序功能是很困难的事情。然而,通过深入研究官方文档和尝试不同的方法,我终于成功地实现了这一功能。在本篇文章中,我将分享实现拖拽排序功能的具体代码示例。首先,在...
    99+
    2023-11-21
    微信小程序 功能实现 拖拽排序
  • 使用微信小程序实现表格排序功能
    使用微信小程序实现表格排序功能随着微信小程序的流行,越来越多的开发者开始探索如何利用微信小程序实现更多有趣实用的功能。其中,实现表格排序功能是许多开发者感兴趣的一个话题。本文将介绍如何使用微信小程序实现表格排序功能,并提供具体的代码示例。一...
    99+
    2023-11-21
    表格 排序 微信小程序
  • 微信小程序实现长按拖拽排序功能
    工作中遇到一个上传图片长按后拖动排序的一个功能,于是写下了一个小demo。希望能对你有遇到的问题有帮助。 演示效果: wxml <view class='outer' >...
    99+
    2022-11-13
  • 微信小程序如何实现日期时分组件
    这篇文章主要介绍了微信小程序如何实现日期时分组件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。如图所示效果第一步新建picker组件文件1,pickerTime.js组件代码...
    99+
    2023-06-25
  • 微信小程序实现时间轴
    本文实例为大家分享了微信小程序实现时间轴的具体代码,供大家参考,具体内容如下 一、显示样式 二、代码  1.wxml: <view class="header"&g...
    99+
    2022-11-13
  • 微信小程序实现日历签到功能
    本文实例为大家分享了微信小程序实现日历签到的具体代码,供大家参考,具体内容如下 wxml: <!--pages/signin/signin.wxml--> <vi...
    99+
    2022-11-13
  • 微信小程序实现日期格式化
    最近做了一个微信小程序的项目,关于后端给我传递日期的时候,我拿到的是一串数字如:createDate: 1552117531000 ,这是一个列的创建时间,现在却变成了一串数字,这是...
    99+
    2022-11-13
  • 【微信开发】微信小程序实现实时聊天功能
    最近在做一个项目,需要运用到实时聊天功能,分享一下。      分为: 界面如何布局以及细节; 如何实现实时更新; 全部代码展示;         一、界面如何布局以及细节:         1.说到底,聊天界面就是循环一个数组,每一行...
    99+
    2023-09-02
    微信小程序 小程序
  • 微信小程序如何实现长按拖拽排序功能
    本篇内容主要讲解“微信小程序如何实现长按拖拽排序功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序如何实现长按拖拽排序功能”吧!演示效果:wxml<view class...
    99+
    2023-06-30
  • 微信小程序实现时间选择
    本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下  xml:  <view class="day-check" style=...
    99+
    2022-11-13
  • 微信小程序实现日期范围选择
    本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下 样式如下: 分别点击开始日期和结束日期选择时间(底部弹框): date.wxml:  <...
    99+
    2022-11-13
  • 微信小程序 | 基于小程序+Java+WebSocket实现实时聊天功能
    一、文章前言 此文主要实现在小程序内聊天对话功能,使用Java作为后端语言进行支持,界面友好,开发简单。 二、开发流程及工具准备 2.1、注册微信公众平台账号。 2.2、下载安装Inte...
    99+
    2023-09-06
    小程序 微信小程序 java
  • 微信小程序实现简单倒计时功能
    本文实例为大家分享了微信小程序实现简单倒计时的具体代码,供大家参考,具体内容如下 任务描述: 计时器 任务要求: 案例描述:设计一个实现倒计时功能的小程序,小程序运行后,首先显示空白...
    99+
    2022-11-13
  • 微信小程序实现书架小功能
    本文实例为大家分享了微信小程序实现书架功能的具体代码,供大家参考,具体内容如下 实现书架的功能,点击之后可以看pdf 1.设定点击事件 2.在点击事件里面 2.1下载 wx.down...
    99+
    2022-11-13
  • 微信小程序实现翻牌小功能
    本文实例为大家分享了微信小程序翻牌小功能,供大家参考,具体内容如下 页面 <view id="container">     <view wx:for="{{new...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作