微信小程序根据日期和时间进行排序

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

一、前言

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

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

image.png

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

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
  },

四、总结

以上就是微信小程序根据日期和时间进行排序的全部过程,希望对大家有所帮助,
如有不懂可直接评论,看到会及时回复
来都来了,点个关注,来个赞,

目录
相关文章
|
5月前
|
小程序
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
【微信小程序-原生开发】列表 - 拖拽排序(官方组件 movable-area 和 movable-view 的用法)
463 0
|
5月前
|
小程序 数据库
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索(含云数据库常用查询条件的使用方法,t-search 组件的使用)
125 0
|
7月前
|
小程序
微信小程序日期下拉框规定显示年,月
微信小程序日期下拉框规定显示年,月
240 0
|
小程序 JavaScript 容器
小程序封装拖拽菜单组件(uniapp拖拽排序,自定义菜单)
movable-area 是 uniapp 的可移动区域组件。它用于定义可移动视图容器,在其内部可拖拽移动子视图。
623 0
|
JSON JavaScript 小程序
小程序里显示附近的人,云开发数据库实现附近的人,按照位置远近排序,附近多少公里内的好友
小程序里显示附近的人,云开发数据库实现附近的人,按照位置远近排序,附近多少公里内的好友
186 0
|
JavaScript 小程序
关于微信小程序如何获取当前时间及日期这个问题?
想要获取当前时间,首先在要获取时间的.js文件中加载util.js文件
731 0
关于微信小程序如何获取当前时间及日期这个问题?
|
小程序
微信小程序获取系统日期和时间及时间戳
微信小程序获取系统日期和时间及时间戳
842 0
微信小程序获取系统日期和时间及时间戳
|
JavaScript 小程序
【微信小程序】mpvue中格式化日期
1、修改src/utils/index.js文件 mpvue框架中有一个专门格式化日期的文件src/utils/index.js文件 文件内容如下,其中formatDate是我自己添加的方法,是将日期格式化成“YYYY-mm-DD”格式。注意不要忘记在export default {}中添加formatDate,不然外部文件读取不到这个方法
262 0
|
小程序 计算机视觉 JavaScript
小程序日历日期单选选择实现
###小程序日历日期单选选择实现拿走不谢 看图说话 ![1575796331_1_](https://yqfile.alicdn.com/51bf41a1c0d8c45753874db1776d692395757936.
1664 0
小程序日历日期单选选择实现
|
小程序 JavaScript API
小程序实现索引列表排序
小程序实现索引列表排序
404 0