jQuery календарь при заполнении даты в поле Input

Author Автор: Роман Чернышов    Опубликовано: 29 февраля 2012

Не сказать, что очень часто но периодически нам приходится сталкиваться с веб-формами в которых требуется указать дату, например свой день рождения или желаемую дату для покупки билета в театр. Очень часто в таких случаях поле «дата» разбито на три составных, три небольших поля для ввода дня, месяца и года. Иногда поле «дата» разбито на три выпадающих списка, где представляется возможность выбора из списка дня от 1 до 31, месяца от 1 до 12 и года. В принципе данные решения вполне справляются со своей задачей, но что делать если пользователю необходимо указать даты первого понедельника следующего месяца?

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

В поисках готового решения для этой задачи я наткнулся на календарь написанный на jQuery, и почти полностью удовлетворяющий моим требованиям, за исключением поддержки русского языка и формата вводимой им даты. Таким образом в течении 20 минут календарь был полностью переведен на русский язык, а формат вводимой им даты изменен с ММ/ДД/ГГ на ДД/ММ/ГГГГ. Впрочем вы при желании сможете без проблем поменять формат, изменив всего пару строк в коде.

Ниже привожу скриншот календаря. (в боевых действиях, календарь будет отображен по щелчку в текстовое поле)

Пример демо-кода, HTML странички с календарем.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Календарь - rche.ru</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="cal.css" />
<script language="JavaScript" 
	type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://rche.ru/examples/cal.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#calendar').simpleDatepicker();  // Привязать вызов календаря к полю с CSS идентификатором #calendar
});
</script>
 
</head>
<body>
<input id="calendar" name="date" value="" type="text"/>
</body>
</html>

Скачать исходники вы можете по этой ссылке, просмотреть демо.

Надеюсь вам придется по вкусу данный jQuery календарь.

1 Comment to “jQuery календарь при заполнении даты в поле Input”

  • britair 23.12.2017 в 4:21 пп

    Подскажите, как поменять начало недели с понедельника, а не с воскресенья ?

Оставить комментарий

Автор блога
Роман Чернышов
Веб-разработчик,
Full Stack
Senior, Architect
PHP, JavaScript, Node.JS, Python, HTML 5, CSS 3, MySQL, Bash, Linux Admin
Заказать работу
предложить оффер

Моя книга
Книга. Веб-разработчик. Легкий вход в профессию
Печатная книга
Веб-разработчик.
Легкий вход в профессию
Оформить предзаказ
Последние вопросы
Список вопросов
Последние комментарии
Меню

Archive

Мои проекты
Insurance CMS Love Crm CMS Совместные покупки Мой PHP Framework Хостинг для моих клиентов Лицензии на мой софт и поддержка