Turn date into string-CodePudding

I am beginner and do a project where I fetch data and I should visualize data by chart bar, and fetched date looks like "09/2009" but I need it to turn into month "September". I tried to toString() method but in doesn't work. And I can't understand how I have to turn it and also where I have to add that data in chartBar code. And also my dates displayed in wrong way in chart bar Here is my code:

  // const first_brewed = beerData.first_brewed;
  const [first_brewed, abv] = beers;
  console.log("beers!!!!", first_brewed);
  //  Think how I can turn 09/2020 date into September
  const dateString = first_brewed.toString();
  console.log(dateString, "Date String!!!!");
  return (
    <>
      {/* Chart Bar */}
      <div className="bar-wrapper">
        <BarChart width={600} height={300} data={beers}>
          <XAxis dataKey="first_brewed" stroke="#333" />
          <YAxis />
          <Tooltip />
          <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
          <Bar dataKey="abv" fill="#9772FB" barSize={30} />
        </BarChart>
      </div>
    </>
  );
}

And one more question, I have to use date picker to filter by date and display it in chart bar and I also have filter by the beer percentage, can I use the same chartBar for both filters? Could you help, please.

CodePudding user response：

You can split your date string on / and extract month and year, then using date constructor create the date object and then get the month name using toLocaleString().

const dateStr = '09/2009';
const [month, year] = dateStr.split('/').map(Number);
const date = new Date(year, month - 1, 01);
const monthName = date.toLocaleString('default', { month: 'long' });
console.log(monthName);

CodePudding user response：

you can make a new function that change the two firsts components of the array dateString. This function can calculate the month as you want. I leave you the function I created, as well as the result it leaves on console

    function changeNumberString (num) {
     let date = new Date();
     if (0 < num && num<= 12) {
       date.setMonth(num- 1);
       return new Intl.DateTimeFormat('en-EN', { month: 'long'}).format(date);
     } else {
       return null;
     }
    }

t = "09/2020"
console.log(changeNumberString(t[0]   t[1]))

The result is:

   September

CodePudding user response：

const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
const month = "09/2009".split('/')[0]
const date = new Date(month)
console.log(monthNames[date.getMonth()])

// const first_brewed = beerData.first_brewed;
const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
const [first_brewed, abv] = beers;
console.log("beers!!!!", first_brewed);
//  Think how I can turn 09/2020 date into September
const dateString = first_brewed?.first_brewed?.split('/')[0]
const date = new Date(dateString)
console.log(monthNames[date.getMonth()])
return (
  <>
    {/* Chart Bar */}
    <div className="bar-wrapper">
      <BarChart width={600} height={300} data={beers}>
        <XAxis dataKey="first_brewed" stroke="#333" />
        <YAxis />
        <Tooltip />
        <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
        <Bar dataKey="abv" fill="#9772FB" barSize={30} />
      </BarChart>
    </div>
  </>
);
}

CodePudding user response：

Use Moment.js for date there are methods that can convert date formats. It is possible to use both filters on the same bar chart.

CodePudding user response：

U need a converter method that gives the number of month then return name of month.

function getMonthName(monthNum){
  const date = new Date();
  date.setMonth(monthNum- 1);

  return date.toLocaleString('en-US', {
    month: 'long',
  }); 
}

then pass data to this function..

var strDate = "09/2020"
var month = getMonthName(strdate.slice(0,2))

the result will be "September"