如何将javascript日期字符串从年份-月(2019-1年)格式化为月份(1月-2019年)

Question

我有一些json数据，在这些数据中我得到了2018-9和2017-9的账单，我想将它们转换为2018-9到2018年9月-2018年和2017-9到2017年9月-2017年

同样地，在所有月份，如一月、二月、三月、五月等。

我在google上搜索了很多，但直到现在才发现任何东西，我只找到了如何将2018年8月1日转换为01-08-2018。

• 所以大家请指导我，我怎么能做到这一点？

我已经从json数据中呈现了一个HTML表，我正在注释使用bill的行。

​

const input = [
  ["Year", "2018-9", "2017-9"],
  ["JAYANAGAR", "2018-9", 857],
  ["MALLESHWARAM", "2018-9", 169],
  ["KOLAR", "2018-9", 178],
  ["JAYANAGAR", "2017-9", 635],
  ["MALLESHWARAM", "2017-9", 56],
  ["KOLAR", "2017-9", 90]
]

const merged = input.reduce((acc, arr) => {
  const [city, year, value] = arr;

  if (city === "Year")
    acc[city] = arr
  else {
    acc[city] = acc[city] || [city]
    acc[city].push(value)
  }

  return acc;
}, {})

const output = Object.values(merged)
console.log(output)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

​

Answer 1

您可以使用toUTCString()获取名称，如果使用拆分进行字符串操作，则可以获得月份的名称。

请参阅

​

var data = [{
    "amount": 8578579,
    "billdate": "2018-9",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 1693429,
    "billdate": "2018-9",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 1782162,
    "billdate": "2018-9",
    "outlet": "KOLAR"
  },
  {
    "amount": 635,
    "billdate": "2017-9",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 56,
    "billdate": "2017-9",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 90,
    "billdate": "2017-9",
    "outlet": "KOLAR"
  }
]

data.forEach(e=>{
var a=new Date(e.billdate);
a.setMonth(a.getMonth()+1);
a=a.toUTCString();
var c=a.split(' ');
e.billdate=c[2]+" "+c[3];
})

let formatData = function(data) {
  let billdates = [];
  let outlets = [];
  data.forEach(element => {
    if (billdates.indexOf(element.billdate) == -1) {
      billdates.push(element.billdate);
    }
    if (outlets.indexOf(element.outlet) == -1) {
      outlets.push(element.outlet);
    }
  });
  return {
    data: data,
    billdates: billdates,
    outlets: outlets,

  };
};

let renderTable = function(data) {
  billdates = data.billdates;
  outlets = data.outlets;
  data = data.data;
  let tbl = document.getElementById("tblYoY");
  let table = document.createElement("table");
  let thead = document.createElement("thead");
  let headerRow = document.createElement("tr");
  let th = document.createElement("th");
  th.innerHTML = "Date";
  th.classList.add("text-center");
  headerRow.appendChild(th);
  headerRow.appendChild(th);
  billdates.forEach(element => {
    th = document.createElement("th");
    th.innerHTML = element;//this one is populatingh billdate like 2018-9
    th.classList.add("text-center");

    headerRow.appendChild(th);

  });

  thead.appendChild(headerRow);

  headerRow.insertBefore(th, headerRow.children[1]);
  thead.appendChild(headerRow);
  table.appendChild(thead);

  let tbody = document.createElement("tbody");
  outlets.forEach(element => {
    let row = document.createElement("tr");
    td = document.createElement("td");
    td.innerHTML = element;
    row.appendChild(td);
    billdates.forEach(billdate => {
      let el = 0;
      data.forEach(d => {
        if (d.outlet == element && d.billdate == billdate) {

          el = d.amount;

        }
        //console.log(el)
      });
      td = document.createElement("td");
      td.innerHTML = el.toLocaleString('en-in');
      td.classList.add("text-right");
      row.appendChild(td);
    });

    row.insertBefore(td, row.children[1]);
    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tbl.innerHTML = "";
  tbl.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
}
let formatedData = formatData(data);
	renderTable(formatedData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div align="center" class="table table-responsive">
  <table id="tblYoY"></table>
</div>

​

​

const input = [
  ["Year", "2018-9", "2017-9"],
  ["JAYANAGAR", "2018-9", 857],
  ["MALLESHWARAM", "2018-9", 169],
  ["KOLAR", "2018-9", 178],
  ["JAYANAGAR", "2017-9", 635],
  ["MALLESHWARAM", "2017-9", 56],
  ["KOLAR", "2017-9", 90]
]
var e=input[0]
var a=new Date(e[1]);
a.setMonth(a.getMonth()+1);
a=a.toUTCString();
var c=a.split(' ');
e[1]=c[2]+" "+c[3];
a=new Date(e[2]);
a.setMonth(a.getMonth()+1);
a=a.toUTCString();
c=a.split(' ');
e[2]=c[2]+" "+c[3];


const merged = input.reduce((acc, arr) => {
  const [city, year, value] = arr;

  if (city === "Year")
    acc[city] = arr
  else {
    acc[city] = acc[city] || [city]
    acc[city].push(value)
  }

  return acc;
}, {})

const output = Object.values(merged)
console.log(output)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

​

Answer 2

您可以使用regex解析日期字符串，然后将月份按数字提取为string格式。例如：

​

var str = "2018-5";
var parts = str.match(/^(\d{1,4})-(\d{1,2})$/);
console.log(parts); // ["2018-5", "2018", "5"]
// example, how to match numeric to month
var months = {"1": "Jan", "2": "Fev", "3": "Mar", "4": "Apr", "5": "Mai"}
var date = months[parts[2]] + "-" + parts[1] // "Mai-2018"
console.log(date)

​

Answer 3

您可以构造一个新的日期：

const date = new Date(yourStringFromApi);

从toLocaleString那里得到名字的月份

const yourString = date.toLocaleString('en-us', { year: 'numeric', month: 'short' }); // Mar 2019

或者你的格式：

const yourString = date.toLocaleString('en-us', { month: 'short' }) + '-' + date.toLocaleString('en-us', { year: 'numeric' }) // Mar-2019