Предлагаю к использованию скрипт ввода даты в выпадающем календаре. Поскольку далеко не все браузеры воспринимают конструкцию <input type="date" атрибуты> необходимость этого скрипта не вызывает сомнений. Календарь позволяет быстро выбирать как дату, так и быстро пролистывать года. Русская и английская версия.

Скачать скрипт ввода даты в выпадающем календаре

Демо скрипта

Установка скрипта simple-calendar

Качаем и распаковываем. Переносим в корень сайта папку "img", файлы tcal.css, tcal.js. Подключаем tcal.css, tcal.js.

Синтаксис вывода скрипта в вашем html коде:

<input type="text" name="date" class="tcal" value="" />

Оперируя стилями в файле tcal.css мы можем менять внешний вид календаря.

Чтобы календарь выводился на английском языке подключаем скрипт не tcal.js , а скрипт tcal_en.js

 

Комментарии   

+2 #1 Иван 08.10.2014 17:58
Большое спасибо. Для моего случая очень помогло. :roll:
Цитировать
+4 #2 Ден 04.12.2014 14:38
:D Вы смотрете переименуйте ПН ВТ неправильно он перевел. Я 5 мин понять не мог в чем дело
Цитировать
+2 #3 Михаил 13.04.2015 09:07
Спасибо! :-)
Цитировать
0 #4 Сергей 15.04.2015 17:19
Здравствуйте! Отличный скрипт!
Подскажите, как сделать, чтоб работало на странице в одной форме несколько таких полей?
Цитировать
0 #5 Алексей 12.07.2015 17:59
А как сделать, что бы с Пн начиналась неделя, а не с ВС?
Цитировать
-1 #6 Web Sputnik 19.09.2015 16:59
Цитирую Алексей:
А как сделать, что бы с Пн начиналась неделя, а не с ВС?

C понедельника же и начинается ...
Цитировать
0 #7 artsyl 15.11.2015 22:33
Класс! Только непонятно, как установить дату в календаре, если уже есть начальная дата. Сейчас в календаре текущая по-умолчанию.
Цитировать
0 #8 Полина 18.01.2016 11:53
:-) Спасибо вам за полезный скрипт!

Подскажите, пожалуйста, начинающему фронтендеру, как на js сделать, чтобы при событии клика по кнопке, очищалось поле с введённой датой в вашем скрипте =)
Цитировать
+10 #9 Nick 19.01.2016 09:47
Неправильно отображается день недели
Мне помогло:
В файле tcal.js в массиве A_TCALCONF

Поменять
'weekdays' : ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', ],
на
'weekdays' : ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],

Поменять
'weekstart' : 0,
на
'weekstart' : 1,
Цитировать
+1 #10 Serg 05.08.2016 09:12
Спасибо!
ЗЫ
Не нашел в настройках как отключить выбор устаревших дат.

вообщем изменил в скрипте строку 90
if (d_current.getM onth() != d_date.getMonth () || d_current.value Of() < d_today.valueOf ())
Цитировать
0 #11 Tab 08.09.2016 09:42
Хороший кадендарь, но на экспорере не работает. Может поможете поправить? Для меня это очень критично
Цитировать
0 #12 Web Sputnik 11.09.2016 08:50
Но ведь в ИЕ работает все.
На мобильных устройствах, кстати тоже.
Цитировать
0 #13 Web Sputnik 11.09.2016 08:54
Цитирую Serg:
Спасибо!
ЗЫ
Не нашел в настройках как отключить выбор устаревших дат.

вообщем изменил в скрипте строку 90
if (d_current.getMonth() != d_date.getMonth() || d_current.valueOf() < d_today.valueOf())

Спасибо, нужная вещь!
Цитировать
0 #14 Алекс 18.09.2016 22:55
:-* 8) Спасииибоо!!!!
Цитировать
0 #15 CanaBeasT 06.10.2016 16:41
Добрый день, а как сделать, чтобы не скрипт не в корень положить , а например в папку js? Или всю папку со стилями, картинками и js закинуть в папку js?
css я прописал, но не сам js работает. А то не хочется в корне лишнее плодить.
Спасибо.
Цитировать
0 #16 CanaBeasT 06.10.2016 18:26
Разобрался, спасибо ) дело было не в бабине. Вот еще бы формат изменить и текущую дату сделать минимально возможной..
Цитировать
0 #17 Александра 04.11.2016 11:36
Подскажите пожалуйста, установить календарь полцчилось работает отлично, но дата не правильная, как исправить?
Цитировать
-3 #18 Олег Сергеевич 09.12.2016 12:36
Цитирую Nick:
Неправильно отображается день недели Мне помогло:
В файле tcal.js в массиве A_TCALCONF
Поменять
'weekdays' : ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', ],
на
'weekdays' : ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
Поменять
'weekstart' : 0,
на
'weekstart' : 1,


ЛУЧШЕ МАССИВ 'weekdays' НЕ ТРОГАТЬ, А НАЙТИ И ИСПРАВИТЬ СТРОЧКУ 'Weekend' ВОТ ТАК:

if (d_current.getD ay() == 6 || d_current.getDa y() == 7)
a_class[a_class.length] = s_pfx + 'Weekend';
Цитировать

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


Защитный код
Обновить