WeChat applet implements sorting function based on date and time

WeChat applet implements sorting function based on date and time

I recently took over a small program project, and there was a requirement to sort the list by date and time, so I tried my hand at it and after some operation, I finally figured it out. Here I would like to summarize and share my experience with you, hoping it will be of some help to you.

Requirements Analysis (This is the completed effect)

Here is the specific date and time and the specific hour. The backend data sent to me is like this

startDate: "2021-08-27" //Date year month day startTime: "10:15" //Start time endTime: "20:00" //End time

Implementation Code

// Sort by date comparedate: function (property) {
    // console.log(property); 
    return function (a, b) { 
    var value1 = Date.parse(new Date(a[property])); //Convert to hexadecimal to get the date var value2 = Date.parse(new Date(b[property]));
    // console.log( value1 -value2);
      return value1 - value2; //value1-value2 are sorted from small to large and vice versa}
},

// Sort by time The time format is 10:00, so we use slice to intercept the first two digits of the string and compare the order of time by hour comparehour: function (property) {
  // console.log(property);
  return function (a, b) {
    var value1 = a.startTime.slice(0,2) //slice(0,2) gets the first two digits of the string for comparison var value2 = b.endTime.slice(0,2)
    // console.log(value1-value2)
   return value1 -value2 //value1-value2 is sorted from small to large and vice versa}
},

  
MyTaskList:function(){
    var that=this
    wx.request({
      url: 'Request interface',
      data: {
       //Put parameters},
      method: "POST",
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
        // Sort by time 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')); //Call the above time sorting method}
        // Sort by date if(res.data.data=="success"){
          console.log(res);
          if(res.data.list.orderDetailsList!=""){
            var dataList=res.data.list.orderDetailsList;
            dataList.forEach((item) => {
            //Convert the time format after the loop var month=new Date(item.startDate.replace(/-/g,'/')).getMonth()+1;
              var day=new Date(item.startDate.replace(/-/g,'/')).getDate();
              var dateVal=month+'月'+day+'日'; // concatenate '月' and '日'
              item['startDateFormat']=dateVal;
                // console.log(day);
                
              // console.log(dateVal);
            })
                         dataList.sort(that.comparedate('startDate')); //Sort by date using the method combined with comparedate above

         
  
  },

Summarize

The above is the entire process of sorting WeChat mini programs according to date and time. I hope it will be helpful to everyone.

The entire content of this article has been introduced to you, and I hope you will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet drag and drop sort list sample code
  • WeChat applet implements finger dragging option sorting
  • WeChat applet drag and drop sorting (code sharing)

<<:  How to change the domestic source of Ubuntu 20.04 apt

>>:  How to change the Ali source in Ubuntu 20.04

Recommend

Install Docker on Linux (very simple installation method)

I have been quite free recently. I have been doin...

MySQL data duplicate checking and deduplication implementation statements

There is a table user, and the fields are id, nic...

Native JS to implement hover drop-down menu

JS implements a hover drop-down menu. This is a s...

Why Seconds_Behind_Master is still 0 when MySQL synchronization delay occurs

Table of contents Problem Description Principle A...

Vue.js framework implements shopping cart function

This article shares the specific code of Vue.js f...

Comparison of storage engines supported by MySQL database

Table of contents Storage Engine Storage engines ...

MySQL: Data Integrity

Data integrity is divided into: entity integrity,...

How to use html css to control div or table to be fixed in a specified position

CSS CodeCopy content to clipboard .bottomTable{ b...

Linux kernel device driver address mapping notes

#include <asm/io.h> #define ioremap(cookie,...

Detailed explanation of the setting of background-image attribute in HTML

When it comes to pictures, the first thing we thi...

Mysql 5.7.19 free installation version encountered pitfalls (collection)

1. Download the 64-bit zip file from the official...

Detailed explanation of the interaction between React Native and IOS

Table of contents Prerequisites RN passes value t...