Question

0

163

Visualizações

Print a list of number in a bootsrap button with equal height and width

I want to display the number of days in a specific month within the bootstrap button. Using the code below didn't distribute the button in an equal height and width.

I want to display the number similarly as shown in the screenshot, with a fixed number of buttons in a row, it need not be exact seven but the number should be distributed equally.

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>

How should I approach this problem?

about 4 years ago · Juan Pablo Isaza

1 Respostas

Responde à pergunta

0

Responde à pergunta

Encontrar trabalhos remotos

Answer 1 · 2022-07-03T08:41:40.253Z

It doesn't align good because the width changes as some of the numbers are single digit while other are double digit. Set a base width which all the buttons will have, as the following:

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" style="width: 50px">${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>

All I added in the above is style="width: 50px".

0

163

Print a list of number in a bootsrap button with equal height and width

1 Respostas

0

Encontrar trabalhos remotos

Andres GPT