Стилизация input

270

13 мая 2017, 20:41

Со стилизацией форм вечные проблемы. Сейчас столкнулся с необходимостью по-особенному выводить дату. Можно ли как-то изменить шрифт, цвета и убрать из поля год?

Answer 1

Вот ваше решение. Идея в функции changeDate() в которую вы передаете дату, выбранную в календаре. Полная дата записывается в скрытый инпут, чтобы ее можно было прочитать формой. Но отображается она отдельно при помощи обычных блоков.

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>