• 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-*

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

• jQuery 1.9+
• Moment.js 2.1+

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

• 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();

«Патреон»

Bitcoin 13vdgT6EoAVupdGuLhE4ABW245NTixAj1G