连续显示所有 12 个月，但从当月开始

Question

我正在处理一个要求，我有 12 个离子载玻片，载玻片的名称是从当月开始的月份名称。例如：如果当前月份是 6 月，那么第一张幻灯片的名称应该从 2020 年 6 月开始，一直持续到 2021 年 5 月。好吧，我试过了，但没能实现。即使我处理这个月，我也无法动态更改 12 月之后的年份。这是我的代码：

我的html文件

  <ion-toolbar class="toolbars" #ionDragFooter>    
          <ion-title class="ion-text-center">{{currValue}}</ion-title>
  </ion-toolbar>

我的 .ts 文件

ngOnInit() {
 swipeNext()
}

 var monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"];

  var d = new Date();


if(index == 1){
        var curMn=monthNames[d.getMonth()]+ d.getFullYear();
        console.log(curMn)
        this.currValue=curMn;
      }
      else if(index == 2){
        var curMn=monthNames[d.getMonth()+1]+ d.getFullYear();
        this.currValue=curMn;
      }
      else if(index == 3){
        var curMn=monthNames[d.getMonth()+2]+ d.getFullYear();
        this.currValue=curMn;
}

其他月份依此类推。我需要从当前月份开始完全自动化月份和年份。请问我哪里出错了？

Answer 1

要正确更改日期，您必须将日期增加日期对象中的月数（在您的情况下 d）：

var d = new Date();

//REM: This will print out the next month, yet d still is unchanged
console.log(d.getMonth()+1);
console.log(d);
console.log('Month did not increase: ', d.getMonth());

//REM: You have to increase your date by one month in the date object
d.setMonth(d.getMonth() + 1);
console.log(d);
console.log('Month did increase: ', d.getMonth());

//REM: By which it will change the year for you, once it is time for it.
d.setMonth(d.getMonth() + 11); //REM: +1 from before
console.log(d);
console.log('Year did increase: ', d.getFullYear());

在你的情况下是：

var monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

var d = new Date();
d.setDate(1); //REM: To prevent month skipping.

for(var i=0; i<12; i++){
  d.setMonth(d.getMonth() + 1);
  console.log(monthNames[d.getMonth()], d.getFullYear())
};

Some further reading on the issue

Answer 2

这是我想出的：

const monthNames = ["January", "February", "March", "April", "May", "June",
     "July", "August", "September", "October", "November", "December"];
   
    const today = new Date();
    //gives you year
    const year = today.getFullYear();
    //gives you month as number/index;
    const month = today.getMonth();

    //stores sequenced month names
    const sequencedNames = [];

    //creates June 2020 through December 2020
    for(let i = month; i < monthNames.length; i++) {
        let monthName = monthNames[i];
        sequencedNames.push(monthName + " " + year)
    }
    
    //creates January 2021 through May 2021
    for(let i = 0; i < month; i++) {
        let monthName = monthNames[i];
        sequencedNames.push(monthName + " " + (year + 1))
    }

    console.log(sequencedNames)

基本上有 2 个 for 循环，第一个从当前月份迭代到年末，然后第二个从年初迭代到当前月份——尽管增加了 1 年。

Answer 3

您可以创建一个日期，然后将月份递增 1 11 次以获得 12 个月的日期。月份名称可以使用 toLocaleString 和适当的选项找到。

增加月份时需要小心，例如

let d = new Date(2020,0,31); // 31 Jan 2020
d.setMonth(d.getMonth() + 1) // 31 Feb 2020 -> 2 Mar 2020
d.toDateString();            // Mon Mar 02 2020

所以最好将日期最初设置为每月的 1 号：

// Optionally provide a date for the starting month
function getMonthNames(date = new Date()) {
  // Copy input date so don't modify it
  let d = new Date(+date);
  // Set to 1st of month
  d.setDate(1);
  let result = [];
  // Get 12 month names, starting with current month
  for (let i=0; i<12; i++) {
    result.push(d.toLocaleString('default',{month:'long'}));
    d.setMonth(d.getMonth() + 1);
  }
  return result;
}

console.log(getMonthNames());

连续显示所有 12 个月，但从当月开始

Display all 12 months serially but starting from the current month

javascript

datetime

ionic-framework

angular

ionic4