Возможно вас это заинтересует
Симпатичный по стилю 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”Каждый дополнительный язык требует своего файла локализации
sundayFirsttrueНеобязательный параметр, позволяет выбрать первый день недели в календаре. (Например в США неделя начинается с воскресенья, в России с понедельника). Если true – то первый день будет воскресенье, если false – то понедельник.
years“80”Необязательный параметр, определяет дипазон лет, которым будет оперировать календарь. Может принимать 1 или 2 значения через дефис. Значения должны быть целыми числами. Одиночное значение, например “80”, означает, что дипазон календаря: 80 лет назад – сегодняшний год. Двойное значение же, например “1900-2000” задает точный диапазон от 1900-го до 2000-го года.
format—Необязательный параметр, задает формат возвращаемой даты. Основные значения: пустой – вернет дату в формате ISO8601; “moment” – вернет объект moment(); – вернет дату в выбранном формате. Например строка “DD.MM.YYYY” – вернет “15.07.2013”.
clickabletrueНеобязательный параметр, если установить false, то клики по дням больше не будут возвращать дату.
hideArrowsfalseНеобязательный параметр, прячет стрелки переключения месяцев.
startDate—Необязательный параметр, позволяет отметить на календаре выбранную дату (имеет смысл для датапикера).
onClick—Функция возвращает выбранную дату при клике по дням. Возвращаемое значение может быть строкой или объектом moment().
onReady—Функция возвращает текущую дату при готовоности календаря. В том же формате что и onClick

Возможно вас это заинтересует
comments powered by HyperComments