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

A simple example of mysql searching for data within N kilometers

According to the coefficient of pi and the radius...

Summary of Textarea line break issues in HTML

Recently, I encountered a problem of whether the d...

An article to understand operators in ECMAScript

Table of contents Unary Operators Boolean Operato...

Page Speed ​​Optimization at a Glance

I believe that the Internet has become an increas...

HTML unordered list bullet points using images CSS writing

Create an HTML page with an unordered list of at l...

Basic operations of mysql learning notes table

Create Table create table table name create table...

Velocity.js implements page scrolling switching effect

Today I will introduce a small Javascript animati...

Analysis of the principles and usage of Linux hard links and soft links

In the Linux system, there is a kind of file call...

Detailed explanation of the principles and usage of MySQL stored procedures

This article uses examples to explain the princip...

Problems and solutions when installing and using VMware

The virtual machine is in use or cannot be connec...

Detailed explanation of two ways to dynamically change CSS styles in react

The first method: dynamically add a class to show...

Two box models in web pages (W3C box model, IE box model)

There are two types of web page box models: 1: Sta...

Teach you step by step to configure MySQL remote access

Preface When using the MySQL database, sometimes ...