A collection of common time format processing methods in Vue

A collection of common time format processing methods in Vue

In the process of learning C ා and Vue, we often need to remove the "T" in the middle of the default UTC time format (such as "2020-01-19T14:51:59") and convert it to our normal aesthetic form (such as "2020-01-19 14:51:59").

Of course, this is only one of the problems. We can choose to process in the front end and the back end. First, let's take a look at the method of processing in the C ා back end.

Processing of time format in C

There are two situations here, one is to adjust the format of DateTime type time, the other is to directly regulate the time of DateTime type as string type:

Adjust the time format of DateTime type (the type can not be changed)

In this case, the time obtained is of DateTime type, and the data can be used directly or converted to a string for reuse.

For easy assignment, all of them are converted to string type.

//Get current time
DateTime dt = DateTime.Now;

//Initializing a time string
string time;

//Get the date, hour, minute and second of the current time
time = dt.Year.ToString();
time = dt.Month.ToString();
time = dt.Date.ToString();

time = dt.Hour.ToString();
time = dt.Minute.ToString();
time = dt.Second.ToString();

//Change year, month, day, hour, minute and second of current time (after positive number, before negative number, floating-point number is calculated by time unit)
time = dt.AddYears(0).ToString();
time = dt.AddMonths(4).ToString();
time = dt.AddDays(-1).ToString();
time = dt.AddHours(-1).ToString();
time = dt.AddMinutes(1.1).ToString();
time = dt.AddSeconds(1.5).ToString();

//Other common methods

//Time comparison
time = dt.Equals("2020-01-19 12:23:04").ToString();
time = dt.Equals(dt).ToString();

//Get Hash code
time = dt.GetHashCode().ToString();

//Get type
time = dt.GetType().ToString();
time = dt.GetTypeCode().ToString();

The time of the canonical DateTime type is in fixed string format (the type must be changed)

In this case, the time obtained must be of string type, because it has been converted to string type during the execution of the method, or return string type.

Here is the sample code.

//Get current time
DateTime dt = DateTime.Now;

//Initializing a time string
string time;

//Time format conversion
time=string.Format("{0:d}", dt);//2020-01-19 
time = string.Format("{0}", dt);//January 19, 2020 
time = string.Format("{0:f}", dt);//14:23, January 19, 2020 
time = string.Format("{0:F}", dt);//January 19, 2020 14:23:23 
time = string.Format("{0:g}", dt);//2020-01-19 14:23 
time = string.Format("{0:G}", dt);//2020-01-19 14:23:23 
time = string.Format("{0:M}", dt);//01, 19, 
time = string.Format("{0:R}", dt);//Sat, 19 Nov 2020 14:23:23 GMT 
time = string.Format("{0:s}", dt);//2020-01-19T14:23:23 
time = string.Format("{0:t}", dt);//14:23 
time = string.Format("{0:T}", dt);//14:23:23 
time = string.Format("{0:u}", dt);//2020-01-19 14:23:23Z 
time = string.Format("{0:U}", dt);//6:23:23, January 19, 2020 
time = string.Format("{0:Y}", dt);//2020 01 
time = string.Format("{0}", dt);//2020-01-19 14:23:23 
time = string.Format("{0:yyyyMMddHHmmssffff}", dt);

Processing of time format in Vue

Most of the time formats that need to be processed in the front end are field attributes in JSON data transferred from the back end, so the data needs to be taken out of the object during processing, and most of the data transferred from the back end are more than one. Therefore, it is necessary to loop through JSON and adjust the format from the object, assign it to the original value, and then display it on the form.

Here is an example code:

//Omit data declaration and method name

//Send request
rt.get(url, params).then(res => {

//Use map to traverse data, each of which is an item
        this.tableData = res.purchaseOrderAndWareHouse.map(item => {

//Change time format
          let createTime = new Date(item.createTime);
          let purchaseTime = new Date(item.purchaseTime);
          item.createTime = this.formatDate(createTime); 
          item.purchaseTime= this.formatDate(purchaseTime);
//Return data
          return item;
        }); 
//Format time method (handwriting)

    //Time format function
    formatDate(date) {
		  var year = date.getFullYear();
		  var month = date.getMonth() + 1;
          var date = date.getDate();
          //var hour= date.getHours();
          //var minute= date.getMinutes();
          //var second= date.getSeconds();
		  return year + '-' + month + '-' + date
		},

It should be noted that if the time value of DateTime type passed from the back end does not exist, there will be a default value displayed in the front end. At this time, we can process it in the front end. An example is as follows:

//Other codes are consistent with the above
      rt.get(url, params).then(res => {
        this.tableData = res.StockOutOrderDetailList.map(item => {
          let new_indate = new Date(item.new_indate);
          item.new_indate = rt.formatDateTime(new_indate, "yyyy-mm-dd hh:MM:ss");
          
          //Since the default value is the same, a judgment can be added during processing. If it is the default value, an empty string will be assigned
          if (item.new_indate == "1-01-01 12:00:00") {
            item.new_indate = "";
          }
          return item;
        });

Finally, a common front-end method to obtain the time of the previous days, months, or years is presented, which is often used as the default value in the date plug-in.

Here is how to call:

//Omit data declaration and method name

//Calling mode
this.queryForm.dateBegin = this.format(new Date(), -1);

//Get method days before time
    format(date, month) {
      var nd = date
      nd = new Date(nd)
      var y = nd.getFullYear()// Year of acquisition
      var m = nd.getMonth() + 1 + month;
      if (m == 0) {
        y -= 1;
        m = 12;// Last year
      }
      var d = nd.getDate()// Get the sky
      var cdate = y + '-' + m + '-' + d
      return cdate
    },

That's all. Let's pay attention to it.

Published 5 original articles, won praise 0, visited 66
Private letter follow

Tags: Vue JSON

Posted on Sun, 19 Jan 2020 07:09:26 -0500 by diego25