Category Archives: jQuery

Комментарии VKontakte/Facebook – перехватываем и отправляем нам на почту

Добавляем виджеты комментариев VK/FB на свою страничку

Создаём приложения

Добавить комменты VK/FB на свой сайт относительно просто – создаём соотв. приложения в VK/FB, получаем их id. Вот адреса страничек для создания приложений: https://vk.com/dev/widgets_for_sites для ВК и https://developers.facebook.com/apps/ для Фэйсбук.

Подробно на этой теме останавливаться нет смысла, так как у них меняется всё очень часто, я имею в виду всякую воду и интерфейс, и каждый раз вникать в одно и тоже под другим соусом не особенно хочется. Но принцип видимо остаётся одним и тем же, и созданное нами несколько лет назад приложения продолжают работать. Честно говоря, назвать приложением это от FB/VK у меня язык с трудом поворачивается, скорее это надстройка над виджетами, контроллер виджетов точнее. Главное – они обеспечивают связь нашего сайта с многотысячной армией пользователей этих популярных сетей.
Continue reading

JavaScript: обход атрибутов элемента

Методы JavaScript DOM .getAttribute() и jquery .attr() позволяют получить только один атрибут элемента по его имени. А что делать если нам нужно обойти все заданные атрибуты элемента, чтобы, например, определить какие-то параметры, и нам не важно точное имя атрибута?

Здесь показан обход аттрибутов методом JavaScript DOM и заполнение массивов nodes и values их именами и значениями соответственно (с http://stackoverflow.com/questions/2048720/get-all-attributes-from-a-html-element-with-javascript-jquery, ответ Roland Bouman, который получил всех больше плюсов):

var nodes=[], values=[],
    el = document.getElementById('someId');
for (var attr, i = 0, attrs = el.attributes, n = attrs.length; i < n; i++){
    attr = attrs[i];
    nodes.push(attr.nodeName);
    values.push(attr.nodeValue);
}

А если мы используем jquery, можно получить атрибуты так (c http://stackoverflow.com/questions/14645806/get-all-attributes-of-an-element-using-jquery, красивый ответ pimvdb) :

$(this).each(function() {
  $.each(this.attributes, function() {
    if(this.specified) {
      // Теперь this.name - имя атрибута
      // this.value - его значение (JavaScript DOM)
    }
  });
});

Примечание: в стрых IE мы получаем все возможные атрибуты, не только те, которые представлены в элементе. Поэтому мы используем свойство specified.

Автор ответа тут же указал дополнение к jquery, добавляющее вызов метода .attr() без параметров к любому элементу, который возвращает объект со всеми атрибутами этого элемента:

(function(old) {
  $.fn.attr = function() {
    if(arguments.length === 0) {
      if(this.length === 0) {
        return null;
      }
 
      var obj = {};
      $.each(this[0].attributes, function() {
        if(this.specified) {
          obj[this.name] = this.value;
        }
      });
      return obj;
    }
 
    return old.apply(this, arguments);
  };
})($.fn.attr);
 
// Использование:
var $div = $("<div data-a='1' id='b'>");
$div.attr();  // { "data-a": "1", "id": "b" }

Красиво, да? Автору ответа – большой плюс.

Правда сам на практике я ещё не проверял эти методы (кроме первого, он прекрасно работает).

До встречи, друзья, отличного настроения, крепкого сна и чистого неба над головой!

Хачим jquery.easyBox

Представляем EasyBox

Недавно нашёл неплохой lightbox-плагин для jQuery – EasyBox (https://code.google.com/p/easybox/)

Вот его описание и главные характеристики:
EasyBox это клон lightbox’а базирующийся на скрипте Slimbox2. Он предлагает множество различных дополнений и возможностей, как то:

  • отображение видео YouTube, Vimeo и DailyMotion
  • отображение строчного контента
  • отображение iframe’ов
  • улучшенная анимация
  • поддержка тем

И ещё:
Что делает EasyBox отличным?

  • распознает пропорции и разеры видео
  • отображает сообщения об ошибке если рисунок или ссылка недоступны
  • сжимает контент до размера страницы
  • сохраняет события JavaScript на строчных элементах
  • поддерживает управление колесиком мыши
  • поддерживает слайдшоу
  • поддерживает Drag & Drop

Неплохо, да?

Подключаем EasyBox к нашему проекту

Подключаем его так (самый простой вариант):

Скачиваем его отсюда например: http://easybox.googlecode.com/files/easybox-v1.4.zip
(если вы читаете это не в 2014-начале 2015 года, возможно, появится новая версия, можно пошариться на его родном сайте, хотя я не знаю что там можно ещё улучшить).

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

В head страницы добавляем ссылки на CSS с нужной темой:

<link rel="stylesheet" href="/easybox/styles/default/easybox.min.css" type="text/css" media="screen" />

В данном случае это тема default, но можно поиграться и с другими темами.

Подключим jquery, например так:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

А затем ссылки на сам easybox, либо так:

<!-- объединенный -->
<script type="text/javascript" src="/easybox/distrib.min.js"></script>

Или три ссылки:

<script type="text/javascript" src="/easybox/easybox.min.js"></script>
<script type="text/javascript" src="/easybox/handlers.min.js"></script>
<script type="text/javascript" src="/easybox/extras/autoload.min.js"></script>

Теперь, чтобы создать ссылку на лайтбокс, помечаем её классом lightbox, например так:

<a href="images/diplom.jpg" title="Красный диплом института искусств им. П. А. Серебрякова" class="lightbox">
  <img src="images/diplom_thumb.jpg" class="white shadow" alt="Диплом">
</a>

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

Аналогично можно добавить ссылки на YouTube или iframe, так чтобы они открывались в лайтбоксе:

<a href="http://www.youtube.com/watch?v=VIDEO_ID" title="Video caption" class="lightbox">Моё видео на Ютубе!</a>
<a href="http://www.example.com" title="Example page" class="lightbox" data-width="320" data-height="240">Мой iframe в лайтбоксе!</a>

Вместо VIDEO_ID подставляем естественно ид видео на Ютубе. Для iframe мы также указали его размеры (это делать не обязательно).

Хачим EasyBox

Тут вы спросите резонно – но если этот самый EasyBox так крут, что там можно хачить?
А я так же резонно отвечу – хачить есть всегда что, идеальных продуктов наверное не бывает.

Несмотря на то, что в описании EasyBox‘а помимо всего прочего написано: EasyBox’ look is fully customizable, на самом деле это конечно не так.

Что нам нужно?

  1. Панель управления с описание и кнопкой закрытия (крестиком) вверху окна лайтбокса.
  2. Чтобы верхняя часть содержимого была на виду (если не помещается по вышине, то должна быть у границы верхнего viewport’а браузера, а не выезажть за её границу).

EasyBox раскрывает лайтбокс с содержимым, центрируя его по высоте и ширине, при необходимости его чуть ужимая – но большое содержимое всё равно может не влезть целиком в окно (viewport) браузера.

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

Что делать?
Берём девелоперскую версию easybox.js (не minified) с github’а и работаем с ней.
Версия: Easybox v1.4

Итак, для выполнения первого пункта ищем инициализацию лайтбокса, именно там должны выставляться элементы в определённом порядке.

В пределах 70-ой строки находим такой код:

/*
	Initialization
*/
$(function() {
	$(doc.body).append(
		$([
			overlay = $('<div id="easyOverlay" />').click(userClose)[0],
			center = $('<div id="easyCenter" />').append([
				container = $('<div id="easyContainer" />')[0],
				loadingIndicator = $('<div id="easyLoadingIndicator" />')[0],
				bottom = $('<div id="easyBottom" />').append([
					navLinks = $('<div id="easyNavigation" />').append([
						prevLink = $('<a id="easyPrevLink" href="#" />').click(previous)[0],
						nextLink = $('<a id="easyNextLink" href="#" />').click(next)[0]
					])[0],
					closeLink = $('<a id="easyCloseLink" href="#" />').click(userClose)[0],
					slideLink = $('<a id="easySlideLink" href="#" />').click(toggleSlide)[0],
					caption = $('<div id="easyCaption" />')[0],
					number = $('<div id="easyNumber" />')[0]
				])[0]
			])[0]
		]).css("display", "none")
	);
});

Лайтбокс состоит из 2-х основных частей – overlay, необходимого для затеменения и перекрытия главного окна браузера, и center – центральная часть лайтбокса с содержимым и панелью управления.

Блок center в свою очередь содержит три части – container – контейнер для содержимого, loadingIndicator – индикатор загрузки, прячущайси в итоге под содержимым, и bottom – так у EasyBox неприхотливо названа панель управления. Само название bottom (с англ.: низ, дно) свидетельнствует о том, что автор изначально помещает его под содержимым.

А нам надо над. И мы берем строку с container, вырезаем её и переносим под bottom, убрав после него запятую (разделяющую элементы массива). А после bottom соотв. запятую убираем, иначе JavaScript парсер будет жестко ругаться.

В итоге получаем такой код:

	/*
		Initialization
	*/
	$(function() {
		$(doc.body).append(
			$([
				overlay = $('<div id="easyOverlay" />').click(userClose)[0],
				center = $('<div id="easyCenter" />').append([
					loadingIndicator = $('<div id="easyLoadingIndicator" />')[0],
					bottom = $('<div id="easyBottom" />').append([
						navLinks = $('<div id="easyNavigation" />').append([
							prevLink = $('<a id="easyPrevLink" href="#" />').click(previous)[0],
							nextLink = $('<a id="easyNextLink" href="#" />').click(next)[0]
						])[0],
						closeLink = $('<a id="easyCloseLink" href="#" />').click(userClose)[0],
						slideLink = $('<a id="easySlideLink" href="#" />').click(toggleSlide)[0],
						caption = $('<div id="easyCaption" />')[0],
						number = $('<div id="easyNumber" />')[0]
					])[0],
					container = $('<div id="easyContainer" />')[0]
				])[0]
			]).css("display", "none")
		);
	});

Красота! Один пункт задачи мы выполинили, переходим к следующему.

Парсим глазами скрипт easybox.js далее, ищем место где лайтбокс появляется на экране (EasyBox использует шикарную анимацию).

Мы помним, что основной блок лайтбокса называется center, поэтому ищем что-то связанное с ним (я просто искал по целому слову center).

Нам надо найти изменение CSS-свойства top – ведь мы хотим разместить лайтбокс вверху окна, если он не влезает во viewport, и поэтому нам нужна вертикальная координата.

Но не находим ничего похожего по смыслу. Зато наш взгляд упирается в функцию animateCenter (начало её на строке 260). Судя по всему, эта функция как раз отвечает за анимирование и позиционирование лайтбокса в окне браузера. Наш пристальный и жесткий взгляд упирается в эту строчку:

// resize center
if ((center.offsetHeight != size[1]) || (center.offsetWidth != size[0]))
  p = {height: size[1], marginTop: -size[1]/2, width: size[0], marginLeft: -size[0]/2};

Да, именно здесь происходит позиционирование лайтбокса. Оказывается, easyBox использует не CSS-свойство top, а CSS-свойство margin-top (или marginTop в JS, что то же самое).

Значение marginTop: -size[1]/2 помещает лайтбокс в центр окна по вертикали (size[1] – размер лайтбокса по высоте).
Именно его нам надо подобратьь таким образом, чтобы лайтбокс начинался от верха окна, если он слишком высок.

Начинаем экспериментрировать. Пишем здесь marginTop: 0 и тестируем появление лайтбокса. Ууупс, он появился с верхом по центру окна. Значит, нам надо задать значение, равное половине высоты окна со знаком минус (чтобы лайтбокс ушел вверх, а не вниз от центра). В jquery высота viewport’а браузера находится простым методом $(window).height().

Значит, мы задаем значение так: marginTop: -($( window ).height() / 2)

Сохраняем скрипт, тестируем страничку – все получилось, вроде это то, что нам нужно!

Задание готово, получаем гонорар и идём спать! 🙂 Или читать интересные книги.

Да, итоговая функция animateCenter станет выглядеть так:

	function animateCenter(size, opacity, duration) {
		centerSize = size.slice();
		var p = {};
 
		// resize center и
		// подгоняем его к верхней границе browser's viewport
		if ((center.offsetHeight != size[1]) || (center.offsetWidth != size[0]))
			p = {height: size[1], marginTop: -($( window ).height() / 2), width: size[0], marginLeft: -size[0]/2};
		if (opacity > -1)
			p.opacity = opacity;
		$(center).animate(p, duration, options.resizeEasing);
	}

До встречи, друзья, вкусного чёрного чая с имбирем в сахаре!

Запуск Youtube или onclick на iframe

Цели

Сегодня встала задача – при начале воспроизведения YouTube-ролика, вставленно через iframe, запустить таймер.

Попытка №1 – videojs

Можно обернуть youtube ролик videojs и используя плагин videojs-youtube (https://github.com/eXon/videojs-youtube) наверное отлавливать событие типа onplay или как оно там называется.

Но мне это показалось геморрно, тем более на страничке с плагином videojs-youtube (по ссылке выше) написано:

Install

You can use bower (bower install videojs-youtube), npm (npm install videojs-youtube) or the source and build it using grunt. Then, the only file you need is dist/vjs.youtube.js.

Интересно, в каком мире живет автор этого плагина? Какого хера, я сижу в Windows 8.1, где мне взять этот гребанный vjs.youtube.js? Я полазил по папкам плагина здесь же, на github’е, но не нашел. Задним умом я понимаю что поиском через минуту он окажется у меня, но злость моя затмила мне разум, и я послал этот плагин далеко.

Итак, videojs при всём уважении к авторам отпадает.

Способ №2 – YouTube Player API Reference for iframe Embeds

У гугловодов есть два вида API посвященный процессингу воспроизведения роликов с Youtube.

Первый – YouTube JavaScript Player API Reference предназаначен для проигрывателей встраиваемых в страницу через object тэг (Flash Player 10.1 или более поздней версии) или через Chromeless Player.

Но этот способ мне не подходжил, так как я имел видео через iframe.

И тут же вижу прекрасную ссылку на YouTube Player API Reference for iframe Embeds и радостно потираю руки – https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

Как раз то что мне нужно, вроде бы! Беглый обзор этого API позволил создать тестовый прообраз player’а, через который можно было перехватывать событие onStateChange, чтобы в итоге перехватить событие onplay.

Но ни хера! При производстве ролика с ид M7lc1UVf-VE всё было ОК, все функции API работали как заявлено в руководстве, но стоило мне поменять ид видео на 9kyNeSNO8Ck, как событие onStateChange переставало перехватываться, о чём свидетельствовали вызовы console.log в нужных местах.

Используя Fireox Firebug панель, я увидел такую ошибку:

"NetworkError: 404 Not Found - http://www.youtube.com/get_video?noflv=1&video_id=9kyNeSNO8Ck&cpn=0OwdBht95fxY5Vtu&el=embedded&referrer&eurl=http%3A%2F%2Fgoloslogos.ru%2Fgoloslad.html&fmt=18&ptk=youtube_none"

Во время воспроизводства предыдущего ролика такой ошибки не было. Похоже, дело в ней. Но откуда она берется? Ведь всё, что я сделал, это поменял видео ид для YouTube, больше ничего!

Беглый обзор гуглопоиска показал эту проблему – https://code.google.com/p/gdata-issues/issues/detail?id=6529 – и то что она до сих пор не решена. Похоже корни этой проблемы лежат в настройках автора YouTube видео, то есть является ли он партнёром YouTube ли нет, но дальше копать не было времени и желания, какого хрена я за гугль должен решать их проблему, они мне миллиардов не платят.

Поэтому YouTube Player API – в топку!

Способ №3: iframe.onclick

И тут меня по голове тюкнуло – мне нужно перехватить только запуск видео, который происходит по щелчку в любом месте прогрывателя, спрятанного в iframe. Но проблема в том, что обычный jQuery $(window).click(function(){}) не ловит это событие внутри iframe.

Поиск показал ложное решение этой проблемы:

document.getElementById("iframe_id").contentWindow.document.body.onclick = 
function() {
  alert("iframe clicked");
}

Дело в том, что этот в принципе верный способ не работает при кросс-доменных запросах, а youtube.com и даже youtu.be никак не относятся к моему домену.

Ниже я нашел это (вольный перевод с английского):

“Можно использовать решение, основанное на событиях blur и mouseover/mouseout. Плагин господина Vince iframeTracker jQuery plugin разработан как раз для детекта кликов по iframe’ам : https://github.com/finalclap/iframeTracker-jquery”

Итак, плагин iframeTracker-jquery, очень интересно и звучит заманчиво. Я его подключил к нашему проекту, написал такой прмерно код:

jQuery(document).ready(function($){
// id моего iframe с YouTube - player
    $('#player').iframeTracker({
        blurCallback: function(){
        // здесь происходит событие клик на iframe
            startMyTimer();
        }
    });
});

И всё получилось! При клике на ролике YouTube он запускался, и также запускалась наша функция startMyTimer()!

Благодарности

Спасибо автору этого замечательного jQuery плагина, низкий ему поклон за работу.

Моя задача оказалась успешно решенной, я получил свои очередные $1100 (тысячу сто баксов) и пошёл заниматься своими делами, коих у меня невпроворот.

Чего и Вам искренне советую, дорогие друзья!

До встречи на Альбионе.

Быстрая валидация форм на javascript

Чтобы быстро валидировать форму на JavaScript достаточного такого кода:
Note: используем jquery.

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

var tryFormSubmitfunction = function ()
{
// проверяем валидность ввода данных
	var res = true,	// результат вовзрата по умолчанию
		f = this;	// контекст поиска полей в форме
	$('.req', f).removeClass('need-req');
	$('.req', f).each(function(index) {
		if(res && (
			$.trim($(this).val()) == '' || ($(this).hasClass('mail') 
&& !$(this).val().match(
/^[\+A-Za-z0-9][\+A-Za-z0-9\._-]*[\+A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/
))
		)) {
			$(this).addClass('need-req').get(0).select();
 
			setTimeout(
				function() { 
                        $('.req', f).removeClass('need-req'); },3000);
			res = false;
		}
	});
 
	return res;
}

Описание

Смысл кода такой: проверяем все поля имеющие класс req, и если оно пустое, прерываем сабмит (отправку на сервер) формы, наделяем такой элемент классом need-req и фокусируемся на нём, чтобы пользователь ввёл всё-таки какие-нибудь данные.

Кроме того, класс need-req удаляется с этого элемента через 3 секунды (см. строку с функцией setTimeout), чтобы не отвлекать внимание.

И ещё один плюсик – если элемент ввода имеет класс mail, то мы проводим доп.проверку на наличия в нём корректного адреса электронной почты (email) – см. функцию match().

То есть в нашем случае мы используем классы req и mail не для украшательств (хотя их можно и украсить), а для подсказки JavaScript-коду. Класс need-req мы используем как раз для украшательств, то есть подсказки пользователю, что этот элемент требует его внимания (см. ниже).

Использование

Используем для каждой формы примерно так:

$('form').submit(tryFormSubmit);

В самой форме для всех полей, требующих заполнения хотя бы одним символом указываем класс req, а для поля, в котром нужно иметь корректный email адрес добавляем ещё класс mail, примерно так:

          <div class="item">
            <label for="name">Ваше имя</label>
            <input class="text req" name="name" value="" />
          </div>
          <div class="item">
            <label for="surname">Ваша фамилия</label>
            <input class="text req" name="surname" value="" />
          </div>
          <div class="item">
            <label for="email">Укажите Ваш E-mail</label>
            <input class="text req mail" name="email" value="" />
          </div>
          <div class="item">
            <label for="comment">Ваши вопросы</label>
            <textarea name="comment"></textarea>
          </div>

Для поля Ваши вопросы данные не обзятельны, для всех остальных нужно ввести хотя бы один символ, а для поля email требуется валидный адрес email (см. regexp в коде функции-валидатора).

Для выделения ошибочного поля (за раз выделяется только одно поле – мы же пишем быструю простую функцию) используем класс need-req в CSS файле и опишем его к примеру так:

/* класс при выделении неверного элемента формы */
.need-req
{
	outline: double red 5px;
}

Всё, полная валидация форм готова практически за 5 минут.
Благодаря jQuery, конечно.

Всё работает и работает так как надо, так как мы хотим.

Удачи и счастья!

Календарик на Javascript (javascript calendar или datetime picker) для MySQL DATE/DATETIME полей

Собственно, озаботился темой летом, когда был нужен соответствующий простой календарик на JavaScript для редактирования полей формы в MySQL DATE/DATETIME формате.

Напомню, стандартный MySQL DATE формат это date(‘Y-m-d’) на PHP, то есть YYYY-MM-DD или ГГГГ-ММ-ДД, где ГГГГ – четыре цифры года, ММ – две цифры месяца с возможным ведущим нулём, и ДД – то же самое для дня (то есть ведущий нуль для чисел меньших 10 обязателен).

Этот формат внутри MySQL допускает разные вариации и сокращения, но меня для вставки в мою БД интересует только этот стандартный вид.

Для MySQL DATETIME к дате прибавляем ещё строку времени вида hh:mm:ss то есть час, минута, секунда также с возможными ведущими нулями.

Итак, полный MySQL DATE формат – YYYY-MM-DD

полный MySQL DATETIME формат – YYYY-MM-DD hh:mm:ss (или date(‘Y-m-d H:i:s’) в PHP)

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

Честно говоря, уже года три-четыре я пользовался календариком на JavaScript, простым и в меру удобным, скачал его ещё в то время, но этим летом он мне уже не подошёл, так как позволял вставлять только даты, без времени.

Тогда я начал поиск нового простого Javascript календаря, который кроме дат позволяет в формочку вставить так же время в нужном мне формате. Долгие часы поиска (гугления) по запросам типа ‘javascript datetime calendar‘ либо ‘javascript datetime picker‘ (picker наверное правильней, именно нам нужен именно пикер, то есть выборщик даты-времени) и близких к нему выводили меня не туда куда нужно.

Наиболее близкий вариант оказался timepicker addon к jQuery UI Datepicker (http://trentrichardson.com/examples/timepicker/), то есть демки на этой страничке соответсовали моим хотениям, но он казался слишком замороченным и там не было секунд, а секунды для нас важны как неотъемлемый элемент DATETIME формата для MySQL. Пусть даже секунды в 00 стоят, но они нам нужны!

Да, и ещё этот пикер тянет за собой библиотеку jQuery UI, чего мне не очень хотелось, хотя я сам применяю в том проекте pure jQuery. То есть в принципе мне бы подошёл такой пикер требующий pure jQuery (pure ещё одно англ.слово которое я никак не могу перевести на русский так чтобы оно мне понравилось и соответствовало бы моим ощущениям правильного использования) 🙂 *во завернул, аж самому не смешно*

Мне чего-то попроще, пошустрее и попонятней, чтобы без проблем можно было добавлять его (этот javascript’овский calendar или picker) в свои проекты.

И наконец! Как говорится – кто ищёт тот всегда найдёт – я наткнулся на это чудо –

http://www.rainforestnet.com/datetimepicker/datetimepicker.htm

Господа, это чудо-календарик! Спасибо создателю его  некоему TengYong Ng.

99,9% идеален. А чтоже 0,1%?

Конечно, он перегружен некоторыми ненужными мне фичами – например, время в AM/PM формате, зачем он мне пока не нужно в общем, хотя может и пригодится, и вызов у него не совсем подходящий – ну короче, согласитесь, всегда есть что к чему-нибудь – да ко всему можно придраться, ведь верно? Нет на этом белом свете идеалов, может есть, но мне они пока не попадались.

Я взялся за этот календарик, подкромсал его, перенастроил выборку его, то есть вызов для нужных полей, оставил только 24-вой формат без AM/PM, и получилась моя вкусняшка. 🙂 скачать – смотри далее

Для своих проектов я оставил возможность выбора календарика из таких типов –

1. Со списком месяцев-годов, если требуется вводить далёкие от сегодняшнего времени даты, дни рождения например, потому что тридцать-сорок раз кликать по стрелочке “год назад” не очень приятно, верно?

2. С выбором времени (часы-минуты-секунды) и без оного.

3. Стрелочки – только текстовые, то есть для работы этого календаря вообще не требуется больше ничего, только небольшой сравнительно js-файлик.

4. Переписал названия месяцев и дней недели на русском языке.

И он был написан на pure JavaScript то есть не тянул за собой никаких либов, что очень приятно, но я по мере упрощения чуть-чуть добавил jQuery, не везде конечно, только там где я что-то подкромсал, поэтому сейчас для его работы требуется jQuery, но по идее я могу его переписать убрав необходимость тянуть за ним jQuery -там по-моему я только в самом конце в перехватичике нажатий клавиш – чтобы сркыть picker если он был – применил обёртку jQuery, ибо она сокращает код в несколько раз и не требует детальных знаний javascript, которых у меня конечно нет.

Правда, этот скрипт нуждается в тотальной переработке – ибо использует глобальные переменные, а не скрывает всё в теле своего объекта, как это в принципе наверное должны делать все достойные javascript либы.

Поэтому я его перепишу наверное в ближайшее время и выложу где-нибудь на sourceforge, наверное, надо будет сделать поддержку нескольких языков (хотя бы en,ru,fr,de,esp,ita,port,swe,dutch,polska,chi-tr,chi-упрощённый,jap,kor,arabic,ukr,bel,kaz,tur и другие, даже не знаю, какие ещё языки есть?)

А пока на русском языке можно скачать его здесь – скачать easy js datetime picker для MySQL DATE/DATETIME полей

Замечу ещё раз – этот скрипт с русскими названиями дней недели и месяцев, в кодировке ANSI (Windows-1251), Linux EOL формате, и для перехвата события глобального щелчка мыши в области окна странички с календариком использует jQuery (наверно любая версия jQuery подойдёт, вплоть от 1.4, ранние есть вообще сейчас не знаю).

Формат применения –

NewCssCal(elementDOM, pShowTime, pScroller)

elementDOM – JavaScript элемент DOM. Имеет смысл наверное только для <input type=”text”>, ибо сюда вставляется выбранная дата и время (если есть), а также отсюда считывается текущие значения даты/времени для показа в календарике. REQUIRED!

pShowTime – BOOL будем ли вводить+показывать время (default – true)

pScroller – string (DROPDOWN или ARROW) если DROPDOWN, то будем использовать списки выбора для годов и месяцев (default – ARROW)

Пример: используя jQuery, подключим календарики ко всем полям ввода имеющим класс card-dtm с парой особенностей – если поле имеет id dk-dtbirth, то подключим календарик со списком выбора лет и месяцев, если длина значений поля более 10, то подключаем календарик с возможностью выбора также и времени.

Для нашего примера поля по-идее должны быть уже заполнены значениями из MySQL таблицы и быть вида 0000-00-00 00:00:00 для DATETIME полей и вида 0000-00-00 для простых DATE полей (естественно это применимо только к нашему примеру):

// подключаем календарики для полей дат (используем обертки jQuery)
$('.card-dtm').each(function(){
  if(this.id=='dk-dtbirth')
    // для Дней  Рождений
    $(this).click(function(e){NewCssCal(e.target,false,'DROPDOWN');});
  else if($(this).val().length > 10)
    // по умолчанию со временем
    $(this).click(function(e){NewCssCal(e.target);});
  else
    // только даты
    $(this).click(function(e){NewCssCal(e.target,false);});
});

Скриншоты 3-х различных возможных состояний easy js datetime picker – (то есть простого в применении js выборки времени-даты для форматов MySQL DATE/DATETIME)

jsdatetimepicker-vid1

Обычный (полный) вид с возможностью выбрать время вплоть до секунды!

jsdatetimepicker-vid2

Стандратный вид выборки даты

jsdatetimepicker-vid3

Вид с pScroller==’DROPDOWN’, позволяет быстро выбрать практически любой год и месяц из списка (диапазон лет задаётся внутри скрипта календарика)

Да, и как я уже писал, я хочу этот скрипт тотально переработать, написать 2 версии – с поддержкой jQuery и на pure JavaScript, сделать всё грамотно, чтобы не знагрязнять глобальное пространство имён, возможно вернуть PM/AM.

Для версии под jQuery наверное будет иметь смысл применить его как часть jQuery.fn для подключения к обернутым наборам, создаваемыми этой прекрасной либой (либа пишется и звучит короче чем библиотека, не правда ли, простите мне этот очередной американизм – может лучше писать его латиницей, то есть так – lib?)

Что ещё надо для счастья? Стакан хорошего чая с 2-мя ложками сахара без верха, и пирожное трубочка с кремом, или на худой конец, луговое.

Удачной охоты!