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

 更新时间:2021年08月26日 14:10:54   作者:张清悠  
这篇文章主要为大家详细介绍了微信小程序实现根据日期和时间排序功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

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

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

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

         
  
  },

总结

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

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

相关文章

  • Area 区域实现post提交数据的js写法

    Area 区域实现post提交数据的js写法

    这篇文章主要介绍了在Area区域的里 实现post 提交数据 的js写法,需要的朋友可以参考下
    2014-04-04
  • JavaScript实现table切换的插件封装

    JavaScript实现table切换的插件封装

    这篇文章主要为大家详细介绍了JavaScript实现table切换的插件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • JavaScript tab选项卡插件实例代码

    JavaScript tab选项卡插件实例代码

    这篇文章主要介绍了JavaScript tab选项卡插件实例代码的相关资料,需要的朋友可以参考下
    2016-02-02
  • 微信小程序实现倒计时

    微信小程序实现倒计时

    这篇文章主要为大家详细介绍了微信小程序实现倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 浅谈Sticky组件的改进实现

    浅谈Sticky组件的改进实现

    这篇文章主要介绍了Sticky组件的改进实现的相关资料,需要的朋友可以参考下
    2016-03-03
  • Taro 小程序持续集成实现及原理

    Taro 小程序持续集成实现及原理

    这篇文章主要为大家介绍了Taro 小程序持续集成实现及原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 深入了解JavaScript的逻辑运算符(与、或)

    深入了解JavaScript的逻辑运算符(与、或)

    本篇文章分享的是 JS 当中的逻辑运算符与、或,也就是 && 、 || ,没错,别看这简简单单的几个运算符,虽然这是最基础的知识,但其中隐藏的奥秘却十分耐人寻味,接下来本文就为大家一一揭开这简单的运算符背后的奇妙之处。
    2016-12-12
  • jQuery实现动态文字搜索功能

    jQuery实现动态文字搜索功能

    本文主要介绍了jQuery实现动态文字搜索功能的分析过程,文章底部提供了完整的代码。具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 纯js实现的论坛常用的运行代码的效果

    纯js实现的论坛常用的运行代码的效果

    bluidea论坛的脚本板块的版主写的,不错,转到这!
    2008-07-07
  • 详解webpack 多入口配置

    详解webpack 多入口配置

    本篇文章主要介绍了webpack 多入口配置 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06

最新评论