Часы, Календарь на JavaScript


Содержание

Простой JavaScript календарь выбора даты (datepicker)

Описание

Календарь выбора даты, также называемый datepicker, написан на JavaScript. Он полностью автономен, т.е. работает без jQuery или каких-либо дополнений, с легкость интегрируется в любой проект. Требования IE 10+

Достаточно подключить скрипт и стиль отображения:

Затем добавить в тег:

или вызвать для всех тегов с CSS классом .datepicker:

Скачать

Описание функций и их параметров

Общая функция xCal(object, delim, order)

Все передаваемые параметры необязательны.

Первый параметр object

В качестве первого параметра можно передавать объект или его ID: xCal(this) или xCal(‘date2’). При отсутствии каких-либо параметров календарь закрывается. Для получения текущей даты функцию можно вызвать со значением первого параметра равным двойке alert(xCal(2)). Пример.

Второй и третий параметр

Если в качестве второго параметра передается объект, то третий параметр игнорируется. Объект может содержать набор некоторых параметров из таблицы ниже. В ином случае устанавливаются необязательные параметры delim и order (см. описание этих параметров в таблице ниже).

Примеры использования функции xCal():

Таблица параметров календаря доступных для установки

Параметр Возможные значения Значение по умолчанию Описание
lang «en», «ru» «ru» Язык интерфейса. Возможно добавить необходимые языки в js файл по аналогии с имеющимися
class строка «xcalend» Имя CSS класса для визуального оформления календаря
delim строка «.» Разделитель между числами дня, месяца и года
order 0 — ДД.ММ.ГГГГ,
1 — ГГГГ.ММ.ДД,
2 — ММ.ДД.ГГГГ
При значении равном единице используется обратный порядок ГГГГ.ММ.ДД, при значении равном двойке используется порядок на американский манер ММ.ДД.ГГГГ, в остальных случаях и по умолчанию ДД.ММ.ГГГГ
id строка отсутствует Уникальный ID календаря. При отсутствии используется название из class
autoOn 0 — выключено,
1 — включено
1 Автоматическое открытие календаря при наведении курсора на поле. Используется функцией xCal.all(). Для ручной установки необходимо в теге использовать onmouseenter=»xCal(this)»
autoOff 0 — выключено,
1 — включено
1 Автоматическое закрытие календаря при выходе курсора за его пределы
now 0 — нет, 1 — да 1 Возможность установки текущей даты в один клик
set0 0 — нет, 1 — да Возможность установки значения «00.00.0000» в один клик, в соответствии с установленным значения порядка отображения
x 0 — нет, 1 — да 1 Отображать кнопку «Закрыть»
hide 0 — нет, 1 — да 1 Скрывать календарь после выбора даты
to строка или элемент document.body Место размещения календаря.
Если этот параметр является строкой, то используется элемент с указанным ID
fn строка или функция отсутствует Вызов функции при выборе даты.
Если задано название функции в виде строки, то в функцию с таким названием передается выбранная дата в качестве единственного параметра.
Если тип этого параметра является функцией, то в нее передается два параметра: выбранная дата и объект со всеми текущими установленными параметрами указанными в данной справочной таблице.

Включение календаря для всех элементов одного класса. Функция xCal.all(className, delim, order)

Функция xCal.all(className, delim, order) предназначена для прикрепления календаря ко всем полям с CSS классом, указанном в первом параметре, className. Эта функция имеет такие же параметры как и у xCal(). Отличается только первым параметром, который должен быть именем CSS класса и является обязательным.

Пример использования функции xCal.all():

Установка умолчаний. Функция xCal.set(options)

Функция xCal.set(options) предназначена для установки значений по умолчанию.

Пример использования функции xCal.set():

Примеры использования

Пример 1

Дата выбрана. Кликните по полю с датой для вызова календаря:

Пример 2

Если поле пустое, то календарь предложит текущую дату. В этом примере также включено автоматическое открытие календаря при наведении курсора на поле:

Пример 3

Пример 4

Тоже самое, что и в предыдущем примере, но в обратном порядке и с разделителем тире:
Открыть календарь, Очистить поле, Текущая дата

Пример 5. Использование xCal.all()

В этом примере события назначаются для всех элементов с классом .datepicker:

Пример 6

Функцию можно применить к любому тегу. Последний результат всегда будет содержаться в xCal.value.
Нажмите ТУТ или ЗДЕСЬ и последний выбранный результат можно всегда посмотреть по этой ссылке.
А это результат только для «ТУТ«.

Пример 7. Использование xCal.set()

Можно динамически менять умолчания параметров. Для смены языка во всех приведенных примерах выше, кроме случаев, где явно указано в передаваемом параметре, нажмите на поле:

Пример 8. AJAX

Использование своих функций. Данный пример подходит для AJAX. Замените «alert» на свою функцию:

Получай Биткоины пассивно!
Заставь время работать на себя!

Самый простой, надежный и проверенный способ растущего пассивного дохода без вложений, затрат времени и изучения.

Делай сегодня то, что другие не хотят, или не знают, и завтра сможешь жить так, как другие не смогут. Всего одно простое решение ведет к большим переменам.

Илон Маск рекомендует:  Диссертация ОПТИМИЗАЦИЯ РАСПРЕДЕЛЕНИЯ ИНФОРМАЦИОННЫХ ФАЙЛОВ В СЕТЯХ ЭВМ С ПАРАЛЛЕЛЬНОЙ ОБРАБОТКОЙ

Легкий календарь с часами, минутами и секундами

Легкий, быстрый, русскоязычный календарь дат, который появляется при клике по полю формы заполнения.

Если Вам нужен легкий календарь, появляющийся при клике по полю формы заполнения, это то, что Вам нужно.

Вначале пример, чтобы понимать, о чем идет речь, кликните на любое поле с датой:

Данный плагин по сути является русифицированным jQuery UI Datepicker 1.7.2 с исключенными изображениями, упрощенным CSS и быстрым появлением.

Чтобы использовать плагин, нужно:

1. Подключить javascript:

2. К нужным полям INPUT добавить , к примеру так:

При желании Вы можете скачать пример или посмотреть его в новом окне »

А как же часы, минуты и секунды?

Когда просто даты мало, в интернете можно найти футуристические календари с часами и минутами »


А мы для Вас разработали свою альтернативу, на базе jQuery UI Datepicker 1.8.2

Чтобы использовать плагин, нужно:

1. Подключить javascript:

2. К нужным полям INPUT добавить , к примеру так:

При желании Вы можете скачать пример или посмотреть его в новом окне »

Подсказки:

1. Если Вы на своем сайте не используете DOCTYPE, то стили ширины немного поплывут, а чтобы их поправить, Вам нужно добавить такие CSS правила:

2. Наверняка Вы заметили, что в календаре очень мал интервал выбора лет. Так вот, чтобы выставить там свой интервал, при подключении пропишите следующее правило:

3. Бывает нужно, чтобы по-умолчанию календарь показывал таблицу выбора Х лет назад. Например, чтобы сделать, 35 лет назад, при подключении пропишите следующее правило (12775 — количество дней тому назад):

Оцени публикацию: Оценили: 33

Теги : jQuery, Формы, Юзабилити, Валидация, Автозаполнение, Календарь, Время, Даты, Плагин

Похожие статьи:

Справочники и учебники:

Комментарии посетителей:

скачал вашу последнюю версию.
П.С. у вас в разных архивах разные версии на странице.

при нажатии на кнопку ОК пишет ошибку «uncaught exception: Missing instance data for this datepicker»

и как указать что в пустое поле нужно вставлять часы и минуты. поле value пустое должно быть.

1. Да, в 1ом архиве версия без часов, минут, секунд.

2. В каком браузере выдает ошибку при нажатии на кнопку ОК?

3. как и описано в статье, добавьте полю

1. OK
2. Наверное глюк был.
3. OK

Такие предложения:
1. Вывод секунд редко нужен поэтому я его просто закомментил в коде
2. Было бы неплохо если бы вы сделали вывод календаря с датами и кнопкой для класса datepickerTimeField а для класса datepickerField календарь без часов и кнопки
3. Сделать возможность задать, что сохранять выбор только по кнопке ОК, а не по клику по дате.

Здравствуйте, Антон!
Можете рассказать какие строки Вы закомментировали, чтобы секунды не выводились.

Такие предложения:
1. Вывод секунд редко нужен поэтому я его просто закомментил в коде

Скрипт текущей даты и времени или цифровые часы Javascript

Доброго времени суток. ��

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

Данный скрипт работает благодаря Javascript. Чтобы сделать себе такие цифровые часы, Вам нужно выполнить небольшую инструкцию по установке.

Для начала в шапке сайта перед закрывающимся head, можно так же в подвале перед закрывающимсяbody, добавить скрипт или поместить в отдельный файл, а потом подключить. Сам скрипт имеет вот такой вид:

В 18 и 19 строке настройка текста, который будет выводится. Так что если захотите заключить в теги, чтобы задать стили отдельно каждому элементу или изменить порядок вывода и тд., то можете подправить.

Теперь нужно добавить строку, которая будет выводить дату и часы в нужном месте. Для этого в нужном месте добавьте вот такой вот код:

Чтобы запустить наши часы, сразу после вывода часов, добавьте еще вот такой маленький скрипт. Но, если Вы подключили главный скрипт в подвале, то этот маленький скрипт, нужно подключать после первого, иначе работать не будет.

все, часы готовы, дата тоже рядом с ними. Пользуйтесь, если надо, надеюсь эта маленькая полезная штука, поможет Вам решить задачу с установкой часов на сайт.

На этом все, спасибо за внимание. ��

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)

Часы на JavaScript

Дата публикации: 2020-11-30

От автора: приветствую вас, друзья. Мы с вами уже умеем манипулировать элементами на странице: выбирать, добавлять, изменять и удалять элементы. Теперь давайте попробуем решить одну из популярнейших в прошлом задач — создадим простейшие часы на JavaScript.

Для того, чтобы реализовать задуманное, нам нужно познакомиться с одной интересной функцией JavaScript — это функция setInterval. Функция принимает два параметра. Первый параметр — некий код или функция, которую необходимо выполнить. Второй параметр — задержка в миллисекундах, с которой необходимо выполнять код из первого параметра.

Собственно, это как раз то, что нам нужно. Первый параметр — это функция, которая будет получать текущее время (часы, минуты и секунды), а второй параметр будет вызывать эту функцию раз в секунду (1000 миллисекунд), тем самым обновляя наши часы ежесекундно. Простейший пример:

jQuery плагины форм для указания времени и даты

Не знаю, сколько сейчас на Ваших часах, но по моим самое время познакомиться с крутыми виджетами для указания времени, даты или и того и другого вместе. Конечно, таких виджетов на просторах сети хоть пруд пруди, но я ограничусь только теми, которые используют библиотеку jQuery.

Сразу хочу предупредить, что некоторые плагины написаны под западную 12-часовую систему.

Bootstrap 3 Datepicker

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

Bootstrap Material Datetimepicker

Пусть вас не вводит в заблуждение присутствие Bootstrap в названии виджета — для его работы Bootstrap уже не требуется, необходимо только наличие jQuery. Основной особенностью является, если так можно выразится, многоэтапность при указании времени. Сначала выбираются часы, потом циферблат меняется и выбираются минуты. Аналогично происходит и при выборе даты.

Есть поддержка календаря в котором неделя начинается с понедельника, а это значит, что плагин можно использовать для проектов рунета.

jQuery UI Timepicker

Созданный на базе существующего виджета jQuery. Этот плагин наследует его простоту, идеологию и соответствие используемой теме jQuery.

Работает с нашей, правильной, 24-часовой системой.

jquery.timepicker

Если вы приверженец минимализма, то этот виджет для вас. Прототипом, вероятно, послужил Google Calendar — jquery.timepicker делает ввод времени таким же простым и естественным.


jQueryTimeAutocomplete

jQueryTimeAutocomplete похож на упомянутый выше jquery.timepicker но, кроме возможности выбора времени из списка, имеет функцию автодополнения. Она понравится тем пользователям, которые не любят просматривать списки в поисках нужного элемента, а предпочитают набирать значения с клавиатуры.

jQuery Time Entry

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

Timeago

Timeago не является виджетом для ввода значений времени или даты, а позволяет выводить вместо конкретного значения даты или времени так называемые«неточные» значения (например «4 минуты назад» или «2 дня назад»). Как его применять и результат его работы можно посмотреть на домашней страничке плагина.

Wickedpicker

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

Часы для сайта

Часы считаются одним из самых популярных скриптов для сайта. На основе этого скрипта можно делать не только таймеры, но и анимацию. Для написания html кода часов для сайта используется 2 метода на JavaScript.

Метод toLocaleTimeString()

Этот способ реализации предусматривает заготовку html шаблона:

После этого указываются такие свойства:

Теперь можно приступить к написанию html кода для часов на сайт. Для этого используется метод toLocaleTimeString(). Он предназначен для вывода часов в формате, который установлен на операционной системе пользователя. Популярность этого метода обусловлена его удобством и краткостью.

Этот способ реализации предусматривает запуск часов сразу же после загрузки сайта. С этой целью используется функция onload. Также потребуется применение функции setInterval(). Она принимает 2 параметра:

  • односекундный интервал;
  • анонимную функцию, получающую текущее время и выводящую его в соответствующий блок.

Отдельный вывод элементов

Второй способ реализации предусматривает вытягивание всех элементов часов по отдельности. Перед тем, как сделать HTML часы на сайте этим методом, необходимо создать блок для вывода времени:

В данном примере указываются такие свойства:

Это способ реализации позволяет поместить весь код в функцию, вызывающуюся после блока для вывода часов. Эта функция взаимодействует с объектом Date с целью получения различных элементов часов.

Главным преимуществом данного метода считается удобство. Разработчик самостоятельно контролирует формат времени на часах. С этой целью можно реализовать проверку, которая при необходимости добавит недостающие нули. После этого формируется строка, в которой указывается свойство innerHTML и выполняется вывод времени в заданном блоке. Для корректной работы этого метода в функции вывода реализован стандартный таймер, запускающий ее каждую секунду.

JavaScript UI контролы Calendar и Time Selection

Calendar — это JavaScript контрол, который можно легко добавить в веб-приложение или веб-страницу.

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Поддерживается во всех современных браузерах
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Обзор

Этот виджет возволяет пользователям выбирать дни, месяцы, годы и точное время. Вы можете выбрать один из двух режимов просмотра — год или месяц, вы также можете использовать Timepicker для выбора времени. Вы можете блокировать конкретные даты и интервалы. Calendar — это легко настраиваемый контрол, к которому вы можете добавлять кнопки.

Режимы «месяц» и «год»

Вы можете отображать месяцы или годы в Calendar.

Выберите месяц или год

Заблокированные даты

Вы можете блокировать дату или диапазон дат с помощью одной строки кода. Например, можно блокировать выходные дни и прочие дни, на которые вы не хотите ничего назначать.

Дополнительные иконки

У Webix Calendar есть удобные кнопки ‘Today’ и ‘Clear’. Благодаря им пользователи могут выбирать текущую дату или снимать выделение.

Нажмите на ‘Today’, чтобы показать текущую дату

Переводите Calendar

В Webix Calendar можно легко перевести на любой язык названия месяцев и дней. Кроме того, этот JavaScript виджет может отображать номер недели. Его можно легко подстроить к местным правилам отсчета начала недели.

Нажмите на ‘fr-FR’, чтобы перевести календарь на французский

Datepicker

Когда вы работаете с формой, вручную вводить даты в поле может быть достаточно неудобно. Главная цель виджета Datepicker — упростить эту задачу. Благодаря ему, вы можете легко выбирать год, месяц и день. Нажав на поле формы, вы увидите всплывающее окно с календарем. По умолчанию, календарь показывает текущую дату.

Выберите даты в разных форматах

Timepicker

Webix также позволяет выбирать время двумя способами. Первый способ — выбор времени с помощью встроенного виджета Timepicker, который отображается в виде иконки с часами под календарем в DatePicker. Второй способ — с помощью отдельного контрола для выбора времени.


Выберите другое время

Date Range и Date Range Picker

С помощью контролов DateRange и DateRangePicker, вы можете выбирать диапазоны дат и даты из нескольких календарей, как на сайтах для бронирования.

Простой JavaScript календарь выбора даты (datepicker)

Описание

Календарь выбора даты, также называемый datepicker, написан на JavaScript. Он полностью автономен, т.е. работает без jQuery или каких-либо дополнений, с легкость интегрируется в любой проект. Требования IE 10+

Достаточно подключить скрипт и стиль отображения:

Затем добавить в тег:

или вызвать для всех тегов с CSS классом .datepicker:

Скачать

Описание функций и их параметров

Общая функция xCal(object, delim, order)

Все передаваемые параметры необязательны.

Первый параметр object

В качестве первого параметра можно передавать объект или его ID: xCal(this) или xCal(‘date2’). При отсутствии каких-либо параметров календарь закрывается. Для получения текущей даты функцию можно вызвать со значением первого параметра равным двойке alert(xCal(2)). Пример.

Второй и третий параметр

Если в качестве второго параметра передается объект, то третий параметр игнорируется. Объект может содержать набор некоторых параметров из таблицы ниже. В ином случае устанавливаются необязательные параметры delim и order (см. описание этих параметров в таблице ниже).

Примеры использования функции xCal():

Таблица параметров календаря доступных для установки

Параметр Возможные значения Значение по умолчанию Описание
lang «en», «ru» «ru» Язык интерфейса. Возможно добавить необходимые языки в js файл по аналогии с имеющимися
class строка «xcalend» Имя CSS класса для визуального оформления календаря
delim строка «.» Разделитель между числами дня, месяца и года
order 0 — ДД.ММ.ГГГГ,
1 — ГГГГ.ММ.ДД,
2 — ММ.ДД.ГГГГ
При значении равном единице используется обратный порядок ГГГГ.ММ.ДД, при значении равном двойке используется порядок на американский манер ММ.ДД.ГГГГ, в остальных случаях и по умолчанию ДД.ММ.ГГГГ
id строка отсутствует Уникальный ID календаря. При отсутствии используется название из class
autoOn 0 — выключено,
1 — включено
1 Автоматическое открытие календаря при наведении курсора на поле. Используется функцией xCal.all(). Для ручной установки необходимо в теге использовать onmouseenter=»xCal(this)»
autoOff 0 — выключено,
1 — включено
1 Автоматическое закрытие календаря при выходе курсора за его пределы
now 0 — нет, 1 — да 1 Возможность установки текущей даты в один клик
set0 0 — нет, 1 — да Возможность установки значения «00.00.0000» в один клик, в соответствии с установленным значения порядка отображения
x 0 — нет, 1 — да 1 Отображать кнопку «Закрыть»
hide 0 — нет, 1 — да 1 Скрывать календарь после выбора даты
to строка или элемент document.body Место размещения календаря.
Если этот параметр является строкой, то используется элемент с указанным ID
fn строка или функция отсутствует Вызов функции при выборе даты.
Если задано название функции в виде строки, то в функцию с таким названием передается выбранная дата в качестве единственного параметра.
Если тип этого параметра является функцией, то в нее передается два параметра: выбранная дата и объект со всеми текущими установленными параметрами указанными в данной справочной таблице.

Включение календаря для всех элементов одного класса. Функция xCal.all(className, delim, order)

Функция xCal.all(className, delim, order) предназначена для прикрепления календаря ко всем полям с CSS классом, указанном в первом параметре, className. Эта функция имеет такие же параметры как и у xCal(). Отличается только первым параметром, который должен быть именем CSS класса и является обязательным.

Пример использования функции xCal.all():

Установка умолчаний. Функция xCal.set(options)

Функция xCal.set(options) предназначена для установки значений по умолчанию.

Пример использования функции xCal.set():

Примеры использования

Пример 1

Дата выбрана. Кликните по полю с датой для вызова календаря:

Пример 2

Если поле пустое, то календарь предложит текущую дату. В этом примере также включено автоматическое открытие календаря при наведении курсора на поле:

Пример 3

Пример 4

Тоже самое, что и в предыдущем примере, но в обратном порядке и с разделителем тире:
Открыть календарь, Очистить поле, Текущая дата

Пример 5. Использование xCal.all()

В этом примере события назначаются для всех элементов с классом .datepicker:

Пример 6

Функцию можно применить к любому тегу. Последний результат всегда будет содержаться в xCal.value.
Нажмите ТУТ или ЗДЕСЬ и последний выбранный результат можно всегда посмотреть по этой ссылке.
А это результат только для «ТУТ«.

Пример 7. Использование xCal.set()

Можно динамически менять умолчания параметров. Для смены языка во всех приведенных примерах выше, кроме случаев, где явно указано в передаваемом параметре, нажмите на поле:

Пример 8. AJAX

Использование своих функций. Данный пример подходит для AJAX. Замените «alert» на свою функцию:

Получай Биткоины пассивно!
Заставь время работать на себя!

Самый простой, надежный и проверенный способ растущего пассивного дохода без вложений, затрат времени и изучения.

Делай сегодня то, что другие не хотят, или не знают, и завтра сможешь жить так, как другие не смогут. Всего одно простое решение ведет к большим переменам.

Помогите пожалуйста создать JavaScript часы выводящие определенный часовой пояс. [дубликат]

На данный вопрос уже ответили:

Помогите пожалуйста создать JavaScript часы выводящие определенный часовой пояс например московский, заранее спасибо.

Отмечен как дубликат участником Grundy javascript Участники со знаками javascript могут единолично закрывать вопросы с меткой javascript как дубликаты, а также повторно открывать их при необходимости. 15 дек ’16 в 10:18 .

Подобный вопрос задавали ранее и на него уже получен ответ. Если представленные ответы не являются исчерпывающими, пожалуйста, задайте новый вопрос.

2 ответа 2

Мой вариант часов на js: ссылка. Посмотрите там код и demo.

Выводит текущее время, каждую секунду время корректируется за счёт рекурсивного вызова setTimeout .

Код в самом простом варианте, html:

Если вам нужно время по Москве, то нужно заранее время отдавать с сервера в js, т.к. на клиенте время будет зависеть от настройки времени и часового пояса в браузере или ОС. На одном Javascript по идее нельзя точно показать время по определённому часовому поясу, т.к. js возвращает время относительно настроенного часового пояса (а он может быть настроен неверно) и не может знать серверное время.

Простые часы для сайта на JavaScript

Это простой скрипт, который показывает системное время на JavaScript простым текстом. Часы, минуты и секунды через двоеточие – и все.

Для того, чтобы задать свой стиль часам, достаточно определить стиль для блока с ID – #time . В CSS Вы можете задать свой шрифт для часов, его цвет и размер. Если Вам нужны не простые часы, а более сложные, то посмотрите Flash часы для сайта. Откуда скрипт берет данные о времени? Показывается время именно то, которое установлено на устройстве.

Установка

Вставьте следующий код в то место на сайте, где хотите увидеть часы. На uCoz это может быть, например, «Верхняя» или «Нижняя части сайта»:

Скрипт сразу покажет в том месте, где Вы его установили, строчку текста с часами. Например, « 00:00:00 ». Секунды, минуты и часы, кстати, всегда двузначные, поэтому смена значений происходит гладко.

Илон Маск рекомендует:  Глава 10 клавиатура
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL