date-picker

Один очень простой плагин для выбора даты.

Эффект изображения

Пример

1. Просмотрите папку проекта demo.
2. jsfiddle пример.

Использование

Импорт CSS

<!-- 注意: 请替换为自己的文件路径 -->
<link rel="stylesheet" href="../css/date-picker.css" type="text/css" charset="utf-8" />

Импорт JavaScript

<!-- 注意: 请替换为自己的文件路径 -->
<script src="../bower_components/jquery/dist/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="../src/date_picker.js" type="text/javascript" charset="utf-8"></script>

Вызов

$("#date_picker").datepicker();

Конфигурация

dateFormat

Тип: String

Значение по умолчанию: "yyyy/MM/dd"

Формат времени в поле ввода.

Пример:

$("#date_picker").datepicker({
    dateFormat: "yyyy-MM-dd"
});

monthFormat

Тип: String

Значение по умолчанию: "yyyy/MM"

Формат отображения даты в заголовке элемента управления временем.

Пример:

$("#date_picker").datepicker({
    monthFormat: "yyyy-MM"
});

previousMonthIcon

Тип: String

Значение по умолчанию: «Изображение Base64»

Адрес изображения стрелки влево в заголовке элемента управления.

Пример:

$("#date_picker").datepicker({
    previousMonthIcon: "./images/left_icon.png"
});

nextMonthIcon

Тип: String

Значение по умолчанию: «Изображение Base64»

Адрес изображения стрелки вправо в заголовке элемента управления.

Пример:

$("#date_picker").datepicker({
    nextMonthIcon: "./images/right_icon.png"
});

position

Тип: Object

По умолчанию нет

Положение элемента управления при абсолютном позиционировании относительно body, игнорирует значение defaultRelativePosition.

Пример:

$("#date_picker").datepicker({
    position: {
        left: "100px",
        top: "200px"
    }
});

defaultRelativePosition

Тип: Object

Значение по умолчанию: {left: 0, top: 10}

Смещение элемента управления относительно целевого элемента при абсолютном позиционировании.

Пример:

$("#date_picker").datepicker({
    defaultRelativePosition: {
        left: 10,
        top: 20
    }
});

selectDate

Тип: Function

Значение по умолчанию: $.noop

Параметры:

1. currentDate — выбранная дата.
2. previousDate — предыдущая дата.

Функция обратного вызова после нажатия на дату.

Пример:

$("#date_picker").datepicker({
    selectDate: function() {
        console.log("selectDate");
    }
});

selectOldDate

Тип: Function

Значение по умолчанию: function() { return true; }

Параметры такие же, как у selectDate.

Когда установлена начальная дата, функция обратного вызова перед нажатием на дату раньше начальной даты. Будет вызвана перед selectDate, если возвращает false, то выбор даты не обновит элемент управления, если возвращает true, то обновит.

Пример:

$("#date_picker").datepicker({
    selectOldDate: function() {
        console.log("selectOldDate");
        return true;
    }
});

changeMonth

Тип: Function

Значение по умолчанию: $.noop

Параметры:

1. currentDate — изменённая дата.
2. event — объект события.
3. operate — действие клика, значение «предыдущий месяц» или «следующий месяц».

Функция обратного вызова при нажатии на стрелку для переключения месяца.

Пример:

$("#date_picker").datepicker({
    changeMonth: function() {
        console.log("changeMonth");
    }
});

beforeShow

Тип: Function

Значение по умолчанию: $.noop

Параметр: нет.

Функция обратного вызова перед отображением элемента управления датой.

Пример:

$("#date_picker").datepicker({
    beforeShow: function() {
        console.log("beforeShow");
    }
});

afterShow

Тип: Function

Значение по умолчанию: $.noop

Параметр: нет.

Функция обратного вызова после отображения элемента управления датой.

Пример:

$("#date_picker").datepicker({
    afterShow: function() {
        console.log("afterShow");
    }
});

beforeHide

Тип: Function

Значение по умолчанию: $.noop

Параметр: нет.

Функция обратного вызова перед скрытием элемента управления датой.

Пример:

$("#date_picker").datepicker({
    beforeHide: function() {
        console.log("beforeHide");
    }
});

afterHide

Тип: Function

Значение по умолчанию: $.noop

Параметр: нет.

Функция обратного вызова после скрытия элемента управления датой.

Пример:

$("#date_picker").datepicker({
    afterHide: function() {
        console.log("afterHide");
    }
});

Компиляция и тестирование

Настройка среды

• Установите grunt и bower.
• Клонируйте проект.
• Загрузите зависимости.

Компиляция

grunt.

Запуск теста

grunt test.