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

2024-09-28 11:21:40

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

需求分析（这是已完成的效果）

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

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

  },

总结

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

本文的全部内容为大家介绍完了，也希望大家多多支持我们。

微信小程序之拖拽排序（代码分享）

index.wxml  <view class="container"> <view bindtap="box" class="box" > <view disable-scroll="true" wx:for="{{content}}" bindtouchmove="move" bindtouchstart=&
微信小程序实现手指拖动选项排序

本文实例为大家分享了微信小程序实现手指拖动选项排序的具体代码,供大家参考,具体内容如下效果: wxml: <view> <view class="dileititle">手指移动选项排序</view> <view style="width:740rpx;height:80vh;overflow-y:auto;padding:0 90rpx;margin:auto;" id="movebox"> &
微信小程序拖拽排序列表的示例代码

拖拽排序列表思路界面分为两层: 底层,正常列表展示,拖拽的时候不做处理(大牛直接加了动画,原谅我技艺不精,还没实现) 顶层,movable-view组件,不长按不展示,之后长按才展示,且没有点击事件. 事件主要监听:longpress , touchmove , touchend 三个事件 longpress 保障长按才有效,并设定许多其他值. touchmove 滑动的时候触发判断是否需要滑动页面,因为 movable-area组件滑动事件被catch掉,无法滑动: 记录滑动经过的项
微信小程序实现根据日期和时间排序功能

最近接手了一个小程序的项目,有这样一个需求要对列表进行日期和时间的排序,于是小试牛刀,操作了一番,终于搞出来,在这里给大家总结分享一下经验,希望对大家有一定的帮助. 需求分析(这是已完成的效果) 这里有具体的日期时间和具体的小时时间,后端数据给我传来的是这样式的 startDate: "2021-08-27" //日期年月日 startTime: "10:15" //开始时间 endTime: "20:00" //结束时间实现代码 // 根据日
微信小程序之picker日期和时间选择器

下面来介绍小picker,分三种样式: 默认的自己可以定义数据的 mode="time"是时间选择器 mode="date"是日期选择器跟其他的一样先来看下picker.wxml <view class="page"> <view class="page__hd"> <text class="page__title">picker</text> <te
微信小程序实现长按拖拽排序功能

工作中遇到一个上传图片长按后拖动排序的一个功能,于是写下了一个小demo.希望能对你有遇到的问题有帮助. 演示效果: wxml <view class='outer' > <view class='inner'> <movable-area> <block wx:for="{{data}}"> <view class='item' id="{{item.index}}"
微信小程序时间戳转日期的详解

正文: // util.js //时间戳转换成日期时间 function js_date_time(unixtime) { var dateTime = new Date(parseInt(unixtime) * 1000) var year = dateTime.getFullYear(); var month = dateTime.getMonth() + 1; var day = dateTime.getDate(); var hour = dateTime.getHours(); var
微信小程序实现的日期午别医生排班表功能示例

本文实例讲述了微信小程序实现的日期午别医生排班表功能.分享给大家供大家参考,具体如下: 1.util.js //获取几天后日期 function dateCount(arg,date) { var date1 = arg; var date2 = new Date(date1); date2.setDate(date2.getDate() + parseInt(date)); var times = date2.getFullYear() + "-" + (date2.getMonth
微信小程序自定义tab实现多层tab嵌套功能

小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab,每个tab上又嵌了2-4个不等的tab... 这种变态需求只能自定义tab了. 其实如果项目不是很复杂,没有多tab嵌套的需求,完全可以用小程序官方的 tabBar,方便快捷. 官方 tabBar 地址:https://developers.weixin.qq.... 一.Demo结构先看效果图吧
微信小程序使用map组件实现路线规划功能示例

本文实例讲述了微信小程序使用map组件实现路线规划功能.分享给大家供大家参考,具体如下: 效果图实现原理 1. 通过map组件标记起始点和绘制路线图: 2. 通过高德地图API获取不同类型的路线坐标点,以及耗费时间和路程. WXML <view class="flex-style"> <view class="flex-item {{status == 'car' ? 'active' : ''}}" data-status="car&
微信小程序实现导航栏和内容上下联动功能代码

今日给大家分享一下如何实现导航栏(nav)和内容部分上下联动(相关代码模块我已单独整理放到github上面了,欢迎前来start). github地址:https://github.com/sunshime/weChatSkill 一.效果图: 二.实现过程: 主要是使用 scroll-view 实现导航栏部分,用 swiper 实现下面的内容部分,通过 swiper 的 current 属性和导航栏的 index 相互对应来实现导航栏部分切换时内容部分跟随切换:通过 swiper 的
微信小程序使用同声传译实现语音识别功能

我使用同声传译语音识别功能是为了实现微信小程序首页的语音搜索功能,如果你也是那么恭喜你,你可以ctrl+c.ctrl+v再改一改,如果你不是那么你也不要着急的走可以看完我的文章会对你有所帮助! 首先是在微信公众平台(也就是小程序的后台),在左侧菜单栏中的设置-->第三方设置下的插件管理-->添加-->搜索同声传译-->点击添加接下来就是在代码中进行添加一些设置. 如果你是使用微信开发者工具进行开发小程序的话,需要在app.json文件中添加一下代码. // app.json {
如何利用微信小程序和php实现即时通讯聊天功能

目录一.PHP7安装Swoole扩展 1.自定义安装 2.宝塔面板安装PHP swoole扩展二.配置nginx反向代理三.微信小程序socket合法域名配置四.效果演示和代码 1.小程序端代码 2.服务端代码(PHP代码) 五.代码已经编写完了总结一.PHP7安装Swoole扩展 PHP swoole 扩展下载地址 Github:https://github.com/swoole/swoole-src/tags php官方扩展库:http://pecl.php.net/packag

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

相关推荐

随机推荐