16 июля 2014

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

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

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

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

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

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

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

Спасибо, нужная вещь!
Цитировать
Алекс
0 Алекс 18.09.2016 22:55
:-* 8) Спасииибоо!!!!
Цитировать
CanaBeasT
0 CanaBeasT 06.10.2016 16:41
Добрый день, а как сделать, чтобы не скрипт не в корень положить , а например в папку js? Или всю папку со стилями, картинками и js закинуть в папку js?
css я прописал, но не сам js работает. А то не хочется в корне лишнее плодить.
Спасибо.
Цитировать
CanaBeasT
0 CanaBeasT 06.10.2016 18:26
Разобрался, спасибо ) дело было не в бабине. Вот еще бы формат изменить и текущую дату сделать минимально возможной..
Цитировать
Александра
0 Александра 04.11.2016 11:36
Подскажите пожалуйста, установить календарь полцчилось работает отлично, но дата не правильная, как исправить?
Цитировать
Олег Сергеевич
-4 Олег Сергеевич 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';
Цитировать
Алексей
0 Алексей 07.08.2018 17:47
Спасибо!
Замечательный календарь!
Цитировать
Atochcha
0 Atochcha 12.01.2019 22:58
Хорошо, что разобрались
Цитировать
Добавить комментарий





Практически весь контент размещенный на сайте, вся информация является продуктом студии WSI. Если материалы взяты с других ресурсов, то обязательно указана ссылка на эти ресурсы. Вы можете бесплатно пользоваться информацией с нашего сайта, размещать ее на своих сайтах, но так же обязательна ссылка на наш сайт, Web-Sputnik.Info.


Меню
Копирайт © 2020 'Tochcha' Все права защищены