ui.daterange
Since 4.0
A set of calendars that lets a user to select a date range and switch between months and years.
DateRange is highly customizable. It supports all date and time formats and is used for selecting dates and times in several calendars at once.
Check DateRange documentation for a more detailed description.
Constructor
var daterange = webix.ui({
view:"daterange",
calendarCount:4,
timepicker:true,
value:{
start: new Date(),
end: webix.Date.add(new Date(), 2, "month")
}
});
Where to start
Methods
addToRange | adds a date into the existing range |
adjust | adjusts the component to the size of the parent HTML container |
attachEvent | attaches the handler to an inner event of the component |
bind | binds components |
blockEvent | temporarily blocks triggering of ALL events of the calling object |
callEvent | calls an inner event |
define | redefines a single configuration property (or a object with properties) |
destructor | destructs the calling object |
detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
disable | disables the calling view (makes it dimmed and unclickable) |
enable | enables the calling view that was disabled by the 'disable' method |
getChildViews | returns child views of the calling component |
getFormView | returns master form for the input |
getNode | returns the main HTML container for the calling object |
getParentView | returns the parent view of the component |
getTopParentView | returns the top parent view |
getValue | returns the current value of the DateRange |
hasEvent | checks whether the component has the specified event handler |
hide | hides the view |
isEnabled | checks whether the view is enabled |
isVisible | checks whether the view is visible |
mapEvent | routes events from one object to another |
queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
refresh | redraws the DateRange value |
resize | adjusts the view to a new size |
setValue | sets a new date range |
show | makes the component visible |
unbind | breaks "bind" link |
unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
Events
onAfterDateSelect | fires after a user has selected a date in the DateRange |
onBeforeDateSelect | fires before a user selects date in the DateRange |
onBindRequest | fires when the component is ready to receive data from the master component |
onChange | fires when a user changes month, year or time in selector |
onDateClear | fires on clicking the 'Clear' button |
onDestruct | occurs when component destroyed |
onTodaySet | fires on clicking the 'Today' button |
onViewShow | fires when any hidden view is shown |
Properties
animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
borderless | used to hide the component borders |
button | sets a button at the bottom of DateRange |
calendar | defines the configuration for all calendars in the widget |
calendarCount | sets the number of calendars to be rendered in the DateRange view |
calendarHeight | sets the height of each calendar in the DateRange view in pixels |
container | an HTML container (or its ID) where the component should be initialized |
css | the name of the CSS class or the object with styles that will be applied to the view container |
disabled | indicates whether an item is enabled |
gravity | sets the view gravity |
height | sets the height of the component |
hidden | defines whether the view will be hidden initially |
icons | sets the visibility of 'Today/Clear' icons in the DateRange |
id | the ID of a widget |
maxHeight | sets the maximum height for the view |
maxWidth | sets the maximum width for the view |
minHeight | sets the minimal height for the view |
minWidth | sets the minimal width for the view |
on | allows attaching custom handlers to inner events of the component |
padding | defines the space between the element borders and content (applies the specified value to all sides). |
paddingX | sets the right and left padding (applies the specified value to both sides) |
paddingY | sets the top and bottom padding (applies the specified value to both sides) |
timepicker | enables clock displaying for time selection |
type | defines the layout borders |
value | sets the initially selected date range |
width | sets the width of a widget |
Other
$getSize | returns the current size of the component |
$height | the current height of the view |
$prepareValue | adjusts the value that is going to be set to the format expected by the control |
$setNode | defines HTML element for the component |
$setSize | sets the component size |
$skin | the method which will be called when skin is defined |
$view | reference to the top HTML element of the view |
$width | the current width of the view |
config | all options from the initial component configuration |
name | indicates the name of the component (a read-only property) |
Back to top