// Vue application
var app = new Vue({
el: '#app',
data: {
someValue: 123
},
});
Result (live):
value: {{ someValue | wj-format 'n2' }}
AutoComplete
The AutoComplete control is an auto-complete control that allows you to filter its
item list as you type, as well as select a value directly from its drop-down list.
To use the AutoComplete control, you must minimally set the itemsSource
property to an array of data in order to populate its item list. The AutoComplete
control also offers several other properties to alter its behavior, such as the
cssMatch property. The cssMatch property allows you to specify the CSS
class that is used to highlight parts of the content that match your search terms.
The example below uses an array of strings to populate the AutoComplete control's
item list using the itemsSource property. To see a list of suggestions, type
"ab" or "za" in the AutoComplete controls below.
// Vue application
var app = new Vue({
el: '#app',
data: {
someValue: 123,
countries: getCountries()
},
});
Result (live):
ComboBox
The ComboBox control is very similar to the AutoComplete control, but rather than
providing a list of suggestions as you type, the ComboBox will automatically complete
and select the entry as you type.
Like the AutoComplete control, you must minimally set the ComboBox's itemsSource
property to an array of data in order to populate its item list. You may also want to
specify whether the ComboBox is editable via the isEditable property. The
isEditable property determines whether or not a user can enter values that do
not appear in the ComboBox's item list.
The example below uses two ComboBoxes bound to the same data source as the AutoComplete
control above. The first ComboBox's isEditable property is set to false, while the
second ComboBox's isEditable property is set to true.
// Vue application
var app = new Vue({
el: '#app',
data: {
someValue: 123,
countries: getCountries()
},
});
Result (live):
InputDate and Calendar
The InputDate control allows you to edit and select dates via a drop-down calendar,
preventing you from entering an incorrect value. The InputDate's drop-down calendar
was developed as a separate control and can be used be used independently
from the InputDate control.
Both InputDate and Calendar specify several properties to alter the controls' behavior.
The most commonly used properties include:
value: Specifies the date value for the control.
min: Specifies the minimum date value that can be entered in the control.
max: Specifies the maximum date value that can be entered in the control.
The example below demonstrates how to use these properties.
In addition to these basic properties, the Calendar control has a formatItem event
that you can use to customize the display of specific days in the calendar. The sample
below uses this event to customize the appearance of weekends and holidays.
Similar to the InputDate control, the InputTime control allows you to modify the time portion of
a JavaScript date. The InputTime control shares many of the same properties as the InputDate control,
including format, min, max, and value. The InputTime control also offers a
step property that allows you to specify the number of minutes between entries in its drop-down
list.
The InputDateTime control combines the InputDate and InputTime controls, allowing you to set the date
and time portions of a JavaScript date. The InputDateTime control has two drop-downs: a Calendar
for picking dates, and a list for picking times.
The example below illustrates how to use the InputTime control in conjunction with the InputDate
control. Notice that these controls work together to edit the same JavaScript Date object
and only update the part of the DateTime that they are responsible for.
The example also shows an InputDateTime that updates both the date and time parts of the
JavaScript Date object.
// Vue application
var app = new Vue({
el: '#app',
data: {
theDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
minDate: new Date(today.getFullYear(), 0, 1),
maxDate: new Date(today.getFullYear(), 11, 31),
...
}
});
Result (live):
Selected Date & Time: {{ theDate | wj-format 'f' }}
InputDate and Validation
The InputDate control automatically parses dates typed in by the user using the format specified
by the format property. Invalid dates are ignored and the original value is preserved.
The InputDate control also checks the range and ensures that date values are between the values
specified by the min and max properties.
But in many cases, not all dates between the min and max properties are valid. For
example, you may be creating an appointment scheduler application and want to ensure that users
don't schedule appointments for weekends, holidays, or dates that already have a certain number
of appointments scheduled.
To handle these situations, the InputDate (and the Calendar) have an itemValidator property.
This property represents a function that takes a date as a parameter and returns true if the date
is valid for selection, or false otherwise. Invalid dates will automatically be disabled and users
will not be able to select them in the calendar or to enter them by typing.
The example below demonstrates this with an InputDate that has an itemValidator function
that returns false for weekends and US federal holidays. The example also uses an itemFormatter
function to add some special formatting and a tooltip with the name of the holidays.
// Vue application
var app = new Vue({
el: '#app',
data: {
theDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
},
methods: {
// format and validate dates
itemFormatter: function (date, element) {
var weekday = date.getDay(),
holiday = getHoliday(date);
wijmo.toggleClass(element, 'date-weekend', weekday == 0 || weekday == 6);
wijmo.toggleClass(element, 'date-holiday', holiday);
element.title = holiday;
},
itemValidator: function (date) {
switch (date.getDay()) {
case 0:
case 6:
return false; // no appointments on weekends
}
if (getHoliday(date).length > 0) {
return false; // no appointments on holidays
}
return true; // not a weekend or a holiday, this date is OK
}
}
});
Result (live):
Selected Date: {{ theDate | wj-format 'd' }}
ListBox
The ListBox control displays a list of items and allows you to select items using your
mouse and keyboard. Like the AutoComplete and ComboBox controls, you must specify the
ListBox's itemsSource property in order to use the control.
The example below allows you to select an item within the ListBox control and displays
the control's selectedIndex and selectedValue properties.
// Vue application
var app = new Vue({
el: '#app',
data: {
countries: getCountries(),
listBox: null // will receive a reference to the ListBox control
},
});
Result (live):
selectedIndex: {{ listBox.selectedIndex }}
selectedValue: {{ listBox.selectedValue }}
InputNumber
The InputNumber control allows you to edit numbers, preventing you from entering invalid
data and optionally formatting the numeric value as it is edited. The InputNumber can be
used without specifying any of its properties; however, you'll typically want to bind it
to some data using the value property.
In addition to the value property, the InputNumber control offers several other
properties that can be used to alter its behavior, such as:
min: Specifies the minimum numeric value that can be entered.
max: Specifies the maximum numeric value that can be entered.
step: Specifies the amount to add or subtract from the current
value when the spinner buttons are clicked.
format: Specifies the numeric format used to display the number being
edited. The format property uses a .NET-style
numeric format string.
The example below demonstrates how to use all of these properties.
<div class="app-input-group">
<label>Unbound with "n0" format</label>
<wj-input-number
format="n0">
</wj-input-number>
</div>
<div class="app-input-group">
<label>Bound with "n" format</label>
<wj-input-number
:value.sync="price"
format="n">
</wj-input-number>
</div>
<div class="app-input-group">
<label>Bound with min (0), max (10), step, and "c2" format</label>
<wj-input-number
:value.sync="price"
format="c2"
:step=".5"
:min="0"
:max="10">
</wj-input-number>
</div>
<div class="app-input-group">
<label>Unbound with placeholder and isRequired="false"</label>
<wj-input-number
placeholder="Enter a number..."
:is-required="false"
:value="nullVal">
</wj-input-number>
</div>
// Vue application
var app = new Vue({
el: '#app',
data: {
price: 3.5,
nullVal: null, ...
}
});
Result (live):
InputMask
The InputMask control allows you to validate and format user input as it is entered, preventing
invalid data. The InputMask control can be used without specifying any of its properties; however,
you will typically set its value and mask properties. Like the other Wijmo input
controls, the value property specifies the value for the InputMask control. The mask property
specifies the control's mask and supports a combination of the following characters:
0
Digit.
9
Digit or space.
#
Digit, sign, or space.
L
Letter.
l
Letter or space.
A
Alphanumeric.
a
Alphanumeric or space.
.
Localized decimal point.
,
Localized thousand separator.
:
Localized time separator.
/
Localized date separator.
$
Localized currency symbol.
<
Converts characters that follow to lowercase.
>
Converts characters that follow to uppercase.
|
Disables case conversion.
\
Escapes any character, turning it into a literal.
All others
Literals.
The examples below demonstrates how to use the value and mask properties with the
InputMask, InputDate, and InputTime controls.
// Vue application
var app = new Vue({
el: '#app',
data: {
theDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), 13, 30),
customMask: '',
...
}
});
Result (live):
Menu
The Menu control allows you to create a simple drop-down list with clickable items. The Menu's
items can be defined directly or by using the itemsSource property similar to the ComboBox.
To specify the text displayed on the Menu, you can set the header property.
The Menu control offers two ways to handle user selections, specifying a command on each menu item
and the itemClicked event. Unlike the itemClicked event, commands are objects that
implement two methods:
executeCommand(param): A method that executes the command.
canExecuteCommand(param): A method that returns a Boolean value specifying whether or
not the command can be executed. If the return value is false, the menu item is disabled
automatically.
In most cases, the command methods should be bound to the Vue application, so they have access
to the application state. This can be done in the application's ready hook as shown
in the example below:
// Vue application
var app = new Vue({
el: '#app',
data: {
tax: 0.08,
fileMenuOptions: [
'<i class="fa fa-file-o"></i> <b>New</b><br><small><i>create a new file</i></small>',
'<i class="fa fa-folder-open-o"></i> <b>Open</b><br><small><i>open an existing file or folder</i></small>',
'<i class="fa fa-save"></i> <b>Save</b><br><small><i>save the current file</i></small>',
'<span class="wj-separator"></span>',
'<i class="fa fa-times"></i> <b>Exit</b><br><small><i>exit the application</i></small>'
],
editMenuOptions: [
'<i class="fa fa-cut"></i> <b>Cut</b><br><small><i>move the current selection to the clipboard</i></small>',
'<i class="fa fa-copy"></i> <b>Copy</b><br><small><i>copy the current selection to the clipboard</i></small>',
'<i class="fa fa-paste"></i> <b>Paste</b><br><small><i>insert clipboard content at the cursor position</i></small>'
],
taxMenuOptions: [
{ text: '+ 25%', parm: .25 },
{ text: '+ 10%', parm: .10 },
{ text: '+ 5%', parm: .05 },
{ text: '+ 1%', parm: .01 },
{ text: '<span class="wj-separator"></span>' },
{ text: '- 1%', parm: -.01 },
{ text: '- 5%', parm: -.05 },
{ text: '- 10%', parm: -.10 },
{ text: '- 25%', parm: -.25 }
],
// tax menu command
taxMenuCommand: {
executeCommand: function (arg) {
if (wijmo.isNumber(arg)) {
this.tax += arg;
}
},
canExecuteCommand: function(arg) {
if (wijmo.isNumber(arg)) {
var val = this.tax + arg;
return val >= 0 && val <= 1;
}
return false;
}
}
},
methods: {
menuItemClicked: function (s, e) {
alert('You\'ve selected option ' + s.selectedIndex + ' from the ' + s.header + ' menu!');
}
},
created: function () {
// bind the menu commands to the app instance
var cmd = this.taxMenuCommand;
cmd.executeCommand = cmd.executeCommand.bind(this);
cmd.canExecuteCommand = cmd.canExecuteCommand.bind(this);
}
});
Result (live):
Dialogs and Popups
The Popup control can be used to display arbitrary content as dialogs
(AKA modals, centered on the screen, without an owner element),
or as popups (AKA popovers, located relative to an owner element).
