0
160
ViewsImprima una lista de números en un botón de arranque con la misma altura y ancho
Quiero mostrar la cantidad de días en un mes específico dentro del botón de arranque. Usar el código a continuación no distribuyó el botón en una altura y anchura iguales.
Quiero mostrar el número de manera similar a como se muestra en la captura de pantalla, con un número fijo de botones en una fila, no es necesario que sean exactamente siete, pero el número debe distribuirse por igual.
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>¿Cómo debo abordar este problema?
·
Juan Pablo Isaza
1 answers
Answer question0
No se alinea bien porque el ancho cambia ya que algunos de los números son de un solo dígito mientras que otros son de dos dígitos. Establezca un ancho base que tendrán todos los botones, como el siguiente:
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> Todo lo que agregué arriba es style="width: 50px" .
·
Juan Pablo Isaza
Report
Answer question