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

Обратная связь и поддержка

В случае обнаружения багов или недочетов в плагинах, воспользуйтесь разделом Issues в репозитории на GitHub

Поддержать

Поддержите разработку ion.RangeSlider «Патреон»
Bitcoin 13vdgT6EoAVupdGuLhE4ABW245NTixAj1G

Реклама

Описание

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

Демо

Календарь на русском. Первый день недели - понедельник. Возвращает дату в принятом в России формате даты: День.Месяц.Год. Доступный дипазон лет: текущий год минус 80 лет.

$("#calendar-1").ionCalendar({
    lang: "ru",
    sundayFirst: false,
    years: "80",
    format: "DD.MM.YYYY",
    onClick: function(date){
        $("#result-1").html("onClick: " + date);
    }
});
...

Календарь на английском. Первый день недели - воскресенье. Возвращает дату в формате ISO8601. Доступный диапазон лет: 1915-1995

$("#calendar-2").ionCalendar({
    lang: "en",
    years: "1915-1995",
    onClick: function(date){
        $("#result-2").html("onClick: " + date);
    }
});
...

Календарь на японском. Первый день недели - воскресенье. Возвращает дату в локализованом формате. Доступный диапазон лет: текущий год минус 20 лет.

$("#calendar-3").ionCalendar({
    lang: "ja",
    years: "20",
    format: "LLLL",
    onClick: function(date){
        $("#result-3").html("onClick: " + date);
    }
});
...

Календарь на русском. Первый день недели - понедельник. Стрелочки спрятаны. Выполняет функцию при инициализации. Возвращает дату в локализованном формате. Доступный дипазон лет: текущий год минус 30 лет.

$("#calendar-4").ionCalendar({
    lang: "ru",
    sundayFirst: false,
    years: "30",
    startDate: "07.08.2009",
    format: "DD.MM.YYYY",
    hideArrows: true,
    onClick: function(date){
        $("#result-4").html("onClick: " + date);
    },
    onReady: function(date){
        $("#result-4").html("Каледарь готов");
    }
});
...

Датапикер. Все поля имеют разные языки и настройки, установленные с помощью атрибутов data-*

lang="ru"

years="50"

format="DD.MM.YYYY"

sundayfirst="true"

lang="en"

years="2015-2035"

format="YYYY-MM-DD"

lang="ja"

years="1973-2013"

format="YYYY-MM-DD"

lang="en"

years="10"

format="LL"

$(".date").each(function(){
    $(this).ionDatePicker();
});

Зависимости

Подключение

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

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

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

Скачать

Поддержать

Поделиться

comments powered by Disqus
Fork me on GitHub