Как сделать календарь в html и css

Самый простой и быстрый способ как вывести готовый календарь на странице, является применение тега input с аттрибутом date. Давайте посмотрим на его возможности.

Вариант №1:

<input type="date">

Такой вариант создает поле на странице как на рисунке ниже, при нажатии на mm/dd/yyyy можно будет отредактировать значения, а при нажатии на иконку календаря - выбрать нужное.

Вариант №2:

<input type="date" value="2023-01-01">

Здесь мы дополнительно передаем значение которое сразу будет установлено в виде текущего. Это может быть удобно в некоторых случаях.

Вариант №3:

<input type="date" value="2022-05-05" min="2022-01-01" max="2022-12-31">

Тут мы задаем диапазон значение из которых можно выбрать дату, например чтобы пользователь не смог ошибиться при выборе даты. Как видно на примере ниже, выбрать месяц из 2021 года нет возможности