Компонент календаря на JavaScript
Чуть более двух лет назад мне понадобилось написать компонент календаря и прикрутить его к своей CMS. От идеи использования динамического календаря на PHP я сразу отказался. Поскольку нужен был календарь для вставки даты в поля формы. Первое, что я сделал, начал искать готовые решения. Естественно было и много и красивых. Но, как известно, есть пословица “Свой хлеб вкуснее”. И тут мне пришла идея о создании своего календаря. И написать его хотелось только с использованием DOM. В итоге получился календарик, не зависящий от браузеров и разный Фреймворков. Вот собственно который, я и выкладываю для использования.
Все настройки по стилям соответственно находятся в файле calendar.css. Сам скрипт в файле calendar.js.
Для использования компонента, добавляем в HTML код следующее:
- Подключаем файл со стилями – <link href=“calendar.css” rel=“stylesheet” type=“text/css” />;
- Далее подключаем файл со скриптом календаря – <script type=“text/javascript” src=“calendar.js”></script>;
- Затем вставляем в уже предполагаемую ранее созданную форму, поле для даты и объявляем в нем необходимые атрибуты – <input type=“text” name=“date” readonly=“readonly” onclick=“showcalendar(this)”/>.
При клике по полю input у вас должен открыться календарь, чтобы его закрыть еще раз кликните по полю input или выберите дату.
Для изменения разделителя даты, открываем файл calendar.js и ищем функцию showcalendar. В этой функции находим строку var ar = input.value.split(‘.’) и вместо точки прописываем свой разделитель. Для изменения формата даты, открываем все тот же файл calendar.js и ищем функцию generateCalendar. В этой функции находим строку input.value = d + ‘.’ + m + ‘.’ + date.getFullYear(). И изменяем формат вывода по своему требованию. Правда еще тогда придется изменить порядок следования параметров в строке date = new Date (ar[2], ar[1] — 1, ar[0]). Первым параметром должен быть год, вторым – месяц и третий параметр это число дня недели. В JavaScript месяца идут с 0 до 11, поэтому от номера месяца необходимо отнять единицу. Скачать компонент календаря можно здесь.
15.02.2019 @ 2:48 пп
Доброго дня, Авторы классного календаря!
Вы молодцы!
Скажите, пожалуйста, можно ли как-нибудь сделать запрет на выбор уже прошедшей даты?
Если да, то подскажите, пожалуйста, как.
С уважением,
Дмитрий
15.02.2019 @ 3:52 пп
Доброго дня, Авторы классного календаря!
Возможно ли сделать закрытие выбора даты из календаря при клике куда угодно, а не только по дате или по полю выбора календаря?
С уважением,
Дмитрий
15.02.2019 @ 7:53 пп
Добрый вечер!
Да, вы можете доработать как вам необходимо.
16.02.2019 @ 6:37 дп
Доброго утра, Admin!
Скажите, пожалуйста:
1. как сделать запрет на выбор уже прошедшей даты?
2. как сделать закрытие выбора даты при нажатии клавиши мыши куда угодно на экране?
С уважением,
Дмитрий
18.02.2019 @ 12:30 пп
1. как сделать запрет на выбор уже прошедшей даты?
—
Смотрите исходник и переписывайте нужно
2. как сделать закрытие выбора даты при нажатии клавиши мыши куда угодно на экране?
—
Имеется форма авторизации с id «logform» в некой CMS
при клике на область вне формы она скрывается
вот образец кода:
var logopened=false; $(document).click(function(e){ if(!logopened) return; e=e||window.event; var target=e.target||e.srcElement; while(target) { if(target==$('#logform').get(0)) return; target=target.parentNode; } $('#logform').hide('fast'); logopened=false; });тоже самое можете сделать для календаря.