Календарь jquery

Сегодняшний урок будет посвящен созданию красивого календаря в стиле iPhone.

С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

Календарь jquery

Первым делом формируем структуру календаря на HTML:

<table cellspacing="0">
<thead>
<tr>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tr>
</thead>
<tbody>
<tr>
<td class="padding" colspan="3"></td>
<td> 1</td>
.
d>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
<td>21</td>
<td class="date_has_event">
22
</td>
<td>23</td>
<td>24</td>
<td>25</td>
</tr>
<tr>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="padding"></td>
</tr>
</tbody>
<tfoot>
<th>Mon</th><th>Tue</th><th>Wed</th>
<th>Thu</th><th>Fri</th><th>Sat</th>
<th>Sun</th>
</tfoot>
</table>

Для отображения текущей даты используется класс «today», для отображения даты с каким-либо событием — «date_has_event».

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

<div class="events">
<ul>
<li>
<span class="title">Event 1</span>
<span class="desc">Lorem ipsum dolor sit amet, consectetu adipisicing elit.</span>
</li>
<li>
<span class="title">Event 2</span>
<span class="desc">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</li>
</ul>
</div>

Также обратите внимание, что обязательно необходимо использовать класс «events».

Далее наступает черед CSS магии и jQuery волшебства:

<script src="js/jquery-1.3.min.js" type="text/javascript"> </script>
<script src="js/coda.js" type="text/javascript"> </script>
<link rel="stylesheet" href="css/master.css" type="text/css" media="screen" charset="utf-8" />

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

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

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

Спасибо за внимание!

ruseller.com

Datepicker


jquery.page2page.ru

Как создать календарь при помощи jQuery и CSS3

На этом уроке мы создадим календарь при помощи jQuery и CSS3, пример которого можно найти в Futurico UI Pro созданного Владимиром Кудиновым. Для «функциональности» мы будем использовать  jQuery и jQuery UI. Из JQuery UI мы будем использовать только скрипт «Datepicker». Так что вам не нужно загружать все компоненты, доступные в JQuery UI, и размер файла будет меньше.

Шаг 1 — HTML-разметка

Чтобы создать календарь нам нужно только добавить один тег DIV с идентификатором.

Затем перед закрывающим тегом body мы должны подключить JQuery и JQuery UI.

Нам также нужно вызвать «DatePicker», тут вы должны использовать тот же идентификатор, который вы использовали в div-e. Мы также добавим некоторые опции: inline сделает календарь видимым, так что нам не нужно будет нажимать на кнопку, чтобы он появился; для того чтобы «Понедельник» был первый день в календаре, мы должны установить firstDay равную 1, «showOtherMonths» добавит другие месяцы, чтобы заполнить все таблицы. Для получения дополнительной информации обо всех имеющихся вариантах читайте документацию.

Шаг 1. Как создать календарь при помощи jQuery и CSS3

Шаг 2 — Контейнер

Давайте начнем с того, что удалим все поля, отступы, границы и т.д.

Затем мы зададим стили для контейнера календаря. Давайте добавим цвет фона, закругленные углы и тени. Мы также изменим шрифт текста на «Tahoma» и размер текста.

Шаг 2. Как создать календарь при помощи jQuery и CSS3

Шаг 3 — Заголовок

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

Чтобы добавить зеленый круг, мы будем использовать псевдо-селектор :before. Это позволит нам вставлять содержимое перед элементом «месяц», а затем мы зададим стили и положение ему.

Шаг 3. Как создать календарь при помощи jQuery и CSS3

Шаг 4 — «Предыдущий и следующий месяц»

Мы будем использовать фоновое изображение для стрелок «следующий» и «предыдущий», а затем мы разместим стрелки «предыдущий» слева и «следующий» справа.

Шаг 4. Как создать календарь при помощи jQuery и CSS3

Шаг 5 — Стили календаря

Для стилей дней недели мы добавим верхние и нижние отступы и изменим цвет.

Затем мы зададим стили для «таблицы дней», добавив некоторые отступы, цвета и прозрачные границы для каждой цифры.

В активном состоянии мы будем изменять текст и цвет границы на зеленый. Для «других дней месяца» мы изменим цвет на серый.

Шаг 5. Как создать календарь при помощи jQuery и CSS3

Заключение

Вот и всё, мы закончили наш календарь. Если у Вас возникли вопросы, дайте знать в комментариях.

www.webmasters.by

image Всем привет, дорогие читатели Хабра!

Статья посвящена jQuery UI и его виджету выбора дат.

Часто бывает, что на странице необходимо сделать выбор периода дат (а иногда даже нескольких разрозненных дат). Но Datepicker от jQuery UI позволяет выбирать только одну дату в пределах одного календаря.

Поэтому частым решением на практике является создание двух полей ввода с контролем по типу «от и до». Также можно найти много «костыльных» способов для решения данной задачи — это нам не подходит.

Итак, наша цель — решить задачу самыми минимальными усилиями используя только jQuery UI Datepicker.

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

Для тех, кому не принципиально использовать стандартный виджет $.datepicker(), я приготовил пару ссылок, надеюсь вы также сочтете их полезными:

— Статья о PickMeUp на хабре (выбор нескольких дат, выбор периода).
— Прекрасный плагин DateTimePicker от XDSoft (выбор периода дат, возможность выбора времени и другие разнообразные фичи), стоит посмотреть

Есть и другие решения, но я не буду на них останавливаться. Если у вас есть свои любимые календари выбора дат, буду рад прочитать о них в комментариях к статье.

Описание расширения

Расширение представляет собой файл, который расширяет возможности виджета $.datepicker(), используя его объектную модель. Не влияет на работоспособность Datepicker в дефолтном режиме. Поэтому не стоит беспокоиться о том, что ваш (уже написанный) код перестанет работать или начнет функционировать иначе.

Расширение позволяет изменить поведение выбора даты в двух режимах:

  • Выбор периода (две даты: начало и окончание периода)
  • Выбор нескольких дат (массив дат)

Так как расширение планируется использовать для выбора нескольких дат, то рекомендую его применять к элементу DIV (а не INPUT), а при выборе дат заполнять соответствующие значения в поля ввода (см. примеры в конце статьи).

habr.com


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

 

 

Я оставил для примера и скачивания всю цветовую гамму которую использовал при создании сайта «All For Business» и вот страница с этим календарём!

HTML

Между тегами <head> </head> подключаем скрипты:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.eventCalendar.js"></script>

Устанавливаем в нужном месте сам div вывод календара:

<div id="eventCalendar" style="width: 500px; margin: 150px auto;"></div>

 

CSS

Если у Вас уже есть сайт и там прописаны все его стили, то просто добавьте:

.eventCalendar-wrap {  	border:none;  	margin-bottom:20px;  	margin-top:-20px;  	background-color:#fff;  	color:#807E7E;  }  	.eventCalendar-wrap .eventCalendar-arrow {  		text-decoration:none;  		color:#fff;  		padding:0 5px;  		line-height:28px;  		top:-6px;  		padding:18px 10px;  	}  		.eventCalendar-wrap .eventCalendar-arrow.prev {    		}  		.eventCalendar-wrap .eventCalendar-arrow:hover { opacity:0.7;}  		.eventCalendar-wrap .eventCalendar-arrow span {  			height: 0;  			width: 0;  			font-size: 0;  			line-height: 0;  			border-top: 6px solid transparent;  			border-bottom: 6px solid transparent;  			border-left: 6px solid #fff;  			float:left;  			text-indent:-5000px;  		}  			.eventCalendar-wrap .eventCalendar-arrow.eventCalendar-prev span {  				border-left-width:0;  				border-right: 6px solid #fff;  			}  	.eventCalendar-slider { height:80px;}    	.eventCalendar-monthWrap {  		top:0px;  		left:0px;  	}  		.eventCalendar-currentTitle {  			line-height:35px;  			background-color:#33a7b5;  			outline:1px solid #33a7b5;  		}  			.eventCalendar-currentTitle .eventCalendar-monthTitle {  				font-size:120%;  				text-decoration:none;  				color:#fff;  			}    		.eventCalendar-daysList {  			zoom: 1;  			padding:0;  			width:100%;    		}  			.eventCalendar-daysList.eventCalendar-showAsWeek {  				margin:10px 0px;  				width:auto;  				border-bottom-width:0;  				border-radius:0;  				background-color:#fff;    			}  			.eventCalendar-daysList.showDayNames.eventCalendar-showAsWeek {    				border-radius:none;  			}  			.eventCalendar-daysList:before, .eventCalendar-daysList:after { content:""; display:table; }  			.eventCalendar-daysList:after { clear: both; }  			.eventCalendar-day-header {  				text-transform:lowercase;  				text-align:center;  				font-size:15px;  				border-bottom:solid 1px #e3e3e3;  			}  			.eventCalendar-daysList.eventCalendar-showAsWeek li {  				height:auto; margin:0;  			}  				.eventCalendar-daysList.eventCalendar-showAsWeek li.eventCalendar-empty {  					background-color: #e3e3e3;  					min-height:29px;  				}  			.eventCalendar-day a {  				text-decoration:none;  				font-size:10px;  				color:#424242;  			}  			.eventCalendar-day {  				border-left:none;  			}  			.eventCalendar-day a {  				border:none;  			}  			.eventCalendar-showAsWeek .eventCalendar-day { border-left-width:0;}  			.eventCalendar-showAsWeek .eventCalendar-day a {  				border:solid 1px #e3e3e3;  				border-color:#fff #e3e3e3 #e3e3e3 #e3e3e3;  				line-height:27px;  				font-size:12px;    			}  				.eventCalendar-day a:hover {  					background-color:#E4E4E4;  				/*	box-shadow:inset 5px 5px 10px #C1C1C1;  					text-shadow: 2px 2px 2px #C1C1C1;*/  				}  			.eventCalendar-daysList li.today a {  				color:#fff;  				background:#33a7b5;  			/*	box-shadow:inset 5px 5px 10px #777;  				text-shadow: 2px 2px 2px #777;*/  			}  				li.eventCalendar-day.today a:hover {  					background-color:#9cdce4;  					/*box-shadow:inset 5px 5px 10px #999;*/  				}    			.eventCalendar-daysList li.eventCalendar-dayWithEvents a {  				background:#f77a11;  				color:#fff;  			}  				li.eventCalendar-day.eventCalendar-dayWithEvents a:hover {  					background-color:#f9a45d;  				}      			.eventCalendar-daysList li.current a {  				color:#fff;  				background:#449FB2;  			}  				li.eventCalendar-day.current a:hover {  					background-color:#79BDCC;  				}  		.eventCalendar-loading {  			margin:0 auto;  			padding:0px;  			background-color:#ccc;  			color:#fff;  			text-align:center;  			position:absolute;  			z-index:4;  			top:38px;  			left:0px;  		}  			.eventCalendar-loading.error {  				background-color:red;  			}    .eventCalendar-subtitle { padding-top:10px;}  .eventCalendar-list-wrap {  	min-height:100px;  	position:relative;  }  	.eventCalendar-list-content.scrollable {    		height:100px;  		overflow-y:auto;  		margin:0 5px 5px 0;  	}  	.eventCalendar-list {  		margin:0; padding:0; list-style-type:none;  	}  	.eventCalendar-list li {  		padding:0 0px 5px;  		margin:0;  		margin-bottom:20px;  		clear:both;  		border-bottom:1px dashed #ebebeb;  	}  		.eventCalendar-list li time {  			font-size:11px;  			line-height:15px;  		}  		.eventCalendar-list li time em {  			float:left;  			font-style:normal;  			background-color:#767676;  			color:#fff;  			padding:2px 5px 2px 5px;  		}  		.eventCalendar-list li time small {  			font-size:11px;  			float:left;  			background-color:#f77a11;  			color:#fff;  			padding:2px 5px 2px 5px;  			margin:0 0 0 3px;  		}  		.eventCalendar-list li .eventCalendar-eventTitle {  			display:block;  			clear:both;   font-size:150%;  			text-decoration:none;  		}  			.eventCalendar-list li a.eventCalendar-eventTitle {  				color:#33a7b5;  			}  			.eventCalendar-list li a.eventCalendar-eventTitle:hover { text-decoration:underline;}  		.eventCalendar-list li .eventDesc {  			clear: both;  			margin:0 0 5px 0;  			font-size:80%;  			line-height:1.2em;    		}  		.eventCalendar-list .eventCalendar-noEvents {  			font-size:120%;  			padding:5px;  			background-color:#f77a11;  			border-bottom: none;  			color:#fff;  			text-align:center;  		}    .bt {  	font-size:15px;  	display:block;  	clear:both;  	text-align: center;  	margin-top:10px;  	padding: 11px 34px 12px;  	text-decoration: none;  	line-height: 1;  	color: #ffffff !important;  	background-color: #33a7b5;  	text-shadow: none;  	box-shadow: none;  	-webkit-transition: 0.1s linear all;  	-moz-transition: 0.1s linear all;  	-ms-transition: 0.1s linear all;  	-o-transition: 0.1s linear all;  	transition: 0.1s linear all;  }  .bt:hover {  	 background-color: #f77a11;  	 text-decoration: none;  	}

 

jS

Делаем вызов скрипта:

$(function(){
var data = [
{ "date": "2017-09-21 10:15:20", "title": "Событие 1", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2018-09-21 10:15:20", "title": "Событие 2", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2019-09-01 10:15:20", "title": "Событие 3", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2020-10-21 10:15:20", "title": "Событие 4", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-08-22 10:15:20", "title": "Событие 5", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-04-23 10:15:20", "title": "Событие 6", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-08-04 10:15:20", "title": "Событие 7", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-12-25 10:15:20", "title": "Событие 8", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-11-26 10:15:20", "title": "Событие 9", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-09-27 10:15:20", "title": "Событие 10", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" },
{ "date": "2021-01-28 10:15:20", "title": "Событие 11", "description": "Анонс меоприятия", "url": "https://s-sd.ru/" }
];
$('#eventCalendar').eventCalendar({
jsonData: data,
eventsjson: 'data.json',
jsonDateFormat: 'human',
startWeekOnMonday: false,
openEventInNewWindow: true,
dateFormat: 'DD-MM-YYYY',
showDescription: false,
locales: {
locale: "ru",
txt_noEvents: "Нет запланированных событий",
txt_SpecificEvents_prev: "",
txt_SpecificEvents_after: "события:",
txt_NextEvents: "Следующие события:",
txt_GoToEventUrl: "Смотреть",
moment: {
"months" : [ "Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
"Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь" ],
"monthsShort" : [ "Янв", "Фев", "Мар", "Апр", "Май", "Июн",
"Июл", "Авг", "Сен", "Окт", "Ноя", "Дек" ],
"weekdays" : [ "Воскресенье", "Понедельник","Вторник","Среда","Четверг",
"Пятница","Суббота" ],
"weekdaysShort" : [ "Вс","Пн","Вт","Ср","Чт",
"Пт","Сб" ],
"weekdaysMin" : [ "Вс","Пн","Вт","Ср","Чт",
"Пт","Сб" ]
}
}
});
});

Тут по моему всё видно и далее писать особо нечего! Пользуйтель!

 

s-sd.ru

  • Ion.Calendar основан на мощной библиотеке для работы со временем — Moment.js.
  • Поддерживает все языки, форматы дат и возможности парсинга, что и Moment.js.
  • Календарь и датапикер в одном.
  • Может быть полностью видоизменен через CSS.
  • Календарь резиновый, может быть растянут под любой контейнер.
  • Поддерживает несколько независимо работающих календарей на одной странице.
  • Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
  • Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).
  • Репозиторий на GitHub.
  • Плагин свободно распространяется на условиях лицензии MIT.

Календарь на русском. Первый день недели — понедельник. Возвращает дату в принятом в России формате даты: День.Месяц.Год. Доступный дипазон лет: текущий год минус 80 лет.

Календарь на английском. Первый день недели — воскресенье. Возвращает дату в формате ISO8601. Доступный диапазон лет: 1915-1995

Календарь на японском. Первый день недели — воскресенье. Возвращает дату в локализованом формате. Доступный диапазон лет: текущий год минус 20 лет.

Календарь на русском. Первый день недели — понедельник. Стрелочки спрятаны. Выполняет функцию при инициализации. Возвращает дату в локализованном формате. Доступный дипазон лет: текущий год минус 30 лет.

Датапикер. Все поля имеют разные языки и настройки, установленные с помощью атрибутов data-*

 $(".date").each(function(){  $(this).ionDatePicker(); }); 
  • jQuery 1.9+
  • Moment.js 2.1+

Подключаем библиотеки:

  • jQuery
  • moment-with-locales.min.js
  • ion.calendar.min.js

CSS:

  • normalize.min.css — желательно, если он у вас еще не подключен
  • ion.calendar.css

Создаем базовый контейнер:

 <div class="myCalendar" id="myCalendar-1"></div> 

Инициализируем календарь:

 $("#myCalendar-1").ionCalendar(); 

Или инициализируем календарь с параметрами:

 $("#myCalendar-1").ionCalendar({  lang: "ru", // язык календаря  sundayFirst: false, // первый день недели  years: "80", // диапазон лет  format: "DD.MM.YYYY", // формат возвращаемой даты  onClick: function(date){ // клик по дням вернет сюда дату  console.log(date);  } }); 

Создаем базовое поле ввода:

 <input class="myInput" id="myDatePicker-1" data-lang="ru" data-years="1995-2013" data-sundayfirst="false" /> 

Инициализируем датапикер:

 $("#myDatePicker-1").ionDatePicker(); 
Атрибут По умолчанию Описание
lang «en» Необязательный параметр, позволяет выбрать язык календаря. Каждый дополнительный язык требует своего файла локализации
sundayFirst true Необязательный параметр, позволяет выбрать первый день недели в календаре. (Например в США неделя начинается с воскресенья, в России с понедельника). Если true — то первый день будет воскресенье, если false — то понедельник.
years «80» Необязательный параметр, определяет дипазон лет, которым будет оперировать календарь. Может принимать 1 или 2 значения через дефис. Значения должны быть целыми числами. Одиночное значение, например «80», означает, что дипазон календаря: 80 лет назад — сегодняшний год. Двойное значение же, например «1900-2000» задает точный диапазон от 1900-го до 2000-го года.
format Необязательный параметр, задает формат возвращаемой даты. Основные значения: пустой — вернет дату в формате ISO8601; «moment» — вернет объект moment(); «строка сформированная по правилам Moment.js» — вернет дату в выбранном формате. Например строка «DD.MM.YYYY» — вернет «15.07.2013».
clickable true Необязательный параметр, если установить false, то клики по дням больше не будут возвращать дату.
hideArrows false Необязательный параметр, прячет стрелки переключения месяцев.
startDate Необязательный параметр, позволяет отметить на календаре выбранную дату (имеет смысл для датапикера).
onClick Функция возвращает выбранную дату при клике по дням. Возвращаемое значение может быть строкой или объектом moment().
onReady Функция возвращает текущую дату при готовоности календаря. В том же формате что и onClick

ionden.com

Попался мне очень удобный и функциональный jQuery календарик!

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

Подключается он как всегда очень просто!

<script type="text/javascript" src="jquery.js"></script>  <script type="text/javascript" src="date.js"></script>  <script type="text/javascript" src="jquery.datePicker-2.1.2.js"></script>  <link rel="stylesheet" href="datepicker.css" type="text/css" /> 

В строке 1, наш любимый jQuery, строка 2 — настройки календаря, строка 3 — сам календарик, ну и его стиль — строка 4.

А тут в архиве можно скачать русский календарь на jQuery.

Теперь рассмотрю несколько способов вызова.

1. Обычный календарь на jQuery

<script type="text/javascript">  $(function()  {  $('#inputDate1').datePicker();  });  </script>

поле ввода:

<input id="inputDate1" value="" />

и пример: Календарь на jQuery.

2. Календарь с заданным диапазоном

Календарь с активными датами от 01-01-2000 по 01-01-2012, вызов по нажатии на иконку календарика.

<script type="text/javascript">  $(function()  {  $('#inputDate2').datePicker({  startDate: '01-01-2000',  endDate: '01-01-2012'  });  });  </script>

поле ввода:

<input id="inputDate2" value="" />

и пример: Календарь с заданным диапазоном.

3. Вызов по нажатию на поле ввода

Обычный календарь без иконки календарика, вызов по нажатию на поле ввода.

<script type="text/javascript">  $(function()  {  $('#inputDate3').datePicker({  createButton:false,  clickInput:true  });    });  </script>

поле ввода:

<input id="inputDate3" value="" />

и пример: Вызов по нажатию на поле ввода.

4. Календарь на год

Календарь с активной датой на год с сегодняшнего дня, вызов по нажатию на поле ввода.

<script type="text/javascript">  $(function()  {  $('#inputDate4').datePicker({  createButton:false,  clickInput:true,  endDate: (new Date()).addDays(365).asString()  });  });  </script>

поле ввода:

<input id="inputDate4" value="" />

и пример: Календарь на год.

5. Календарь с активными рабочими днями

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

<script type="text/javascript">  $(function()  {  $('#inputDate5').datePicker({  clickInput:true,  endDate: (new Date()).addDays(365).asString(),  renderCallback:function($td, thisDate, month, year)  {  if (thisDate.isWeekend()) {  $td.addClass('weekend');  $td.addClass('disabled');  }  }  });  });  </script>

поле ввода:

<input id="inputDate5" value="" />

и пример: Календарь с активными рабочими днями.

6. Календарь с кнопкой «Закрыть»

Календарь с кнопкой «Закрыть», вызов по нажатии на иконку календарика. После выбора даты — не закрывается. По нажатию на поле ввода происходит обработка функции «click»

<script type="text/javascript">  $(function()  {  $('#inputDate6').datePicker({  displayClose:true,  closeOnSelect:false  })  .bind(  'click',  function()  {  alert("сработал click!");  }  );  });  </script>

поле ввода:

<input id="inputDate6" value="" />

и пример: Календарь с кнопкой «Закрыть».

7. Начало за 5 дней от сегодня

Календарь, активные дни которого начинаются за 5 дней от сегодняшней даты, вызов по нажатию на поле ввода. После выбора даты происходит обработка функции «dateSelected», которая вызывает сообщение с выбранной датой и присваивает ее предыдущему полю. После закрытия календаря происходит обработка функции «dpClosed»

<script type="text/javascript">  $(function()  {  $('#inputDate7')  .datePicker({  createButton:false,  startDate: (new Date()).addDays(-5).asString(),  clickInput:true  }  )  .bind(  'dpClosed',  function(e, selectedDate)  {  alert("сработал dpClosed");  }  )  .bind(  'dateSelected',  function(e, selectedDate, $td)  {  alert("сработал dateSelected, " + selectedDate.asString());  $('#inputDate7').val(selectedDate.asString());  $('#inputDate6').dpSetSelected(selectedDate.addDays(0).asString());  }  );  });  </script>

поле ввода:

<input id="inputDate7" value="" />

и пример: Начало за 5 дней от сегодня.

8. Календарь в DIV контейнере

Календарь в DIV контейнере, при изменении даты обработка функции «dateSelected».

<script type="text/javascript">  $(function()  {  $('#inputDate8')  .datePicker({inline:true})  .bind('dateSelected',function(e, selectedDate, $td)  {  alert(selectedDate.asString());  }  );  });  </script>

DIV контейнер:

<div id="inputDate8"></div>

и пример: Календарь в DIV контейнере.

Календарь jquery

www.webnotes.com.ua

Установка и подключение календаря — виджета Datepicker.

Заходим на официальный сайт jQueryUI. Чтобы ничего лишнего не качать — жмем “Deselect all components”

Снимаем выделение со всех виджетов

И выбираем “Core”:

Выбор ядра jQuery

Это сам jQuery. Дальше выбираем необходимый виджет, в нашем случае это “Datepicker”:

Выбор виджета datapicker

 

На этом в принципе все. Но у данного виджета есть предустановленные отображения (темы)
В правом верхнем углу Вы можете выбрать подходящую тему, выбрать версию виджета и нажать “Download”:

Выбор темы и версии виджета

На следующем этапе распаковываем архив.
Давайте сразу договоримся о структуре нашей страницы:

  1. Папка css — тут хранятся  стили для страницы
  2. Папка js — тут хранятся  javascript для страницы
  3. Файл index.php — файл нашей страницы

Теперь файлы jquery-1.8.0.min.js и jquery-ui-1.8.23.custom.min.js из скачанного архива помещаем в папку js.   Теперь папку с названием темы для datepicker (в моем случае это ui-lightness) из папки css скачанного архива помещаем в папку css для нашей страницы. На этом установка календаря — виджета jQuery Datepicker закончена.
Давайте приступим к подключению Datepicker. Как я уже говорил, что я хочу вызывать календарь по клику на текстовом поле. Добавим к нашему input id=”datepicker” для того, чтобы мы могли с легкостью к нему обратиться.

  <input type="text" id="datepicker" />  

Теперь напишем небольшой скрипт на jQuery, который будет вызывать календарь при клике по данному тестовому полю:

  <script type="text/javascript">          $(function(){              $("#datepicker").datepicker();         });      </script>  

Сохраняем и проверяем.

Настройка календаря — виджета на jQuery Datepicker.

Первое, что настроим это тему для нашего календаря. Ниже я приведу таблицу с названием темы для Datepicker и ее отображение:

Как видите тем достаточно, чтобы выбрать подходящую, но если по каким-либо причинам Вы не нашли такую тему, то Вы запросто можете изменить одну из стандартных путем изменения файла стилей для datepicker.
На этом настройки datepicker не заканчиваются и при вызове функции datepicker мы можем передать дополнительные параметры:

Тут я привел только основные параметры, которые могут Вам пригодиться. Если Вы хотите увидеть полный список параметров, то вперед к официальной документации
Теперь давайте остановимся на значениях, которые принимает параметр dateFormat

Вот теперь все.
Мы с Вами рассмотрели установку, подключение и настройку одного из замечательных виджетов jQuery — виджет календаря datepicker.
Надеюсь, что статья Вам понравилась. Если у Вас возникли вопросы, то пишите в комментариях.
А на этом я с Вами прощаюсь и удачной web-разработки.

web-programming.com.ua


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector