I am trying to find a way to show the number of days in a specific month within a bootstrap button. However, the code I have been using does not evenly distribute the buttons in terms of height and width.
I would like the display to look similar to the screenshot provided, with a set number of buttons in a row that are evenly distributed. While it doesn't have to be exactly seven buttons, I want them to be spaced out evenly.
https://i.sstatic.net/3rnKj.png
const [day, month, year] = "18/03/2022".split("/");
const getAllDaysInMonth = (month, year) =>
Array.from({
length: new Date(year, month, 0).getDate()
}, // get next month, zeroth's (previous) day
(_, i) => new Date(year, month - 1, i + 1) // get current month (0 based index)
);
const allDatesInOctober = getAllDaysInMonth(month, year);
const allDateinMonth = allDatesInOctober.map(x => x.toLocaleDateString([], {
day: "numeric"
}));
const list = document.getElementById('year-of-day');
window.onload = () => {
list.innerHTML = allDateinMonth.map(i => `<button type="button" class="btn btn-info m-2">${i}</button>`).join('');
};<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row rowSpacing">
<div class="col-md-12">
<div class="form-group col-md-12">
<label for="inputEmail4">Select Dates</label>
<div class="input-group" id="year-of-day">
<button type="button" class="btn btn-info m-2"> </button>
</div>
</div>
</div>
</div>Can someone suggest a solution to address this issue?