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

Summary of Mysql common benchmark commands

mysqlslap Common parameter description –auto-gene...

CSS to achieve chat bubble effect

1. Rendering JD Effect Simulation Effect 2. Princ...

Solution for converting to inline styles in CSS (css-inline)

Talk about the scene Send Email Embedding HTML in...

Detailed steps to install mysql5.7.18 on Mac

1. Tools We need two tools now: MySQL server (mys...

Sharing tips on using vue element and nuxt

1. Element time selection submission format conve...

Nodejs implements intranet penetration service

Table of contents 1. Proxy in LAN 2. Intranet pen...

Example of assigning values ​​to ActiveX control properties by param name in a web page

Copy code The code is as follows: <HTML> &l...

Detailed explanation of the failure of MySQL to use UNION to connect two queries

Overview UNION The connection data set keyword ca...

Use Html+Css to implement a simple navigation bar function (the navigation bar switches the background color when the mouse is encountered)

Ⅰ. Problem description: Use html+css to implement...

The difference between z-index: 0 and z-index: auto in CSS

I've been learning about stacking contexts re...

How to make a website front end elegant and attractive to users

The temperament of a web front-end website is a fe...

Tutorial on installing the unpacked version of mysql5.7 on CentOS 7

1. Unzip the mysql compressed package to the /usr...

How to support Webdings fonts in Firefox

Firefox, Opera and other browsers do not support W...

MySQL index for beginners

Preface Since the most important data structure i...

HTML Nine-grid Layout Implementation Method

Diversifying website layouts is our front-end spe...