readme.ru.md

English description | Описание на русском

jQuery-календарь и датапикер, основанный на библиотеке работы со временем - Moment.js

---

• Версия: 2.0.2
• Страница проекта и демо
• Скачать ZIP-архив

Описание

• Ion.Calendar основан на мощной библиотеке для работы со временем - Moment.js.
• Поддерживает все языки, форматы дат и возможности парсинга, что и Moment.js.
• Календарь и датапикер в одном.
• Может быть полностью видоизменен через CSS.
• Календарь резиновый, может быть растянут под любой контейнер.
• Поддерживает несколько независимо работающих календарей на одной странице.
• Кроссбраузерная поддержка: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
• Плагин поддерживает устройства с touch-экраном (iPhone, iPad, etc.).
• Плагин свободно распространяется на условиях лицензии MIT.

Зависимости

• jQuery 1.9+
• Moment.js 2.1+

Подключение

Подключаем библиотеки:

• jQuery
• moment-with-locales.min.js
• ion.calendar.min.js

And CSS:

• normalize.min.css - желательно, если он у вас еще не подключен
• ion.calendar.css

Создаем базовый контейнер:

<div class="myCalendar" id="myCalendar-1"></div>

Инициализируем календарь:

$("#myCalendar-1").ionCalendar();

Или инициализируем календарь с параметрами:

$("#myCalendar-1").ionCalendar({
    lang: "ru",                     // язык календаря
    sundayFirst: false,             // первый день недели
    years: "80",                    // диапазон лет
    format: "DD.MM.YYYY",           // формат возвращаемой даты
    onClick: function(date){        // клик по дням вернет сюда дату
        console.log(date);
    }
});

Создание датапикера

Создаем базовое поле ввода:

<input class="myInput" id="myDatePicker-1" data-lang="ru" data-years="1995-2013" data-sundayfirst="false" />

Инициализируем датапикер:

$("#myDatePicker-1").ionDatePicker();

Настройки

Атрибут	По умолчанию	Описание
lang	"en"	Необязательный параметр, позволяет выбрать язык календаря. Каждый дополнительный язык требует своего файла локализации
sundayFirst	true	Необязательный параметр, позволяет выбрать первый день недели в календаре. (Например в США неделя начинается с воскресенья, в России с понедельника). Если true - то первый день будет воскресенье, если false - то понедельник.
years	"80"	Необязательный параметр, определяет дипазон лет, которым будет оперировать календарь. Может принимать 1 или 2 значения через дефис. Значения должны быть целыми числами. Одиночное значение, например "80", означает, что дипазон календаря: 80 лет назад - сегодняшний год. Двойное значение же, например "1900-2000" задает точный диапазон от 1900-го до 2000-го года.
format	—	Необязательный параметр, задает формат возвращаемой даты. Основные значения: пустой - вернет дату в формате ISO8601; "moment" - вернет объект moment(); "строка сформированная по правилам Moment.js" - вернет дату в выбранном формате. Например строка "DD.MM.YYYY" - вернет "15.07.2013".
clickable	true	Необязательный параметр, если установить false, то клики по дням больше не будут возвращать дату.
hideArrows	false	Необязательный параметр, прячет стрелки переключения месяцев.
startDate	—	Необязательный параметр, позволяет отметить на календаре выбранную дату (имеет смысл для датапикера).
onClick	—	Функция возвращает выбранную дату при клике по дням. Возвращаемое значение может быть строкой или объектом moment().
onReady	—	Функция возвращает текущую дату при готовоности календаря. В том же формате что и onClick

История обновлений

---

Поддержите разработку плагинов серии Ion:

• Пожертвовать через сервис Pledgie:

• Пожертвовать напрямую через Paypal: https://www.paypal.me/IonDen

• Пожертвовать напрямую через Яндекс.Деньги: http://yasobe.ru/na/razrabotku