Возможно вас это заинтересует
Симпатичный по стилю jQuery календарь и датапикер основанный на мощной библиотеке для работы со временем – Moment.js. Поддерживает множество языков и форматов вывода дат.
Подключение
Подключаем библиотеки: jQuery, moment.min.js, ion.calendar.min.js, moment.ru.js – для локализации на русский язык и css файл плагина ion.calendar.css
Создание календаря
Создаем базовый контейнер:
1 | <div class="myCalendar" id="myCalendar-1"></div> |
Инициализируем календарь:
1 | $("#myCalendar-1").ionCalendar(); |
ли инициализируем календарь с параметрами:
1 2 3 4 5 6 7 8 9 | $("#myCalendar-1").ionCalendar({ lang: "ru", // язык календаря sundayFirst: false, // первый день недели years: "80", // диапазон лет format: "DD.MM.YYYY", // формат возвращаемой даты onClick: function(date){ // клик по дням вернет сюда дату console.log(date); } }); |
Создание датапикера
Создаем базовое поле ввода:
1 | <input class="myInput" id="myDatePicker-1" data-lang="ru" data-years="1995-2013" data-sundayfirst="false" /> |
Инициализируем датапикер:
1 | $("#myDatePicker-1").ionDatePicker(); |
Параметры
Параметр | По умолчанию | Описание параметра |
---|---|---|
lang | “en” | Каждый дополнительный язык требует своего файла локализации |
sundayFirst | true | Необязательный параметр, позволяет выбрать первый день недели в календаре. (Например в США неделя начинается с воскресенья, в России с понедельника). Если true – то первый день будет воскресенье, если false – то понедельник. |
years | “80” | Необязательный параметр, определяет дипазон лет, которым будет оперировать календарь. Может принимать 1 или 2 значения через дефис. Значения должны быть целыми числами. Одиночное значение, например “80”, означает, что дипазон календаря: 80 лет назад – сегодняшний год. Двойное значение же, например “1900-2000” задает точный диапазон от 1900-го до 2000-го года. |
format | — | Необязательный параметр, задает формат возвращаемой даты. Основные значения: пустой – вернет дату в формате ISO8601; “moment” – вернет объект moment(); – вернет дату в выбранном формате. Например строка “DD.MM.YYYY” – вернет “15.07.2013”. |
clickable | true | Необязательный параметр, если установить false, то клики по дням больше не будут возвращать дату. |
hideArrows | false | Необязательный параметр, прячет стрелки переключения месяцев. |
startDate | — | Необязательный параметр, позволяет отметить на календаре выбранную дату (имеет смысл для датапикера). |
onClick | — | Функция возвращает выбранную дату при клике по дням. Возвращаемое значение может быть строкой или объектом moment(). |
onReady | — | Функция возвращает текущую дату при готовоности календаря. В том же формате что и onClick |
Возможно вас это заинтересует
comments powered by HyperComments