- doctor Brain
- HTML
- CSS
- JS
- Экземпляр объекта Date
- Как получить год, месяц, дату?
- Как получить название месяца?
- Как получить текущий день недели?
- Как получить количество дней в месяце?
- Как получить количество дней недели до начала текущего месяца.
- Как корректно сместить дату на месяц назад или вперед?
- Итоговый JS-файл
- Результат
- Новые публикации
- JavaScript: сохраняем страницу в pdf
- HTML: Полезные примеры
- CSS: Ускоряем загрузку страницы
- JavaScript: 5 странностей
- JavaScript: конструктор сортировщиков
- Категории
- О нас
- Календарь-1 для сайта на JavaScript
- 1. Стиль календаря
- 2. Код календаря на страние сайта.html
- 3. Скрипт календаря
- Календарь
- Календарь в input для ввода даты
- Календарь для input HTML5
- Календарь для input с помощью Bootstrap DateTimePicker
- Использование с минимальной настройкой:
- Только время
- Только дата
- Поле без иконки
- Включение/выключение дат
- Дата от и до
- Кастомные иконки
- Режимы просмотра календаря
- Минимальный вид
- Выключить дни недели
- В линию
doctor Brain
При создании различных веб-сервисов работа с датами и временем практически всегда занимает весомое место. Создание календаря — достаточно простая задача, которая, тем не менее, часто вызывает затруднения в реализации у начинающих разработчиков.
Сегодня мы создадим виджет простого месячного календаря, отвечающий следующим условиям:
- по умолчанию загружается текущий месяц,
- текущая дата выделяется,
- возможно смещение по календарю на месяц вперед или назад.
HTML
Создадим контейнер обертку month-calendar, в котором разместим три блока:
- month: содержит наименования месяца и года, а также элементы навигации,
- weekdays: наименования дней недели,
- days: собственно, сам календарь (табличная часть, содержит дни месяца).
Так выглядит html-разметка основных блоков календаря:
Обратите внимание: несмотря на визуальную реализацию виджета в виде таблицы, для каждого из вышеперечисленных дочерних элементов контейнера month-calendar мы используем немаркированный список ul . Соответственно, в дальнейшем мы будем манипулировать элементами списков li .
А вот и финальная верстка:
В данном случае для элементов навигации нужно подключить библиотеку Font Awesome (Web Font или SVG версию).
CSS
В основе позиционирования элементов календаря находится модель flexbox.
* < box-sizing: border-box; >body < font-family: sans-serif; >/* месяцы и годы */ #month-calendar < width: 100%; >.month < margin: 0; padding: 3rem 2rem 2rem; background: #555555; text-align: center; width: 100%; color: #ffffff; list-style: none; >.month li < padding: 0; margin: 0; font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.1rem; text-transform: uppercase; font-weight: 700; >.month li.prev, .month li.next < cursor: pointer; >.month li.prev < float: left; >.month li.next < float: right; >.month li.year-name < font-size: 1.2rem; font-weight: 400; >/* дни недели */ .weekdays < margin: 0; padding: 1rem 0; background-color: #dddddd; width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: left; >.weekdays li < display: inline-block; flex: 0 0 calc(100% / 7); text-align: center; >/* дни */ .days < margin: 0; padding: 1rem 0; background-color: #eeeeee; width: 100%; display: flex; flex-wrap: wrap; justify-content: left; align-content: flex-start; height: 14rem; >.days li < padding: 0.5rem; list-style: none; display: inline-block; flex: 0 0 calc(100% / 7); text-align: center; color: #999; font-size: 0.9rem; line-height: 1rem; >.days li.date-now
- ширина контейнера month-calendar равна 100%: width: 100% ,
- для элементов навигации prev и next используются свойства float: left и float-right ,
- блок days имеет фиксированную высоту height: 14rem , что позволяет избежать смещения или наложения элементов при динамической смене данных виджета,
- для табличной части календаря элементы li располагаются слева направо и сверху вниз: горизонтальное выравнивание — justify-content: left , вертикальное — align-content: flex-start ,
- в одном ряду табличной части находится семь элементов, это достигается за счет использования выражения calc: flex: 0 0 calc(100% / 7) ,
- для исключения влияния размеров отсутпов на расчетные значения для всех элементов установлено свойство box-sizing: border-box .
JS
Основу работы виджета составляют свойства и методы встроенного объекта Date.
Экземпляр объекта Date
создать новый экземпляр объекта Date можно только через конструктор:
let nowDate = new Date(); // создаем экземпляра объекта с текущей датой let curDate = new Date(year,month,day); // создаем экземпляр объекта для определенной календарной даты;
Вызов Date() как функции (без new) вернет не экземпляр объекта, а строку.
Как получить год, месяц, дату?
Чтобы получить год, месяц, дату экземпляра объетка Date, обратимся к встроенным методам:
nowDate.getFullYear(); // возвращает год в четырехзначном формате nowDate.getMonth(); // возвращает номер месяца (значение от 0 до 11. Январь равен 0) nowDate.getDate(); // возвращает текущую дату
Как получить название месяца?
Чтобы получить назавние месяца воспользуемся массивом:
let arrMonthName = ['январь','февраль','март','апрель','май','июнь','июль','август','сентябрь','октябрь','ноябрь','декабрь']; let monthName = arrMonthName[NowDate.getMonth()]; // получаем название месяца
Как получить текущий день недели?
Для определения текущего дня недели тоже существует встроенная функция:
nowDate.getDay() // возвращает номер дня недели
Обратие внимание: отсчет дней недели идет с воскресенья, которое равно 0.
Как получить количество дней в месяце?
Существует небольшая хитрость, основанная на способности методов объекта Date автоматически пересчитывать параметры, приводя их к корректному значению. Так, если мы установим дату экземпляра объекта равной 0, метод getDate() вернет дату последнего дня предыдущего месяца, то есть полученное значение будет равнятся количеству дней в предыдущем месяце:
monthDays = new Date(year, month + 1, 0).getDate(); // возвращает количество дней в выбранном месяце
Как получить количество дней недели до начала текущего месяца.
Если неделя стартует с воскресенья, для определения количества дней недели до начала текущего месяца достаточно получить номер первого дня текущего месяца:
new Date(year,month,1).getDay() // возвращает номер дня недели
В случае, когда неделя начинается с понедельника, нужно получит номер последнего дня недели предыдущего месяца:
new Date(year,month,0).getDay() // возвращает номер дня недели
Как корректно сместить дату на месяц назад или вперед?
Мы опять обращаемся к способности методов объекта Date автоматически корректировать дату:
curDate.setMonth(curDate.getMonth() + 1); // смещает дату на месяц вперед curDate.setMonth(curDate.getMonth() - 1); // смещает дату на месяц назад
Итоговый JS-файл
Опираясь на данные, полученные выше создадим итоговый код JavaScript:
Результат
Новые публикации
JavaScript: сохраняем страницу в pdf
HTML: Полезные примеры
CSS: Ускоряем загрузку страницы
JavaScript: 5 странностей
JavaScript: конструктор сортировщиков
Категории
О нас
Frontend & Backend. Статьи, обзоры, заметки, код, уроки.
© 2021 dr.Brain .
мир глазами веб-разработчика
Календарь-1 для сайта на JavaScript
Простой календарь для сайта на CSS и JavaScript.
Представленный календарь предназначен для просмотра ближайших дней плюс-минус месяц. Календарь можно листать до нужного года как вперед, так и назад.
- Разместить все три части на одной странице.
- Разместить часть 1 (стиль календаря) в отдельном файле.css.
- Разместить часть 3 (скрипт календаря) в отдельном файле.js и подключить к странице сайта.
1. Стиль календаря
.look-calendar < width:220px; border:1px solid #c0c0c0; padding:6px; margin: 0 auto; >#calendar < width: 100%; line-height: 1.2em; font-size: 15px; text-align: center; border-spacing:0px; >#calendar tr.dn td < font-size: 15px; >#calendar thead tr:last-child < font-size: small; color: #555555; >#calendar thead tr:nth-child(1) td:nth-child(2) < color: #323232; >#calendar thead tr:nth-child(1) td:nth-child(1):hover, #calendar thead tr:nth-child(1) td:nth-child(3):hover < cursor: pointer; >#calendar tbody td < color: #2c567a; >#calendar tbody td:nth-child(n+6), #calendar .holiday < color: #e78c5c; >#calendar tbody td.today
2. Код календаря на страние сайта.html
‹ › ПнВтСрЧтПтСбВс
3. Скрипт календаря
function calendar(id, year, month) < var Dlast = new Date(year, month + 1, 0).getDate(), D = new Date(year, month, Dlast), DNlast = new Date(D.getFullYear(), D.getMonth(), Dlast).getDay(), DNfirst = new Date(D.getFullYear(), D.getMonth(), 1).getDay(), calendar = '', month = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"]; if (DNfirst != 0) < for (var i = 1; i < DNfirst; i++) calendar += ''; > else < for (var i = 0; i < 6; i++) calendar += ''; > for (var i = 1; i ‘ + i; > else < calendar += '' + i; > if (new Date(D.getFullYear(), D.getMonth(), i).getDay() == 0) < calendar += ''; > > for (var i = DNlast; i < 7; i++) calendar += ''; document.querySelector('#' + id + ' tbody').innerHTML = calendar; document.querySelector('#' + id + ' thead td:nth-child(2)').innerHTML = month[D.getMonth()] + ' ' + D.getFullYear(); document.querySelector('#' + id + ' thead td:nth-child(2)').dataset.month = D.getMonth(); document.querySelector('#' + id + ' thead td:nth-child(2)').dataset.year = D.getFullYear(); if (document.querySelectorAll('#' + id + ' tbody tr').length < 6) < // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр document.querySelector('#' + id + ' tbody').innerHTML += ' '; > > calendar(«calendar», new Date().getFullYear(), new Date().getMonth()); // переключатель минус месяц document.querySelector(‘#calendar thead tr:nth-child(1) td:nth-child(1)’).onclick = function() < calendar("calendar", document.querySelector('#calendar thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar thead td:nth-child(2)').dataset.month) - 1); >// переключатель плюс месяц document.querySelector(‘#calendar thead tr:nth-child(1) td:nth-child(3)’).onclick = function() < calendar("calendar", document.querySelector('#calendar thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar thead td:nth-child(2)').dataset.month) + 1); >
Для этого календаря Примеры оформления (меняем только CSS).
Календарь
Выбор даты применяется на сайтах, торгующих авиа и железнодорожными билетами, ведь посетителя интересует заказ билета на определённый день. Календари также применяются в блогах, где записи систематизируются по дате, и сайтах, связанных с разными событиями, например, спортивными. Так или иначе, календарь востребован и может быть добавлен следующим образом.
На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 22.12.2014, а вид календаря может различаться в зависимости от браузера. Полностью поддерживает календарь пока только Opera, выводя виджет для выбора любой даты (рис. 1).
Рис. 1. Календарь в браузере Opera
Браузер Chrome также поддерживает календарь, но делает это весьма скупо (рис. 2). По сути вы только можете прокручивать дату или вводить её как текст.
В примере 1 показано создание календаря для выбора произвольной даты.
Выберите дату:
Допустимо ограничить ввод даты заданным значением через атрибуты min и max , они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2012, то код запишется, как показано в примере 2.
Пример 2. Ограничение даты
Выберите дату:
Текущая дата заданная через атрибут value подсвечивается фоном, неактивные дни, которые нельзя выбрать — серым цветом (рис. 3).
Рис. 3. Календарь с диапазоном ввода
Кроме традиционного календаря, в котором можно выбрать дату, месяц и год, существует и календарь только для ввода месяца и недели. Они записываются в таком виде.
Выбор месяца в Opera происходит через аналогичный виджет, но в этом случае нельзя указать конкретную дату (рис. 4).
Рис. 4. Выбор месяца в Opera
На сервер данные поля type=»month» пересылаются как ГГГГ-ММ, например, 2014-10.
Похожим образом выглядит и виджет для выбора недели (рис. 5), но дополнительно выводится номер недели и выбрать можно только её. На сервер при этом значение отправляется как 2014-W38, где вначале указывается год, затем через дефис W и после него номер недели от начала года.
Рис. 5. Выбор недели в Opera
В примере 3 показано создание поля для ввода месяца.
Укажите месяц:
Календарь в input для ввода даты
Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем HTML5 type=»date» или JavaScript библиотекой Bootstrap Datepicker. Рассмотрим подробнее эти способы в этой статье.
Календарь для input HTML5
Просто применяем у input атрибут type=»date» или type=»datetime-local» :
Этот вариант самый простой, но поддерживается не всеми браузерами. Поэтому я предпочитаю использовать JavaScript библиотеку Datepicker.
Календарь для input с помощью Bootstrap DateTimePicker
- jQuery
- Moment.js
- Bootstrap.js
- Bootstrap Datepicker js
- Bootstrap CSS
- Bootstrap Datepicker CSS
- Файлы локалей библиотеки moment.
Скачать библиотеку moment можно отсюда .
Подборка бесплатных IT-курсов и вебинаров от Skillbox.
Бесплатные IT-курсы, нужно только пройти онлайн-тест здесь
Подключаем скрипты к проекту:
Использование с минимальной настройкой:
Только время
Только дата
Поле без иконки
Включение/выключение дат
Дата от и до
Кастомные иконки
Режимы просмотра календаря
Минимальный вид
Выключить дни недели
В линию
Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Если мы используем JavaScript, то некоторые действия по умолчанию нужно отменить. Самый распространённый случай это клик по ссылке. К примеру при нажатии должно появляться всплывающее окно, но по умолчанию браузер будет переходить по URL. Если в атрибуте href указать знак Читать далее
Необходимость определить город посетителя на сайте актуально для интернет-магазинов или сайтов работающих в разных регионах. Это даст возможность показывать разные контакты, и изменять текст на страницах в зависимости от текущего местоположения пользователя. Самый простой и эффективный способ — это определить Читать далее
jQuery — это быстрая, небольшая и многофункциональная библиотека JavaScript, включенная в один файл .js. На данный момент это самая популярная библиотека JavaScript. JQuery облегчает жизнь веб-разработчика. Библиотека предоставляет множество встроенных функций, с помощью которых вы можете легко и быстро выполнять Читать далее
Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее
Часто ли у вас случалось такое, что при заполнении формы на сайте истекал срок действия сеанса или например зависал браузер, после чего приходилось заполнять форму заново?! HTML5 представил концепцию механизмов хранения заполняемых данных в браузере. В хранилище HTML5 есть возможность Читать далее
Сегодня мы кастомизируем стандартный виджет Google переводчика для сайта и сделаем его в виде меню с флагами. На данный момент сервис Google Translate Widget больше не поддерживается, но это никак не отразится на сайтах, которые были подключены ранее. Наш кастомный Читать далее
В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее