WeChat applet wxs date and time processing implementation example

WeChat applet wxs date and time processing implementation example

WXS (WeiXin Script) is a scripting language for small programs. WXS is a different language from JavaScript and has its own syntax, which is not consistent with JavaScript. It includes many daily used JavaScript functions, which cannot be used in wxs. Recently, when I was making a list, I was involved in time formatting operations. I encountered this problem. The formatting tool function I wrote before was directly copied to the wxs file of the applet project, and the function could not be executed normally. These include the following errors

  • The method of using regular expressions in the replace function of a string is different. You cannot directly declare it using var a = /[0-9]/. The correct way is var reg = getRegExp("-", "g");
  • The current time cannot be obtained through new Date(), but through the getDate method.
  • getDate('2018/12/12') can get the time of the date type corresponding to the date.

1. Timestamp to date

To process dates in wxs, you need to use getDate(time) instead of new Date().

In the wxs file

var filter = {
    formatNumber: function (n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      },
    parseTime: function (time, type) {
        if (time == null || type == '') {
          return ''
        }
        if (arguments.length === 0) {
          return null
        }
        var date = getDate(time); // In wxs, you cannot use new Date() to process dates console.log("date", date);
        var y = date.getFullYear();
        var m = filter.formatNumber(date.getMonth() + 1);
        var d = filter.formatNumber(date.getDate());
        var h = filter.formatNumber(date.getHours());
        var i = filter.formatNumber(date.getMinutes());
        var s = filter.formatNumber(date.getSeconds());
        var a = filter.formatNumber(date.getDay());
        var time_str = "";
        if (type == 'month') {
          time_str = y + '-' + m;
        } else if (type == 'date') {
          time_str = y + '-' + m + '-' + d;
        } else if (type == 'datetime') {
          time_str = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
        } else if (type == 'onlyMonth') {
          time_str = m;
        } else if (type == 'onlyYear') {
          time_str = y;
        }
        return time_str
      },
 }
module.exports = {
    parseTime: filter.parseTime,
}

Use in wxml

<wxs module="filters" src="../../../filters/filter.wxs"></wxs>
<text>{{filters.parseTime(time,'date')}}</text>

2. Convert UTC to Beijing Time

UTC time is 8 hours later than Beijing time. On Apple phones, you need to remove the "Z" before processing the time.

var filter = {
    formatNumber: function (n) {
        n = n.toString()
        return n[1] ? n : '0' + n
      },
    parseTime: function (time, type) {
    if (time == null || time == '') {
      return ''
    }
    if (arguments.length === 0) {
      return null
    }
    var date;
    if (typeof time === 'object') {
      date = time
    } else {
      if (('' + time).length === 10) {
        time = parseInt(time) * 1000
      } else {
        time = time.replace("Z", " ").replace(getRegExp('-', 'g'), "/")//Remove Z, compatible with Apple phones var ts = time.split('T')
        var t1 = ts[0]
        var t2 = ts[1].split('.')[0]
        time = t1 + " " + t2
        time = getDate(time).getTime() + 8 * 3600000; //utc time is 8 hours different from Beijing time}
      date = getDate(time) //Cannot use new Date()
    }
    var y = date.getFullYear();
    var m = filter.formatNumber(date.getMonth() + 1);
    var d = filter.formatNumber(date.getDate());
    var h = filter.formatNumber(date.getHours());
    var i = filter.formatNumber(date.getMinutes());
    var s = filter.formatNumber(date.getSeconds());
    var a = filter.formatNumber(date.getDay());
    var time_str = "";
    if (type == 'month') {
      time_str = y + '-' + m;
    } else if (type == 'date') {
      time_str = y + '-' + m + '-' + d;
    } else if (type == 'datetime') {
      time_str = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
    } else if (type == 'onlyMonth') {
      time_str = m;
    } else if (type == 'onlyYear') {
      time_str = y;
    }
    return time_str
  },
}
module.exports = {
    parseTime: filter.parseTime,
}

This is the end of this article about the implementation example of WeChat applet wxs date and time processing. For more relevant applet wxs date and time content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • WeChat applet learning wxs usage tutorial
  • WeChat applet wxs achieves ceiling effect
  • The applet uses wxs to solve the problem of wxml retaining 2 decimal places
  • WeChat applet implements wxss attribute example of operating wxml through js
  • Use wxss to load pictures and realize animation effects in WeChat applet
  • WeChat applet search component wxSearch example detailed explanation
  • How to compile WeChat applet less files into wxss files
  • WeChat Mini Program Tutorial: WXSS
  • WeChat Mini Program WXML, WXSS and JS Introduction and Detailed Explanation

<<:  Detailed explanation of Linux lsof command usage

>>:  Solution to MySQL restarting automatically

Recommend

Detailed explanation of the difference between docker-compose ports and expose

There are two ways to expose container ports in d...

How to mount a disk in Linux

When using a virtual machine, you may find that t...

Detailed explanation of the installation and use of Vue-Router

Table of contents Install Basic configuration of ...

Tutorial on installing MySQL database and using Navicat for MySQL

MySQL is a relational database management system ...

Prevent HTML and JSP pages from being cached and re-fetched from the web server

After the user logs out, if the back button on the...

How to create a virtual environment using virtualenv under Windows (two ways)

Operating system: windowns10_x64 Python version: ...

MySQL trigger principle and usage example analysis

This article uses examples to explain the princip...

Detailed explanation of how to configure static IP in Centos8

After installing centos 8, the following error wi...

4 Scanning Tools for the Linux Desktop

While the paperless world has not yet emerged, mo...

Solution to the error reported by Mysql systemctl start mysqld

Error message: Job for mysqld.service failed beca...

In-depth interpretation of /etc/fstab file in Linux system

Preface [root@localhost ~]# cat /etc/fstab # # /e...

MySQL sorting by conventional sorting, custom sorting, and sorting by Chinese pinyin letters

MySQL regular sorting, custom sorting, and sortin...

Detailed explanation of the new features of ES9: Async iteration

Table of contents Asynchronous traversal Asynchro...

Summary of problems encountered in the implementation of Vue plug-ins

Table of contents Scene Introduction Plugin Imple...

HTML table border control implementation code

Generally, when we use a table, we always give it...