ui.daterangepicker

Элемент управления, который позволяет пользователю выбрать диапазон дат.

Daterangepicker - это текстовое поле с выпадающими календарями для выбора временных интервалов. Daterangepicker поддерживает все форматы даты и времени. Пользователи смогут выбирать интервалы с точностью до часов и минут. Подробнее читайте в описательной документации DateRangePicker).

Инициализация

var daterangepicker = webix.ui({
    view:"daterangepicker",
    name:"default", 
    width:500, 
    label:"Default",
    value:{start: new Date(), end: webix.Date.add(new Date(), 1, "month")}
});

С чего начать

Methods
adjust подстраивает размеры компонента под размеры HTML-контейнера
attachEvent задает обработчик внутреннего события компонента
bind связывает данные компонентов
blockEvent временно блокирует вызов ВСЕХ событий вызывающего объекта
blur убирает фокус с контрола
callEvent вызывает внутреннее событие компонента
define переопределяет одну или несколько настроек компонента
destructor разрушает компонент
detachEvent удаляет обработчик события (который был задан ранее методом attachEvent)
disable блокирует компонент (он становится серым, клики по нему не срабатывают)
enable делает активным ранее заблокированный компонент
focus устанавливает фокус на контрол
getChildViews возвращает внутренние компоненты
getFormView возвращает объект формы, которой принадлежит компонент
getInputNode возвращает HTML элемент компонента
getNode возвращает HTML-элемент компонента
getParentView возвращает родительский компонент
getPopup возвращает всплывающее окно с календарем
getText возвращает текст из поля ввода
getTopParentView возвращает самого верхнего родителя
getValue возвращает текущее значение контрола
hasEvent проверяет, есть ли у компонента обработчики указанного события
hide скрывает компонент
isEnabled проверяет, активен или заблокирован компонент
isVisible проверяет, виден ли компонент
mapEvent направляет события от одного компонента к другому
queryView возвращает внутренние компоненты, которые удовлетворяют указанному условию
refresh перерисовывает компонент
render отрисовывает на экране компонент или его элемент
resize перерисовывает компонент после изменения размеров
setBottomText задает ярлык под контролом
setValue задает новое значение для компонента
setValueHere устанавливает новое значение для компонента
show делает компонент видимым
sync позволяет синхронизировать данные двух DataCollection (полностью или с фильтрацией)
unbind отменяет связывание компонентов
unblockEvent отменяет блокировку событий, которая была вызвана командой 'blockEvent'
validate проверяет значение в поле ввода
Events
onAfterRender выполняется сразу после рендеринга компонента
onAfterScroll срабатывает после прокрутки содержимого компонента webix
onBeforeRender происходит непосредственно перед отрисовкой компонента
onBindRequest срабатывает, когда компонент готов получить данные из главного компонента
onBlur срабатывает при смещении фокуса за пределы компонента
onChange срабатывает при изменении значения контрола
onDestruct происходит, когда компонент был разрушен деструктором
onEnter срабатывает после нажатия клавиши Enter
onFocus срабатывает после смещения фокуса на компонент
onItemClick срабатывает после клика на контрол
onKeyPress срабатывает после того, как пользователь нажал клавишу (для компонента, на котором сейчас фокус)
onLongTouch срабатывает после того, как пользователь на достаточно долгое время задержит палец на экране (для устройств с сенсорным экраном)
onSwipeX срабатывает по горизонтальному свайпу
onSwipeY срабатывает по вертикальному свайпу
onTimedKeyPress срабатывает через некоторое время после нажатия клавиши в текстовом поле
onTouchEnd срабатывает после завершения события touch
onTouchMove срабатывает по время движения пальца по сенсорному экрану
onTouchStart срабатывает после touch-события в компоненте webix
onViewResize срабатывает после того, как пользователь изменил размер компонента с помощью компонента resizer
onViewShow срабатывает, когда компонент появляется (вызов метода show())
Properties
align выравнивание контрола внутри родительского контейнера
animate определяет анимацию для показа компонента в Multiview
attributes задает объект с атрибутами для инпута HTML внутри компонента Webix
borderless скрывает или показывает границы компонента
bottomLabel задает ярлык под элементом управления
bottomPadding задает отступ под полем ввода в компоненте
click обработчик щелчка кнопкой мыши
container HTML-контейнер (или его ID), внутри которого компонент должен быть инициализирован
css имя CSS-класса, который будет присвоен HTML-элементу компонента, или объект со стилями
disabled блокирует или разблокирует компонент
editable позволяет вводить символы в поле datepicker
format формат для отображения чисел в текстовом поле
gravity задает удельный (относительный) размер компонента
height задает высоту компонента
hidden скрывает компонент после его инициализации
hotkey задает горячую клавишу, которая вызывает нажатие кнопки
icon задает иконку для контрола
icons отображает иконки "Сегодня" и "Очистить" для calendar и datepicker
id ID компонента
inputAlign выравнивает поле для ввода внутри его контейнера
inputHeight высота текстового поля или кнопки
inputWidth ширина текстового поля или кнопки
invalid указывает, является ли текст в поле действительным/недействительным после валидации
invalidMessage задает текст сообщения об ошибке при валидации
keyPressTimeout задержка между нажатием клавиши и обработчиком
label задает текст ярлыка
labelAlign выравнивание ярлыка внутри его контейнера
labelPosition определяет расположение ярлыка по отношению к контролу
labelWidth ширина ярлыка
maxHeight задает максимальную высоту компонента
maxWidth задает максимальную ширину компонента
minHeight задает минимальную высоту компонента
minWidth задает минимальную ширину компонента
name имя контрола (нужно для Form и Toolbar)
on позволяет присоединять обработчики к внутренним событиям компонента
pattern маска форматирования, применяемая к текстовому вводу
placeholder текст плейсхолдера для текстового поля
point включает/отключает стрелку для окна datepicker
popup позволяет задать всплывающее меню для кнопки
readonly делает поле нередактируемым
relatedAction действие, которое должно выполниться после изменения значения контрола
relatedView ID компонента, на который будет влиять операция relatedAction
required помечает поле как обязательное
separator разделитель для отделения нескольких дат в datepicker
stringResult если для параметра задано значение true, метод getValue возвращает значение в виде строки (в противном случае - в виде объекта)
suggest соединяет список предложений с инпутом
timeIcon задает иконку для timepicker
timepicker включает timepicker в календаре
tooltip задает тултип, который появится при наведении курсора на элемент
validate задает правило для валидации поля
validateEvent задает событие, по которому происходит валидация значения в компоненте
value задает начальное значение для контрола
width задает ширину компонента
Other
$allowsClear флаг, который определяет, можно ли очистить поле ввода
$compareValue сравнивает предыдущее значение контрола с тем, которое будет задано
$cssName имя компонента, CSS которого вы хотите унаследовать для пользовательского компонента
$getSize возвращает текущий размер компонентов
$getValue вызывается каждый раз, когда компонент должен вернуть значение из своего html инпута
$height текущая высота компонента
$prepareValue определяет формат для значений, которые задаются контролу
$render код, вызываемый после отрисовки контрола
$renderIcon отображает иконку для элемента управления
$renderInput вызывается каждый раз, когда компонент должен отрисовывать свой инпут
$renderLabel формирует html для ярлыка компонента
$scope область имен для событий и методов
$setNode определяет HTML-элемент компонента
$setSize задает размеры компонента
$setValue вызывается каждый раз, когда компонент получает значение
$skin вызывается после применения скина
$tooltipIn показывает тултип
$tooltipMove определяет поведение тултипа в момент, когда курсор перемещается над компонентом или HTML-областью
$tooltipOut определяет поведение тултипа в момент, когда курсор выходит за пределы компонента или HTML-области
$view возвращает HTML-элемент компонента
$width текущая ширина компонента
config все настройки, заданные при инициализации компонента
name возвращает имя компонента (свойство только для чтения)
on_click задает обработчик кликов для элемента по имени его CSS класса
touchable флаг, благодаря которому компонент реагирует на касания на устройствах с сенсорным экраном
Наверх