Quiero crear campos de entrada donde el usuario pueda agregar el mes y el año. Intento con (ver más abajo), pero Mozilla Firefox no es compatible.
<input type="month" id="start" name="start">¿Alguien sabe la alternativa cómo puedo agregar el mes y el año para todos los navegadores?
O puedes intentarlo
// define variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); var yearSelect = document.querySelector('#year'); var monthSelect = document.querySelector('#month'); // hide fallback initially fallbackPicker.style.display = 'none'; fallbackLabel.style.display = 'none'; // test whether a new date input falls back to a text input or not var test = document.createElement('input'); try { test.type = 'month'; } catch (e) { console.log(e.description); } // if it does, run the code inside the if() {} block if(test.type === 'text') { // hide the native picker and show the fallback nativePicker.style.display = 'none'; fallbackPicker.style.display = 'block'; fallbackLabel.style.display = 'block'; // populate the years dynamically // (the months are always the same, therefore hardcoded) populateYears(); } function populateYears() { // get the current year as a number var date = new Date(); var year = date.getFullYear(); // Make this year, and the 100 years before it available in the year <select> for(var i = 0; i <= 100; i++) { var option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); } } <form> <div class="nativeDatePicker"> <label for="month-visit">What month would you like to visit us?</label> <input type="month" id="month-visit" name="month-visit"> <span class="validity"></span> </div> <p class="fallbackLabel">What month would you like to visit us?</p> <div class="fallbackDatePicker"> <div> <span> <label for="month">Month:</label> <select id="month" name="month"> <option selected>January</option> <option>February</option> <option>March</option> <option>April</option> <option>May</option> <option>June</option> <option>July</option> <option>August</option> <option>September</option> <option>October</option> <option>November</option> <option>December</option> </select> </span> <span> <label for="year">Year:</label> <select id="year" name="year"> </select> </span> </div> </div> </form>Lo he resuelto de manera similar a rgedit .
Tengo dos matrices, una con meses y la segunda con años (solo usé este y los próximos dos años, como a continuación).
[new Date().getFullYear(), new Date().getFullYear() + 1, new Date().getFullYear() + 2,]
luego tengo dos etiquetas seleccionadas donde usé forEach durante meses y años y luego hice la fecha que necesitaba.
let date = myMonth + '-' + myYear let newDate = new Date(date)Después de tener el mes y el año, puedo encontrar el primer y último día del mes, lo que necesitaba.
No es bonito, pero funciona :D Gracias chicos.
RESPONDER
— setDate() establece el día del mes de una fecha.
const d = new Date(); d.setDate(0);— Establecer el día del mes en una fecha específica:
const d = new Date("July 21, 1983 01:15:00"); d.setDate(15);— El método setMonth() establece el mes de un objeto de fecha. Nota : enero es 0, febrero es 1, y así sucesivamente.
Establezca el mes en 4 (mayo):
const d = new Date(); d.setMonth(4);— Configure el mes en 4 (mayo) y el día en 20:
const d = new Date(); d.setMonth(4, 20);— setFullYear() establece el año de una fecha. setFullYear() también puede establecer el mes y el día.
const d = new Date(); d.setFullYear(2020); const d = new Date(); d.setFullYear(2020, 10, 3);