Календарь на Javascript
Третья дополненная версия скрипта календаря
Вторая дополненная версия скрипта календаря
Для просмотра статистики появилась необходимость удобного ввода ближайших дат, но, как оказалось, простейший, казалось бы, календарь на javascript очень сложно найти. Во-первых: то что легко отыщется в гугле, оказывается либо очень большим по размеру: 50-60 Kb для страницы, которая имеет размер в 5-10 Kb показалось слишком много. Во-вторых нужные скрипты платные, что тоже меня не устраивает, т.к. скрипт в дальнейшем будет распространяться и платные части в нем никому не нужны.
Но выход нашелся. На сайте calendar.swazz.org (автор Oliver Bryant) обнаружился очень приятный, простой, при этом маленького размера, скрипт календаря. Однако, тоже не без нареканий. Первое, что не понравилось, это наличие в комплекте с файлом calendar.js двух картинок, что чаще всего оказывается лишним. Второе, то что просто шокировало - невозможность ввода дат ранее сегодняшних, при этом в примере автора указывается “Date of birth”, как человек может вводить дату рождения при этом не использую чисел раньше сегодняшнего мне так и осталось непонятным.
Поэтому пришлось видоизменить скрипт календаря. В новом скрипте следующие отличия:
- возможность задавать даты без ограничений;
- выделение цветом сегодняшнего дня (используется время пользователя);
- добавлена кнопка выбора текущей даты;
- изменен формат получаемой даты, теперь используются ведущие нули;
- отказ от использования изображений для кнопок смены месяцев;
- изменены цвета на более веселенькие, т.к. в оригинале было слишком мрачно;
- перевод на русский (cp1251);
- теперь скрипт имеет две версии: в русской неделя начинается с понедельника, в английской - с воскресения.
Подключается скрипт очень просто. При этом календарь может подключатся к неограниченному количеству полей ввода. В файле примера видно, как использовать скрипт.
Возможно не совсем удобен выбор года, т.к. календарь предназначался в первую очередь для использования в статистике, и поэтому чтобы выбрать дату рождений придется “промотать” все месяца каждого года. От использования отдельных стрелок для годов тоже было решено отказаться, т.к. нажимать 30-40 раз тоже затруднительно, при этом простота и очевидность пострадают. Возможно, в будущем скрипт дополнится всплывающим списком годов, для более легкого выбора.
Огромное спасибо за исправленный скрипт!!! Вчера целый день пыталась довести оригинал до ума, но с ошибкой “старых” дат так и не смогла справиться. А сегодня утром нашла Ваш сайт и скачала исправленную версию. Огромнейшее спасибо!!!!
Большое спасибо
Таки работает! :)
Благодарю за прекрасный скрипт. Искал такой почти два дня. Только вот не очень удобно нужный год выбирать. Подскажите пожалуйста, как исправить выбор месяца и года на ниспадающий список…
Айнур, я думаю что “исправить” не получится, потому что исправлять нечего, такая функция не предусмотрена.
Спасибо за ответ. Я просто в JS не разбираюсь, но очень хотелось бы сделать списком, поэтому мне интересно было узнать куда и что дописывать.
Айнур, если я добавлю такую возможность, то напишу тут комментарий и он придет на мыло.
Спасибо за сэкономленное время на разработку скрипта!
Одно небольшое пожелание - в глабальных переменных скрипта (гденить в начале) предусмотреть изменение формата даты, чтобы не приходилось в коде скрипта отлавливать и заменять формат ДД-ММ-ГГГГ к примеру на ДД.ММ.ГГГГ
Денис, я сильно не приглядывался, и не автор скрипта, я его только переработал немного, но в самом низу, самая последняя строчка самой последней функции как раз выводит дату, и разделители можно прописать какие угодно.
Если же нужно, чтобы скрипт определял дату, которая уже есть, то действительно, еще в одном месте нужно добавить разделитель. Это действительно требует доделки, но ведет к некоторому увеличению объема, а я искал самый маленький скрипт (кстати, тут тоже есть что подсократить).
gene, я и самнашел где и что исправить (в 2х местах: внизу и в lcs(ielem) там где split(’-'))
PS В процессе прикручивания к сайту еще 2 пожелания очень нужных:
1) Подсвечивание стартовой даты, которая была введена на момент вызова календаря по аналогии с сегодняшней датой
2) Возможность вызова внешних обработчиков, например когда нужно вызвать form.submit() или еще что.
Денис, вы попробуйте сами доработать :) я с удовольствием добавлю этот функционал в скрипт на благо общества. Для меня только совсем не очевидно как подсветкой обозначать текущую и выбранную даты, нужно будет делать какие-то пояснения наверное.
А по поводу второго пункта я вообще не понял :)
1) текущая дата уже и так подсвечивается (строка 198 в calendar_ru.js), вот редактируемая (та которая уже была в поле даты формы на момент вызова календаря) еще нет.
2) Речь про то, что в момент когда пользователь кликает в календаре по нужной ему дате cs_click(e) предусмотреть возможность вызова функции из внешнего скрипта или form.submit() для отправки данных формы сразу после выбора даты в календаре. Детали сам еще не продумал КАК это сделать.
PS Разумеется если сия доработка весьма сложна - придется покопаться самому, но как я уже писал в 1 сообщении “Спасибо за сэкономленное время на разработку” ибо в чужом коде всегда дольше разбираться чем в своем. Вот я и подумал, что у автора это получится значительно быстрее.
моя доработка по п.1:
В prepcalendar() после подсветки сегодняшней даты (if today)
добавить (со строки 200):
// if default
if (hd == (d-cd))
getObj(’v'+parseInt(d)).style.color=’#0000FF’;
Цвет как говорится по вкусу ;)
Денис, я выслал вам мой вариант, там получилось чуть сложней. Скрипт, к сожалению не мой, автор Oliver Bryant.
Ваш вариант похоже не будет работать, если выбрана дата вне текущего месяца, т.к. при уменьшении/увеличении месяца ( функции caddm() и csubm() ) в prepcalendar не передается hd
Странно, я проверил с датой не из текущего месяца (например 11.10.2009) - тогда и календарь открывается на октябрь 2009 сразу и подсветка сработала, если же hd==” то подсветка и не нужна…, проблема только при прокрутке месяца туда-сюда возникает, но я пока так не заморачивался)
PS За скрипт спасибо, посмотрю что и как.
Денис, все верно, календарь действительно открывается на нужном месяце, а при прокрутке месяцев prepcalendar() не отображает выбранной даты. Поэтому необходимо было ввести дополнительные переменные.