Календарь | htmlbook.ru
Выбор даты применяется на сайтах, торгующих авиа и железнодорожными билетами, ведь посетителя интересует заказ билета на определённый день. Календари также применяются в блогах, где записи систематизируются по дате, и сайтах, связанных с разными событиями, например, спортивными. Так или иначе, календарь востребован и может быть добавлен следующим образом.
<input type="date" атрибуты>На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 22.12.2014, а вид календаря может различаться в зависимости от браузера. Полностью поддерживает календарь пока только Opera, выводя виджет для выбора любой даты (рис. 1).
Рис. 1. Календарь в браузере Opera
Браузер Chrome также поддерживает календарь, но делает это весьма скупо (рис. 2). По сути вы только можете прокручивать дату или вводить её как текст.
Рис. 2. Календарь в Chrome
В примере 1 показано создание календаря для выбора произвольной даты.
Пример 1. Календарь
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Календарь</title>
</head>
<body>
<form>
<p>Выберите дату: <input type="date" name="calendar">
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>Допустимо ограничить ввод даты заданным значением через атрибуты min и max, они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2012, то код запишется, как показано в примере 2.
Пример 2. Ограничение даты
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Календарь</title>
</head>
<body>
<form>
<p>Выберите дату:
<input type="date" name="calendar" value="2012-06-01"
max="2012-06-04" min="2012-05-29">
<input type="submit" value="Отправить"></p>
</form>
</body>
</html> Текущая дата заданная через атрибут value подсвечивается фоном, неактивные дни, которые нельзя выбрать — серым цветом (рис. 3).
Рис. 3. Календарь с диапазоном ввода
Кроме традиционного календаря, в котором можно выбрать дату, месяц и год, существует и календарь только для ввода месяца и недели. Они записываются в таком виде.
<input type="month">
<input type="week">Выбор месяца в Opera происходит через аналогичный виджет, но в этом случае нельзя указать конкретную дату (рис. 4).
Рис. 4. Выбор месяца в Opera
На сервер данные поля type=»month» пересылаются как ГГГГ-ММ, например, 2014-10.
Похожим образом выглядит и виджет для выбора недели (рис. 5), но дополнительно выводится номер недели и выбрать можно только её. На сервер при этом значение отправляется как 2014-W38, где вначале указывается год, затем через дефис W и после него номер недели от начала года.
Рис. 5. Выбор недели в Opera
В примере 3 показано создание поля для ввода месяца.
Пример 3. Выбор месяца
HTML5IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Календарь</title>
</head>
<body>
<form>
<p>Укажите месяц:
<input type="month" name="month">
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>Календарь | WebReference
Выбор даты применяется на сайтах, торгующих авиа и железнодорожными билетами, ведь посетителя интересует заказ билета на определённый день. Календари также применяются в блогах, где записи систематизируются по дате, и сайтах, связанных с разными событиями, например, спортивными. Так или иначе, календарь востребован и может быть добавлен следующим образом.
<input type="date" атрибуты>На сервер данные передаются в формате ГГГГ-ММ-ДД, например, 1998-08-17, а вид календаря может различаться в зависимости от браузера. Полностью поддерживает календарь только Opera и Chrome (рис. 1).
Рис. 1. Календарь в браузере Opera
В примере 1 показано создание календаря для выбора произвольной даты.
Пример 1. Календарь
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Календарь</title> </head> <body> <form> <p>Выберите дату: <input type="date" name="calendar"> <input type="submit" value="Отправить"></p> </form> </body> </html>
Допустимо ограничить ввод даты заданным значением через атрибуты min и max, они соответственно указывают нижнюю и верхнюю дату. Так, если вам требуется сузить диапазон ввода до ±3 дней от даты 01.06.2017, то код запишется как в примере 2.
Пример 2. Ограничение даты
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Календарь</title>
</head>
<body>
<form>
<p>Выберите дату:
<input type="date" name="calendar" value="2017-06-01"
max="2017-06-04" min="2017-05-29">
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>Текущая дата, заданная через атрибут value, подсвечивается фоном, неактивные дни, которые нельзя выбрать — серым цветом (рис. 2).
Рис. 2. Календарь с диапазоном ввода
Кроме традиционного календаря, в котором можно выбрать дату, месяц и год, существует и календарь только для ввода месяца и недели. Они записываются в таком виде.
<input type="month">
<input type="week">Выбор месяца происходит через аналогичный виджет, но в этом случае нельзя указать конкретную дату (рис. 3).
Рис. 3 Выбор месяца
На сервер данные поля type=»month» пересылаются как ГГГГ-ММ, например, 2017-10.
Похожим образом выглядит и виджет для выбора недели (рис. 4), где дополнительно выводится номер недели и выбрать можно только его. На сервер при этом значение отправляется как 2017-W38, где вначале указывается год, затем через дефис W и после него номер недели от начала года.
Рис. 4. Выбор недели
В примере 3 показано создание поля для ввода месяца.
Пример 3. Выбор месяца
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Календарь</title>
</head>
<body>
<form>
<p>Укажите месяц:
<input type="month" name="month">
<input type="submit" value="Отправить"></p>
</form>
</body>
</html>Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.01.2018
Редакторы: Влад Мержевич
Элементы для ввода даты и времени
Элементы для ввода даты и времени
Последнее обновление: 08.04.2016
Для работы с датами и временем в HTML5 предназначено несколько типов элементов input:
datetime-local: устанавливает дату и время
date: устанавливает дату
month: устанавливает текущий месяц и год
time: устанавливает время
week: устанавливает текущую неделю
Например, используем поле для установки даты:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма ввода в HTML5</title> </head> <body> <form> <p> <label for="firstname">Имя: </label> <input type="text" name="firstname"/> </p> <p> <label for="date">Дата рождения: </label> <input type="date" name="date"/> </p> <p> <button type="submit">Отправить</button> </p> </form> </body> </html>
И при вводе в поле для даты будет открываться календарик:
Правда, здесь надо отметить, что действие этого элемента зависит от браузера. В данном случае используется Google Chrome. В последних версиях Opera элемент не будет сильно отличаться. А вот в Microsoft Edge элемент будет выглядеть так:
Применение остальных элементов:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Форма ввода в HTML5</title> </head> <body> <form> <p> <label for="week">Неделя: </label> <input type="week" name="week" /> </p> <p> <label for="localdate">Дата и время: </label> <input type="datetime-local" name="date"/> </p> <p> <label for="month">Месяц: </label> <input type="month" name="month"/> </p> <p> <label for="time">Время: </label> <input type="time" name="time"/> </p> <p> <button type="submit">Отправить</button> </p> </form> </body> </html>
При использовании этих элементов также надо учитывать, что Firefox поддерживает только элементы date и time, для остальных создаются
обычные текстовые поля. А IE11 и вовсе не поддерживают эти элементы.
Дата и время | htmlbook.ru
Наряду с календарём, предназначенном для указания даты, месяца или недели, иногда возникает необходимость вводить ещё и время, например, для точной публикации сообщения. Для подобных ситуаций используется поле datetime и datetime-local, синтаксис у них следующий.
<input type="datetime" атрибуты>
<input type="datetime-local" атрибуты>Как и в случае с календарём пока поддержка этого поля имеется только в браузерах Opera (рис. 1) и Chrome (рис. 2). Атрибуты те же, что и для календаря.
Рис. 1. Вид поля для выбора даты и времени в Opera
Рис. 2. Ввод даты и времени в Chrome
Opera предоставляет удобный виджет сочетающий календарь и ввод времени, Chrome же ограничивается только полем, в котором можно прокручивать секунды или вводить текст вручную. Данные на сервер по умолчанию пересылаются в виде ГГГГ-ММ-ДДTчч:ммZ (например: 2015-09-25T12:15Z), где вначале указывается год, месяц и день, затем после латинской буквы T идут часы с минутами. В теории вместо Z указывается часовой пояс (например: +08:00 или -04:00), а также по желанию секунды с дробной частью, но на практике всё ограничивается только минутами и без часового пояса. Более того, при их наличии Chrome выводит сообщение «Недопустимые данные» и не отправляет введённый текст.
В примере 1 показано создание поля для ввода даты и времени.
Пример 1. Дата и время
HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Дата и время</title>
</head>
<body>
<form>
<p>Время создания публикации</p>
<p><input type="datetime" name="created"></p>
<p><input type="submit"></p>
</form>
</body>
</html>Разница между значениями datetime и datetime-local заключается в добавлении часового пояса для datetime. На деле же пересылаются те же самые данные, только без Z в конце (2015-09-25T12:15).
Для ввода только времени без даты применяется <input type=»time»>, это поле также работает только в Opera и Chrome.
В примере 2 показано создание поля для ввода времени в указанном диапазоне.
Пример 2. Ввод времени
HTML5IE 7IE 8IE 9Cr 13Op 11Sa 5Fx 6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Время</title>
</head>
<body>
<form>
<p>В какое время запускать Cron?</p>
<p><input type="time" name="cron" value="03:15" min="00:01" max="06:00"></p>
<p><input type="submit"></p>
</form>
</body>
</html>В данном примере значение изначально задано с помощью атрибута value, а минимальное и максимальное время установлено через min и max.
PHP Календарь Функции
Введение в PHP-календарь
Расширение календаря содержит функции, которые упрощают преобразование между различными форматами календаря.
Он основан на Юлианский день Кол, который является количество дней, начиная с 1 января, 4713 до н.э.
Примечание: Для преобразования между форматами календаря, вы должны сначала преобразовать в Юлианский день Кол, затем в календарь по вашему выбору.
Примечание: Юлианский день рассчитывать не то же самое, как юлианский календарь!
Установки
Для работы этих функций необходимо скомпилировать PHP с—Enable-Calendar.
Версия PHP для Windows имеет встроенную поддержку этого расширения.
PHP 5 функции календаря
| Функции | Описание |
|---|---|
| cal_days_in_month() | Возвращает количество дней в месяце для указанного года и календаря |
| cal_from_jd() | Преобразует юлианский отсчет дня в дату указанного календаря |
| cal_info() | Возвращает сведения о заданном календаре |
| cal_to_jd() | Преобразует дату в указанном календаре в число Юлианских дней |
| easter_date() | Возвращает метку времени Unix для полуночи на Пасху указанного года |
| easter_days() | Возвращает число дней после 21 марта, что Пасхальный день в указанном году |
| frenchtojd() | Преобразует Французской Республиканской дате Юлианский день Кол |
| gregoriantojd() | Преобразует григорианский день в число Юлианских дней |
| jddayofweek() | Возвращает день недели |
| jdmonthname() | Возвращает имя месяца |
| jdtofrench() | Преобразует юлианский отсчет дня к французской Республиканской дате |
| jdtogregorian() | Преобразует отсчет юлианского дня в григорианский день |
| jdtojewish() | Преобразует юлианский отсчет дня к еврейской дате |
| jdtojulian() | Преобразует Юлианский день рассчитывать на Юлианскую дату |
| jdtounix() | Преобразует юлианский отсчет дня в метку времени Unix |
| jewishtojd() | Преобразует еврейскую дату в юлианский отсчет дня |
| juliantojd() | Преобразует Юлианскую дату в юлианский отсчет дня |
| unixtojd() | Преобразует метку времени Unix в число Юлианских дней |
PHP 5 предопределенные константы календаря
| Постоянной | Тип | Версия PHP |
|---|---|---|
| CAL_GREGORIAN | Integer | PHP 4 |
| CAL_JULIAN | Integer | PHP 4 |
| CAL_JEWISH | Integer | PHP 4 |
| CAL_FRENCH | Integer | PHP 4 |
| CAL_NUM_CALS | Integer | PHP 4 |
| CAL_DOW_DAYNO | Integer | PHP 4 |
| CAL_DOW_SHORT | Integer | PHP 4 |
| CAL_DOW_LONG | Integer | PHP 4 |
| CAL_MONTH_GREGORIAN_SHORT | Integer | PHP 4 |
| CAL_MONTH_GREGORIAN_LONG | Integer | PHP 4 |
| CAL_MONTH_JULIAN_ |