更改日期 object 中的日期格式

Question

我正在使用 Bootstrap 4。我正在编写两个函数“saveIssue”和“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 从 localStorage 获取详细信息并将其显示在屏幕上。 在显示通过 new Date() object 获得的发行日期时，它以类似 2020-06-02T14:51:21.482Z 的格式显示。 我怎样才能以更通用的形式显示它而不是 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）保存问题功能

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

您可以通过执行几个步骤以任何方式格式化日期：

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();

这些允许您获取当前日期（变量currentDate ）并从中提取不同的信息（年、月、日）。 现在您可以按照自己的方式对其进行格式化：

年年-月-日：

    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;

这将显示当地时间的日期。 如果你想要它在 UTC 时间：

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();

并提取：

年年-月-日：

    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;

看看它的实际效果：

 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>

您也可以使用toLocaleDateString() 、 toDateString() 、 toISOString()或toLocaleString()以获得更简单的方法。 但我会坚持上面的那些，因为能够在几秒钟内轻松更改格式。

我希望这有帮助！

Answer 2

您也可以使用这些方法。

var started = new Date();

Date.toLocaleDateString()

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

日期.toDateString()

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

日期.toISOString()

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

Date.toLocaleString()

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