Календарь html5 – calendar » Большая база плагинов jQuery множество примеров CSS3 и примеры HTML5 сайтов

Календарь | 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).

Календарь в браузере Opera

Рис. 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

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Элементы для ввода даты и времени

Элементы для ввода даты и времени

Последнее обновление: 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_

Отправить ответ

avatar
  Подписаться  
Уведомление о