With the stylization of forms of eternal problems. Now I am faced with the need to display the date in a special way. Is it possible to somehow change the font, colors and remove the year from the field? enter image description here

  • Attach your code, please. - dmitryshishkin
  • @shugich here, simple structure codepen.io/gunslighter__od/pen/BRrOyV - illia_6655321
  • So what about this structure? You do not know how to make up this picture or what? It is not clear what exactly does not work :-( - dmitryshishkin
  • @shugich it should be input [type = "date"]. Is there any way to make it so that when choosing a date it is displayed in the same way as in the picture, and not by the standard view? - illia_6655321
  • And to change the date mono only with the help of the calendar? - dmitryshishkin

1 answer 1

Here is your decision. The idea is in the function changeDate () in which you pass the date selected in the calendar. The full date is recorded in a hidden input so that it can be read by the form. But it is displayed separately using ordinary blocks.

function changeDate(date) { // Записываем дату в скрытй инпут document.querySelector('input[name="date"]').value = date; // Сохраняем месяц в переменную в необходимом формате var month = date.toLocaleString('ru', {month: 'long'}) // Меняем месяц в DOM document.querySelector('.date__month').innerHTML = month; // Соххраняем день месяца var day = date.getDate(); // Меняем день в DOM document.querySelector('.date__day').innerHTML = day; } document.querySelector('button').addEventListener('click', function() { var now = new Date(); changeDate(now); }) 
 .date { width: 50px; text-align: center; } .date__day { font-size: 1.2em; line-height: normal; font-weight: bold; } 
 <form class="header__form"> <input type="hidden" name="date"> <div class="date"> <div class="date__day">10</div> <div class="date__month">апрель</div> </div> </form> <button>Изменить дату</button>