Question

我有一些json数据，其中我将帐单日期设为2018-9和2017-9，我想将其分别转换为2018-9到2018年9月和2017-9到9月- 2017

类似于jan，feb，mar，may等所有月份

我在Google上进行了大量搜索，但直到现在都没有找到任何内容，我只找到了如何将2018年8月1日转换为01-08-2018

所以大家请指导我，我如何实现这一目标

我已经从该json数据中绘制了一个HTML表，我正在注释使用帐单日期的行

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()来获取名称，并且使用split进行少量的字符串操作就可以获取月份的名称

Refer

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来解析日期字符串，然后提取数字形式的月份以格式化为字符串。例如：

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

Answer 4

您可以像这样尝试使用moment.js：

let date = moment.utc("2018-11", "YYYY-M").format("MMM-YYYY");
console.log(date);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

Answer 5

尝试使用moment.js

moment(a.billdate,'YYYY-MM').format('MMM-YYYY')

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(a=> a.billdate = moment(a.billdate,'YYYY-MM').format('MMM-YYYY'))
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/moment.js/2.24.0/moment.min.js"></script>

<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>

对于Vanila JS

var m =['','jan','feb','mar','apr','may','jun','july','aug','sep','oct','nov','dec'];
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(a => {
  var spl = a.billdate.split('-');
  a.billdate = m[Number(spl[1])] + '-' + spl[0];
})
console.log(data)

如何格式化JavaScript日期字符串从Year-monthno（2019-1）到month-year（Jan-2019）

5 个答案: