Трохи більше двох років тому мені знадобилося написати компонент календаря та прикрутити його до своєї 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, тому від номера місяця необхідно відняти одиницю. Завантажити компонент календаря можна тут .