更改日期 object 中的日期格式

Question

I am using Bootstrap 4. I am writing two functions "saveIssue" and "fetchIssue". The saveIssue function takes the details of the form filled through HTML and stores them in localStorage.In the function, it also notes the time of saving the issues with the new Date() object. fetchIssue function takes the details from localStorage and displays them on screen. While displaying the date of issue obtained through the new Date() object, it is displaying it in the format like 2020-06-02T14:51:21.482Z. How can I just display it in a more generalized form and also not int GMT?

1)fetchIssue function

function fetchIssues () {
var issues=JSON.parse(localStorage.getItem('issues'));
var I;
for(i=0;i<issues.length;i++)
{
    var id=issues[i].id;
    var description=issues[i].description;
    var severity=issues[i].severity;
    var assignto=issues[i].assignto;
    var status=issues[i].status;
    var deadline=issues[i].deadline;
    var started=issues[i].started;
if(status=="Open")
  {
document.getElementById('issuesList').innerHTML+='<div class="well">'+'<h5> Issue ID : '+ id+'</h5>' 
+'<h4><span class="label label-info">'+ status +'</span></h4>'
+'<h3><span class="glyphicon glyphicon-paste"></span>'+"     "+  description + '</h3>'
+ '<p><span class="glyphicon glyphicon-bell"></span>'+'     '+ severity+'         '
+'<span class="glyphicon glyphicon-user"></span>'+'     '+ assignto + '</p>'+'   '
+'<p><span class="glyphicon glyphicon-calendar"></span>'+'  '+'Issued on :'+' '+started+'</p>'
+'<p><span class="glyphicon glyphicon-time"></span>'+'  '+'Deadline :'+' '+deadline+'</p>' 
+'<button type="button" class="btn btn-success" onclick="Closed(\''+i+'\')">Close</button>'+' '
+'<button type="button" class="btn btn-danger" onclick="Deleted(\''+i+'\')">Delete</button>'+' '
+'<button type="button" class="btn btn-primary" onclick="Reassigned(\''+i+'\')">Reassign</button>';
  }

else
  {
document.getElementById('issuesList').innerHTML+='<div class="well">'+'<h5> Issue ID : '+ id+'</h5>' 
+'<h4><span class="label label-warning">'+ status +'</span></h4>'
+'<h3><span class="glyphicon glyphicon-paste"></span>'+"     "+  description + '</h3>'
+ '<p><span class="glyphicon glyphicon-time"></span>'+'     '+ severity+'         '
+'<span class="glyphicon glyphicon-user"></span>'+'     '+ assignto + '</p>'
+'<button type="button" class="btn btn-info" onclick="Reopened(\''+i+'\')">Reopen</button>'+' '
+'<button type="button" class="btn btn-primary" onclick="Reassigned(\''+i+'\')">Reassign</button>';
  }
}
}

2)saveIssue funtion

function saveIssue(e)
{ 
var id=chance.guid()
var description = document.getElementById("issueDescInput").value;
var severity = document.getElementById("issueSeverityInput").value;
var assignto = document.getElementById("issueAssignedToInput").value;
var status="Open";
var deadline=document.getElementById("deadline").value;
var started=new Date();
var summarized={
    id,
    description,
    severity,
    assignto,
    status,
    deadline,
    started
}
var final=JSON.stringify(summarized);
if(localStorage.getItem('issues')===null)
{
    var issues=[];
    issues.push(summarized);
    var finalissues=JSON.stringify(issues);
    localStorage.setItem('issues', finalissues);
    alert("saved");
}
else
{
    var issues = JSON.parse(localStorage.getItem('issues'));
    issues.push(summarized);
    var finalissues=JSON.stringify(issues);
    localStorage.setItem('issues', finalissues);
    alert("saved");
}
e.preventDefault();
window.location.reload();
}

Answer 1

You can format the date in any way you would like by doing a couple of steps:

let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth() + 1 // January is Month 0, so we add one
let currentDay = currentDate.getDay();

These allow you to get the current date (variable currentDate ) and extract different information from it (year, month, day). Now you can format it in your way:

yyyy-mm-dd:

    if (currentDay < 10){
        currentDay = '0'+ currentDay // Add a 0 before the day if it is less than 10
    }

    if (currentMonth < 10){
        currentMonth = '0' + currentMonth
    } 

let newDate = currentYear + "-" + currentMonth + "-" + currentDay;

This will display the date in local time. If you want it in UTC Time:

let currentDate = new Date();
let currentYear = currentDate.getFullUTCYear();
let currentMonth = currentDate.getUTCMonth() + 1 // January is Month 0, so we add one
let currentDay = currentDate.getUTCDay();

And extract:

yyyy-mm-dd:

    if (currentDay < 10){
        currentDay = '0'+ currentDay // Add a 0 before the day if it is less than 10
    }

    if (currentMonth < 10){
        currentMonth = '0' + currentMonth
    } 

let newDate = currentYear + "-" + currentMonth + "-" + currentDay;

See it in action:

 function showDate() { let currentDate = new Date(); let currentYear = currentDate.getFullYear(); let currentMonth = currentDate.getMonth() + 1 // January is Month 0, so we add one let currentDay = currentDate.getDay(); if (currentDay < 10){ currentDay = '0'+ currentDay // Add a 0 before the day if it is less than 10 } if (currentMonth < 10){ currentMonth = '0' + currentMonth } let newDate = currentYear + "-" + currentMonth + "-" + currentDay; document.getElementById('seeDate').innerHTML = newDate; }

 <button onclick="showDate()">See the date</button> <div id="seeDate"></div>

You can also you the toLocaleDateString() , toDateString() , toISOString() , or toLocaleString() for easier methods. But I would stick to the ones above because are able to easily change the format in seconds.

I hope this helps!

Answer 2

You can also use these methods.

var started = new Date();

Date.toLocaleDateString()

console.log(started.toLocaleDateString()); // "02/06/2020"

Date.toDateString()

console.log(started.toDateString()); // "Tue Jun 02 2020"

Date.toISOString()

console.log(started.toISOString()); // "2020-06-02T15:27:29.780Z"

Date.toLocaleString()

console.log(started.toLocaleString()); // "02/06/2020, 23:27:29"