Плагин формы jQuery EasyUI -Datebox: поле даты

jQuery EasyUI 插件Плагин jQuery EasyUI

Расширяет $.fn.combo.defaults. Переопределите значения по умолчанию через $.fn.datebox.defaults.

Компонент datebox объединяет редактируемое текстовое поле с выпадающей панелью календаря, из которой пользователь может выбрать дату. Строка, введённая в текстовое поле, может быть преобразована в допустимую дату. Выбранная дата также может быть преобразована в нужный формат.

Зависимости

  • combo
  • calendar

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

Создать datebox из разметки.

<input id="dd" type="text" class="easyui-datebox" required="required">

Создать datebox с помощью JavaScript.

<input id="dd" type="text">

$('#dd').datebox({
    required:true
});

Свойства

Эти свойства наследуются от combo. Ниже приведены свойства, добавленные для datebox.

Name Type Описание Значение по умолчанию
panelWidth число Ширина панели выпадающего календаря. 180
panelHeight число Высота панели выпадающего календаря. auto
currentText string Текст, отображаемый на кнопке текущего дня. Сегодня
closeText string Текст, отображаемый на кнопке закрытия. Close
okText string Текст, отображаемый на кнопке ОК. ОК
disabled логическое значение Отключить поле, если задано значение true. false
buttons array Кнопки под календарем. Это свойство доступно начиная с версии 1.3.5.
Пример кода:
var buttons = $.extend([], $.fn.datebox.defaults.buttons);
buttons.splice(1, 0, {
    text: 'MyBtn',
    handler: function(target){
        alert('click MyBtn');
    }
});
$('#dd').datebox({
    buttons: buttons
});
sharedCalendar string,selector Общий календарь, используемый несколькими компонентами datebox. Это свойство доступно начиная с версии 1.3.5.
Пример кода:
<input class="easyui-datebox" sharedCalendar="#sc">
<input class="easyui-datebox" sharedCalendar="#sc">
<div id="sc" class="easyui-calendar"></div>
null
formatter функция Функция для форматирования дат. Эта функция имеет параметр 'date' и возвращает строковое значение. Следующий пример демонстрирует, как переопределить функцию форматирования по умолчанию.
$.fn.datebox.defaults.formatter = function(date){
    var y = date.getFullYear();
    var m = date.getMonth()+1;
    var d = date.getDate();
    return m+'/'+d+'/'+y;
}
parser функция Функция для разбора строк даты. Эта функция принимает строку 'date' и возвращает значение даты. Следующий пример демонстрирует, как переопределить функцию parser по умолчанию.
$.fn.datebox.defaults.parser = function(s){
    var t = Date.parse(s);
    if (!isNaN(t)){
        return new Date(t);
    } else {
        return new Date();
    }
}

Events

Name Parameters Описание
onSelect date Срабатывает, когда пользователь выбирает дату.
Пример кода:
$('#dd').datebox({
    onSelect: function(date){
        alert(date.getFullYear()+":"+(date.getMonth()+1)+":"+date.getDate());
    }
});

Методы

Эти методы расширяют combo. Ниже приведены методы, переопределённые для datebox.

Name Parameters Описание
options none Возвращает объект options.
calendar none Получить объект календаря. Следующий пример демонстрирует, как получить объект календаря и затем снова его отрисовать.
// get the calendar object
var c = $('#dd').datebox('calendar');
// set the first day of week to monday
c.calendar({
    firstDay: 1
});
setValue value Установить значение datebox.
Пример кода:
$('#dd').datebox('setValue', '6/1/2012');    // set datebox value
var v = $('#dd').datebox('getValue');    // get datebox value
jQuery EasyUI 插件jQuery EasyUI Plugin Другие расширения