This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Hi, I’m Ned👀, a junior with less than two years of experience at 🌹

The road ahead is still long 🎉, work hard to refuel it ❤~

preface

Recently, I was working on the exercise project. When I finished receiving the data and rendering it to the page, I found that my friend in the back end asked me to do a job again. Pure rendering, of course, is a small kiss, but what is this field?

"createTime" : "The 2021-01-17 T13:32:06. 381 z"."lastLoginTime" : "The 2021-01-17 T13:32:06. 381 z"
Copy the code

CV directly to Baidu, found out that this string is a time format, put its explanation below:

T stands for delimiter, and Z stands for UTC. UTC: Universal Standard time, adding 8 hours to standard time.

In addition: there are other time formats and time stamps, want to know partners can baidu to understand oh, lest like me, see just think to Baidu to understand, know about it in advance, no harm.

That’s it. Now all I have to do is convert this time into something we can all read and render it on the page.

To get started

In JavaScript, we use our Date object to handle dates and times, so let’s write a prototype of this function:

const formateDate = (value) = >{
    let date = new Date(value)
}
Copy the code

The next step is to define the date format. Here I use YYYY-MM-DD hh: MM :ss

let fmt = 'yyyy-MM-dd hh:mm:ss'
Copy the code

Since the year, month, day, hour, minute, and second are all two or more digits here, I define it like this when fetching:

const o = {
  'y+': date.getFullYear(),
  'M+': date.getMonth()+1.'d+': date.getDate(),
  'h+': date.getHours(),
  'm+': date.getMinutes(),
  's+': date.getSeconds()
}
Copy the code

GetMonth ()+1 returns 0 to 11. If you add 1 to the month, the correct month is 1 to 12.

Once the rule is defined, we loop through it, and we should be able to get the result we want.

for(let k in o ){
  if(new RegExp(` (${k}) `).test(fmt)){
    const val = o[k] + ' '
    fmt = fmt.replace(RegExp.$1,val)
  }
}
Copy the code

Replace means we’re going to make a substitution. RegExp.$1 is going to get the value of the expression above and replace it with the value of val.

Let’s render it and see what it looks like?

The date has been successfully converted to something that we can read, but we can see that the second has only one digit, which means that if the second has only one digit, we should give it a zeroing operation.

Not just seconds, but other things too!

About zero padding

There are two ways to fix zero. Let’s start with the clumsy one:

If it’s 1, we add a zero, if it’s not 1, we don’t add it.

var a = '6'
a.length = 1?'0'+a:a / / '06'
Copy the code

Here’s a slightly more advanced one:

We need two digits, so just fill in the string with two zeros and divide the string with substr to get what we want.

var b = '6'
var result = ('00'+b).substr(b.length) / / '06'
Copy the code

So if we change the above code, we get the following function:

const formateDate = (value) = >{
    let date = new Date(value)
    let fmt = 'yyyy-MM-dd hh:mm:ss'
    const o = {
      'y+': date.getFullYear(),
      'M+': date.getMonth()+1.'d+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for(let k in o ){
      if(new RegExp(` (${k}) `).test(fmt)){
        const val = o[k] + ' '
        fmt = fmt.replace(RegExp. $1,RegExp.$1.length==1? val:('00'+val).substr(val.length))
      }
    }
    return fmt
}
Copy the code

Let’s refresh the page and see if we made it!

Success is successful, but we find that the previous year has been eliminated, it has become two, which is not good, we defined the year format is four.

But don’t panic, this only needs to determine the year separately, not with the other 2-bit format, so our final function looks like this:

const formateDate = (value) = >{
    let date = new Date(value)
    let fmt = 'yyyy-MM-dd hh:mm:ss'
    if(/(y+)/.test(fmt)){
        fmt = fmt.replace(RegExp.$1,date.getFullYear())
    }
    const o = {
      'M+': date.getMonth()+1.'d+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
    }
    for(let k in o ){
      if(new RegExp(` (${k}) `).test(fmt)){
        const val = o[k] + ' '
        fmt = fmt.replace(RegExp. $1,RegExp.$1.length==1? val:('00'+val).substr(val.length))
      }
    }
    return fmt
}
Copy the code

Take a look at the results:

If again a little bit serious, can again to add a function parameter, pass a rule, so convenient we late to adjust the data format, at the time of definition format with | |.

let fmt = 'Incoming new format' || 'Default format'
Copy the code

Write in the last

If you like my article, welcome a key three even oh close 🐾