• Ion.Calendar based on powerful library to work with time - Moment.js.
• Supports all languages, date formats and parsing abilities as Moment.js.
• Calendar and datepicker in one.
• Is fully customizable via CSS.
• Calendar is flexible, can be placed in any content.
• Supports multiple working calendars at one page.
• Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
• Ion.Calendar supports touch-devices (iPhone, iPad, etc.).
• GitHub page.
• Ion.Calendar is freely distributed under terms of MIT licence.

Calendar in English. First week day - Sunday. Returns date in ISO8601 format. Years diapason: 1915-1995

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

Calendar in Russian. First week day - Monday. Returns date in format common in Russia: Day.Month.Year. Year diapason: current year -80 years.

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

Calendar in Japanese. First week day - Sunday. Return date in full local format. Years diapason: current year -20 years.

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

Datepickers. All fields have different settings, placed via data-* attributes.

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

• jQuery 1.9+
• Moment.js 2.1+

Import this libraries:

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

CSS:

• normalize.min.css - desirable if you have not yet connected one
• ion.calendar.css

Prepare base block:

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

Initialize calendar:

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

Or initialize calendar with custom settings:

$("#myCalendar-1").ionCalendar({
    lang: "ru",                     // language
    sundayFirst: false,             // first week day
    years: "80",                    // years diapason
    format: "DD.MM.YYYY",           // date format
    onClick: function(date){        // click on day returns date
        console.log(date);
    }
});

Prepare base input field:

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

Initialize datepicker:

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

«Patreon»

Bitcoin 13vdgT6EoAVupdGuLhE4ABW245NTixAj1G