CodeAPI

DatePicker

A DatePicker is used for entering dates. It lets users populate a date field by picking a date using a calendar popup.

Table of Contents

PROPERTIES

?
Store values associated with an object.
collapsedIndicates if the element is collapsed or expanded.
disabledDatesSets or gets the dates that a user cannot select.
disabledDaysOfWeekSets or gets the days of the week that a user cannot select.
enabledIndicates if the element is enabled or disabled.
globalIndicates if an element appears on all pages or only on the current page.
hiddenIndicates if the element is visible or hidden.
idGets the elements's ID.
isVisibleIndicates if the element is actually visible.
maxDateSets or gets the latest date that a user can select.
minDateSets or gets the earliest date that a user can select.
parentGets the element's parent element.
readOnlySets or gets if a user can modify the value of the input element.
renderedIndicates if an element is currently displayed.
requiredSets or gets whether an input element is required to have a value.
typeGets the element's type.
validIndicates if an input element's value is valid.
validationMessage

Gets a message indicating why the element is invalid, or an empty string if the message is valid.

validity

Gets a ValidityState object that contains detailed information about the validity states of the element.

valueSets or gets the value of the date picker.

FUNCTIONS

?
Perform actions on an object.
blur( )Removes focus from the element.
collapse( )Collapses the element and sets its collapsed property to true.
disable( )Disables the element and sets its enabled property to false.
enable( )Enables the element and sets its enabled property to true.
expand( )Expands the element and sets its collapsed property to false.
focus( )Places focus on the element.
hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

onBlur( )Adds an event handler that runs when the element loses focus.
onChange( )

Adds an event handler that runs when an input element's value is changed.

onClick( )Adds an event handler that runs when the element is clicked.
onCustomValidation( )Adds an event handler that runs when the element's validation is checked.
onDblClick( )Adds an event handler that runs when the element is double-clicked.
onFocus( )Adds an event handler that runs when the element receives focus.
onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

resetValidityIndication( )Resets the element's visual validity indication.
scrollTo( )Scrolls the page to the element using an animation.
show( )

Shows the element and sets its hidden property to false, using an effect if specified.

updateValidityIndication( )Updates the element's visual validity indication based on its current validity state.

collapsed

Indicates if the element is collapsed or expanded.

Description

If collapsed is true, the element is not displayed on the page under any circumstances. A collapsed element, unlike a hidden element, does not take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

Even if the element is not be displayed due to the conditions mentioned above, if its collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

See Also

collapse( ), expand( ), hide( ), show( ), hidden

Syntax

get collapsed(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's collapsed status

let isCollapsed = $w("#myElement").collapsed; // false

Toggle an element's collapsed state

if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

disabledDates

Sets or gets the dates that a user cannot select.

Description

Setting the disabledDates property prevents users from selecting the specified dates. However, it does not limit your ability to set those dates programmatically.

Set disabledDates to an empty array ([]) to remove the current disabled dates.

Getting the disabledDates property returns the current list of disabled dates.

See Also

disabledDaysOfWeek

Syntax

get disabledDates(): Array<Date>
set disabledDates(value: Array<Date>): void
TYPE
?
The kind of data the property stores.
Array<Date>

Examples

Get dates which are disabled

let dates = $w("#myDatePicker").disabledDates;

let firstAsStr = dates[0].toDateString(); // "Fri Jan 13 2017"

Set dates which are disabled

let badDate1 = new Date(2017, 0, 13);
let badDate2 = new Date(2017, 9, 13);

$w("#myDatePicker").disabledDates = [badDate1, badDate2];

disabledDaysOfWeek

Sets or gets the days of the week that a user cannot select.

Description

Setting the disabledDaysOfWeek property prevents users from selecting the specified days of the weeks. However, it does not limit your ability to set those dates programmatically. Set disabledDaysOfWeek to an empty array ([]) to remove the current disabled days of the week.

Getting the disabledDaysOfWeek property returns the current list of disabled days of the week.

The disabledDaysOfWeek property accepts an array of integers from 0 to 6, where 0 represent Sunday, 1 is Monday, 2 is Tuesday, and so on.

See Also

disabledDates

Syntax

get disabledDaysOfWeek(): Array<number>
set disabledDaysOfWeek(value: Array<number>): void
TYPE
?
The kind of data the property stores.
Array<number>

Examples

Get which days of the week are disabled

let days = $w("#myDatePicker").disabledDaysOfWeek;

let secondDisabledDay = days[1]; // 6

Set Sundays and Saturdays to be disabled

$w("#myDatePicker").disabledDaysOfWeek = [0, 6];

enabled

Indicates if the element is enabled or disabled.

Description

If enabled is true, users can interact with the element.

If enabled is false, users cannot interact with the element.

When an element is disabled:

  • Its color is faded or grayed out.
  • Animations that the element normally exhibits when being interacting with do not occur.
  • Actions that the element has been configured to perform, such as opening a link, do not occur.
  • Event handlers that have been bound to the element, such as with onMouseIn, do not run.
  • If the element is an input element, such as a dropdown or text box, users cannot interact with it.

To set the enabled property of an element, use the element's enable() or disable() functions.

The enabled property can also be set in the Editor using the Properties panel.

See Also

disable( ), enable( )

Syntax

get enabled(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
true

MIXED IN FROM

?
Where this functionality is inherited from.
$w.DisabledMixin

Examples

Get an element's enabled status

let isEnabled = $w("#myElement").enabled; // true

Toggle an element's enabled state

if( $w("#myElement").enabled ) {
  $w("#myElement").disable();
}
else {
  $w("#myElement").enable();
}

global

Indicates if an element appears on all pages or only on the current page.

Description

If global is true, the element appears on all pages.

If global is false, the element only appears on the current page.

Syntax

get global(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get whether an element is displayed on all pages

let isGlobal = $w("#myElement").global; // false

hidden

Indicates if the element is visible or hidden.

Description

If hidden is true, the element is not displayed on the page under any circumstances. A hidden element, unlike a collapsed element, continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the element's Properties panel in the Editor, the hidden property is set to true when the page loads.

Note

An element's hidden property is not the same as its isVisible property. The hidden property indicates whether the element should be displayed, while isVisible indicates if it is actually displayed.

See Also

hide( ), show( ), collapse( ), expand( ), collapsed, rendered

Syntax

get hidden(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get an element's hidden status

let isHidden = $w("#myElement").hidden;  // false

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

id

Gets the elements's ID.

Description

The ID is the element's unique identifier. It is used when selecting elements using the $w() function.

An element's id is set in the Editor using the Properties panel.

Syntax

get id(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the ID

let myId = $w("#myElement").id; // "myElement"

isVisible

Indicates if the element is actually visible.

Description

If isVisible is true, the element is displayed on the page.

If isVisible is false, the element is not displayed on the page.

The value of the isVisible property is calculated based on the hidden, collapsed, and rendered properties of the element and all of its ancestors. It is true only if the conditions exist in the element's property values and the property values of its ancestors such that the element is actually displayed on the page.

Note

An element's isVisible property is not the same as its hidden property. The isVisible property indicates whether the element is actually displayed, while hidden indicates if it should be displayed.

The isVisible property of an element remains true even if another element completely covers it so that a user cannot see it.

See Also

hidden, collapsed, rendered

Syntax

get isVisible(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
true

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Get whether an element is visible

let isVisible = $w("#myElement").isVisible;  // true

maxDate

Sets or gets the latest date that a user can select.

Description

Setting the maxDate property prevents users from selecting dates past the maximum date. However, it does not limit your ability to change the date picker's value to one that exceeds maxDate programmatically.

Set maxDate to undefined to remove the current maximum date limitation.

Getting the maxDate property returns the current maximum date that a user can select.

See Also

minDate

Syntax

get maxDate(): Date
set maxDate(value: Date): void
TYPE
?
The kind of data the property stores.
Date
DEFAULT VALUE
?
The value of a property before you explicitly set it.
undefined

Examples

Get a date picker's maximum date

let pickerMaxDate = $w("#myDatePicker").maxDate;

let maxStr = pickerMaxDate.toDateString(); // "Fri Jan 13 2017"

Set a date picker's maximum date to today

$w("#myDatePicker").maxDate = new Date();

minDate

Sets or gets the earliest date that a user can select.

Description

Setting the minDate property prevents users from selecting dates before the minimum date. However, it does not limit your ability to change the date picker's value to one that preceeds minDate programmatically.

Set minDate to undefined to remove the current minimum date limitation.

Getting the minDate property returns the current minimum date that a user can select.

See Also

maxDate

Syntax

get minDate(): Date
set minDate(value: Date): void
TYPE
?
The kind of data the property stores.
Date
DEFAULT VALUE
?
The value of a property before you explicitly set it.
undefined

Examples

Get a date picker's minimum date

let pickerMinDate = $w("#myDatePicker").minDate;

let minStr = pickerMinDate.toDateString(); // "Fri Jan 13 2017"

Set a date picker's minimum date to today

$w("#myDatePicker").minDate = new Date();

parent

Gets the element's parent element.

Description

Some elements can contain other elements. This occurs when you drag an element onto a container element. The container is the parent of all the elements it contains.

Page, Header, and Footer are top-level elements and have no parent.

See Also

children

Syntax

get parent(): Node
TYPE
?
The kind of data the property stores.
DEFAULT VALUE
?
The value of a property before you explicitly set it.
null

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the parent element and the parent's ID

let parentElement = $w("#myElement").parent;

let parentId = parentElement.id; // "page1"

readOnly

Sets or gets if a user can modify the value of the input element.

Description

Setting the value of the readOnly property to true prevents users from changing the element's value. However, it does not limit your ability to change the value programmatically. Setting it to false allows users to change the element's value.

Getting the value of the readonly property returns whether a user can modify the value of the input element.

You can also set an element's readonly property in the Editor using the Settings pane:

Syntax

get readOnly(): boolean
TYPE
?
The kind of data the property stores.
boolean

MIXED IN FROM

?
Where this functionality is inherited from.
$w.ReadOnlyMixin

Examples

Get whether the element is readOnly

let isReadonly = $w("#myElement").readOnly; // true

Set an element to be readOnly

$w("#myElement").readOnly = true;

rendered

Indicates if an element is currently displayed.

Description

If rendered is true, the element is in the current DOM structure and can be used.

If rendered is false the element is not in the current DOM structure.

Some reasons the element might not be in the DOM inclue:

  • It is in a slide which is not currently showing.
  • It is in a mode which is not currently active. For example, it is in the hover mode of a hover box.

See Also

collapsed, hidden, isVisible

Syntax

get rendered(): boolean
TYPE
?
The kind of data the property stores.
boolean
DEFAULT VALUE
?
The value of a property before you explicitly set it.
false

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

required

Sets or gets whether an input element is required to have a value.

Description

Setting the required property to true causes the element to be invalid if it doesn't contain a value. Setting it to false allows the element to be valid even if it doesn't contain a value. The validity of the element can be checked using its validity property.

Getting the value of the required property returns whether the element is required.

You can also set an input element to be required by using the element's Settings pane in the Editor.

See Also

validity

Syntax

get required(): boolean
set required(value: boolean): void
TYPE
?
The kind of data the property stores.
boolean

MIXED IN FROM

?
Where this functionality is inherited from.
$w.RequiredMixin

Examples

Set an element to be required

$w("#myElement").required = true;

Get whether an element is required

let isRequired = $w("#myElement").required; // true

type

Gets the element's type.

Syntax

get type(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the element's type

let myType = $w("#myElement").type; // "$w.Type"

valid

Indicates if an input element's value is valid.

Description

The valid property indicates if an element's value satisfies all conditions to pass a validation check. This includes basic validity conditions, such as whether the element has a value if it is required, and those specified in its onCustomValidation() event handler, if you defined one.

Note that validations other than required, including custom validations, are not run on input elements when they don't have a value.

See Also

onCustomValidation( )

Syntax

get valid(): boolean
TYPE
?
The kind of data the property stores.
boolean

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get whether the element is valid

let isValid = $w("#myElement").valid; // false

validationMessage

Gets a message indicating why the element is invalid, or an empty string if the message is valid.

Description

Set the value of the validationMessage property using the reject() function of the onCustomValidation() event handler.

See Also

validity

Syntax

get validationMessage(): string
TYPE
?
The kind of data the property stores.
string

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the validation message

let msg = $w("#myElement").validationMessage; // "value missing"

validity

Gets a ValidityState object that contains detailed information about the validity states of the element.

See Also

validationMessage

Syntax

get validity(): ValidityState

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Log ValidityState info

let validityObj = $w("#myElement").validity;

let customError = validityObj.customError;          // true
let valid = validityObj.valid;                      // false
let valueMissing = validityObj.valueMissing;        // false
let typeMismatch = validityObj.typeMismatch;        // false
let patternMismatch = validityObj.patternMismatch;  // false
let tooLong = validityObj.tooLong;                  // false
let tooShort = validityObj.tooShort;                // false
let rangeUnderflow = validityObj.rangeUnderflow;    // false
let rangeOverflow = validityObj.rangeOverflow;      // false
let fileNotUploaded = validityObj.fileNotUploaded;  // false
let stepMismatch = validityObj.stepMismatch;        // false
let badInput = validityObj.badInput;                // false

value

Sets or gets the value of the date picker.

Note

If a date picker is connected to a dataset, setting the date picker's value in code does not set the value of the connected field in the dataset. That means if you use the dataset to perform a submit, the value changed in code is not reflected in the submitted item.

To submit the new value using a dataset, set the field's value using the setFieldValue() function before performing the submit.

Syntax

get value(): Date
set value(value: Date): void
TYPE
?
The kind of data the property stores.
Date

Examples

Get a datepicker's date value

let date = $w("#myDatePicker").value;

let valStr = date.toDateString(); // "Fri Jan 13 2017"

Set a datepicker's date value to be today

$w("#myDatePicker").value = new Date();

blur( )

Removes focus from the element.

Description

The blur() function removes focus from the element and fires a blur event.

The blur event handlers set on this element by the onBlur( ) function or in the Editor are called.

Removing focus through a call to this function is equivalent to a user clicking on another element or tabbing out of the element manually.

If blur() is called on an element that is not in focus, it has no effect. The element in focus remains in focus and the onBlur event handlers are not called.

See Also

onBlur( ), focus( ), onFocus( )

Syntax

function blur(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Remove focus from an element

$w("#myElement").blur();

collapse( )

Collapses the element and sets its collapsed property to true.

Description

The collapse() function returns a Promise that is resolved when the element's collapsed property has been set to true.

To learn about the behavior of a collapsed element, see the collapsed property.

You can also collapse an element when the page loads by using the Properties panel in the Editor.

See Also

expand( ), collapsed, hide( )

Syntax

function collapse(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Collapse an element

$w("#myElement").collapse();

Collapse an element and log a message when done

$w("#myElement").collapse()
  .then( () => {
    console.log("Done with collapse");
  } );

Toggle an element's collapsed state

if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

disable( )

Disables the element and sets its enabled property to false.

Description

The disable() function returns a Promise that is resolved when the element's enabled property has been set to false.

To learn about the behavior of a disabled element, see the enabled property.

See Also

enable( ), enabled

Syntax

function disable(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's enabled property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.DisabledMixin

Examples

Disable an element

$w("#myElement").disable();

Disable an element and log a message when done

$w("#myElement").disable()
  .then( () => {
    console.log("Element now disabled");
  } );

Toggle an element's enabled state

if( $w("#myElement").enabled ) {
  $w("#myElement").disable();
}
else {
  $w("#myElement").enable();
}

enable( )

Enables the element and sets its enabled property to true.

Description

The enable() function returns a Promise that is resolved when the element's enabled property has been set to true.

To learn about the behavior of an enabled element, see the enabled property.

See Also

disable( ), enabled

Syntax

function enable(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's enabled property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.DisabledMixin

Examples

Enable an element

$w("#myElement").enable();

Enable an element and log a message when done

$w("#myElement").enable()
  .then( () => {
    console.log("Element now enabled");
  } );

Toggle an element's enabled state

if( $w("#myElement").enabled ) {
  $w("#myElement").disable();
}
else {
  $w("#myElement").enable();
}

expand( )

Expands the element and sets its collapsed property to false.

Description

The expand() function returns a Promise that is resolved when the element's collapsed property has been set to false.

To learn about the behavior of an expanded element, see the collapsed property.

See Also

expand( ), collapsed, show( )

Syntax

function expand(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the element's collapsed property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Expand an element

$w("#myElement").expand();

Expand an element and log a message when done

$w("#myElement").expand()
  .then( () => {
    console.log("Done with expand");
  } );

Toggle an element's collapsed state

if( $w("#myElement").collapsed ) {
  $w("#myElement").expand();
}
else {
  $w("#myElement").collapse();
}

focus( )

Places focus on the element.

Description

The focus() function places focus on the element and fires a focus event.

The focus event handlers set on this element by the onFocus( ) function or in the Editor are called.

Receiving focus through a call to this function is equivalent to a user clicking on or tabbing to the element manually.

See Also

onFocus( ), blur( ), onBlur( )

Syntax

function focus(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Place focus on an element

$w("#myElement").focus();

hide( )

Hides the element and sets its hidden property to true, using an effect if specified.

Description

The hide() function hides the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to true.

To learn about the behavior of a hidden element, see the hidden property.

You can optionally apply an effect when hiding the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

You can also hide an element when the page loads by using the Properties panel in the Editor.

See Also

show( ), hidden, collapse( )

Syntax

function hide([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to true.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Hide an element with no effect

$w("#myElement").hide();

Hide an element with the "fade" effect

$w("#myElement").hide("fade");

Hide an element with an effect and log message when the effect is done

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").hide("fade", fadeOptions);

Hide an element with an effect and log message when the effect is done

$w("#myElement").hide("fade")
  .then( ( ) => {
    console.log("Done with fade");
} );

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

onBlur( )

Adds an event handler that runs when the element loses focus.

Description

An element loses focus (blurs) through user actions, such as clicking and tabbing, or programmatically, using the blur( ) function.

Note

onBlur() has no effect when applied to RadioButtonGroup elements.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

blur( ), onFocus( ), focus( )

Syntax

function onBlur(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element losed focus.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Get the ID of the element that has lost focus

$w("#myElement").onBlur( (event) => {
  let targetId = event.target.id; // "myElement"
});

onChange( )

Adds an event handler that runs when an input element's value is changed.

Description

An element receives a change event when a user changes the value in an input element.

Syntax

function onChange(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element's value changes.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Print a message to the console when the user changes the value of either of two page elements

$w("#myElement").onChange( (event, $w) => {
  let newValue = event.target.value;  // "new value"
});

onClick( )

Adds an event handler that runs when the element is clicked.

Description

An element receives a click event when a user clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onDblClick( )

Syntax

function onClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the element is clicked.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.ClickableMixin

Examples

Get the ID of the element that was clicked

$w("#myElement").onClick( (event) => {
  let targetId = event.target.id;  // "myElement"
} );

Get a mouse click's coordinates

$w("#myElement").onClick( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

onCustomValidation( )

Adds an event handler that runs when the element's validation is checked.

Description

The onCustomValidation() function allows you perform custom validation in addition to any basic validation that was defined in the Editor.

To invalidate the element, call the reject() function that is passed into the validator callback function and pass it a validation message.

The element's validity is checked when the value of the element changes either by user interaction or programmatically.

Note that validations other than required, including custom validations, are not run on input elements when they don't have a value.

Syntax

function onCustomValidation(validator: Validator): void
callback Validator(value: string | Array<File> | boolean, reject: Function): void
PARAMETERS
?
The kind of data the property stores.
validator
function(value: string | Array<File> | boolean, reject: Function)

The name of the function or the function expression to run when the element's custom validation is checked.

?
The kind of data the property stores.
value
string | Array<File> | boolean
The value of the element being validated.
reject
Function
A function that invalidates the element with the specified message.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Set an element to invalid if its value is "evil"

$w("#myElement").onCustomValidation( (value, reject) => {
  if(value === "evil") {
    reject("Evil is invalid");
  }
} );

onDblClick( )

Adds an event handler that runs when the element is double-clicked.

Description

An element receives a dblClick event when a user double-clicks on the element and releases.

When a user double-clicks an element, two click events are fired before a doubleClick event is also fired.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onClick( )

Syntax

function onDblClick(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the element is clicked.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.ClickableMixin

Examples

Get the ID of the element that was double-clicked

$w("#myElement").onDblClick( (event) => {
  let targetId = event.target.id; // "myElement"
} );

onFocus( )

Adds an event handler that runs when the element receives focus.

Description

An element receives focus through user actions, such as clicking and tabbing, or programmatically, using the focus( ) function.

Note

onFocus() has no effect when applied to RadioButtonGroup elements.

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

focus( ), onBlur( ), blur( )

Syntax

function onFocus(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element receives focus.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FocusMixin

Examples

Get the ID of the element that has received focus

$w("#myElement").onFocus( (event) => {
  let targetId = event.target.id; // "myElement"
});

onMouseIn( )

Adds an event handler that runs when the mouse pointer is moved onto the element.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseIn(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved onto the element.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the mouse event info when the mouse enters an element

$w("#myElement").onMouseIn( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

onMouseOut( )

Adds an event handler that runs when the mouse pointer is moved off of the element.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

Syntax

function onMouseOut(handler: MouseEventHandler): Element
callback MouseEventHandler(event: MouseEvent, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: MouseEvent, $w: $w)

The name of the function or the function expression to run when the mouse pointer is moved off of the element.

?
The kind of data the property stores.
event
The mouse event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element to which the event handler was added.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the mouse event info when the mouse exits an element

$w("#myElement").onMouseOut( (event) => {
  let clientX = event.clientX;  // 362
  let clientY = event.clientY;  // 244
  let offsetX = event.offsetX;  // 10
  let offsetY = event.offsetY;  // 12
  let pageX = event.pageX;      // 362
  let pageY = event.pageY;      // 376
  let screenX = event.screenX;  // 3897
  let screenY = event.screenY;  // 362
} );

onViewportEnter( )

Adds an event handler that runs when an element is displayed in the viewable part of the current window.

Description

An element enters the viewport when the page is scrolled to show any part of the element. An element also enters the viewport if it was hidden or collapsed and is then shown or expanded in the viewable part of the current window.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportLeave( )

Syntax

function onViewportEnter(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element enters the viewport.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the ID of the element that has entered the viewport

$w("#myElement").onViewportEnter( (event) => {
  let targetId = event.target.id; // "myElement"
});

onViewportLeave( )

Adds an event handler that runs when an element is no longer displayed in the viewable part of the current window.

Description

An element leaves the viewport when the page is scrolled so that the elements is completely out of view. An element also leaves the viewport if it was shown or expanded and is then hidden or collapsed from the viewable part of the current window.

Note

Deprecation note: The $w parameter of event handlers is being deprecated. To get a scoped selector, use the $w.at() function and pass it the context property of the event parameter: $item = $w.at(event.context). To learn more, see here.

See Also

onViewportEnter( )

Syntax

function onViewportLeave(handler: EventHandler): Element
callback EventHandler(event: Event, $w: $w): void
PARAMETERS
?
The kind of data the property stores.
handler
function(event: Event, $w: $w)

The name of the function or the function expression to run when the element leaves the viewport.

?
The kind of data the property stores.
event
The event that occurred.
$w

Deprecated: A selector function. The $w function enables event handlers to work with elements in repeaters and in the global scope.

RETURN VALUE
?
Value that a function evaluates to when it is finished running.
The element on which the event is now registered.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Get the ID of the element that has entered the viewport

$w("#myElement").onViewportLeave( (event) => {
  let targetId = event.target.id; // "myElement"
});

resetValidityIndication( )

Resets the element's visual validity indication.

Description

Many elements have a visual cue that indicates whether they are valid or not. For example, a text input that usually has a black outline might have a red outline when its value is not valid.

The resetValidityIndication() function resets the validity indication of an element to show the element as valid. The actual validity state of the element is not affected. If the element was invalid, it remains invalid. The validity indication shows the element as valid until the element's validity is checked when the value of the element changes either by user interaction or programmatically. At that point, the element's validity indication shows the element as invalid if its value is not valid.

Syntax

function resetValidityIndication(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

scrollTo( )

Scrolls the page to the element using an animation.

Description

The scrollTo() function returns a Promise that is resolved when the animated scroll is complete and the element is now in view.

To scroll to a specific location on the page, see the wix-window scrollTo() function.

Calling the scrollTo() function on an element in a repeated item that is selected from the global scope causes an error.

Syntax

function scrollTo(): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the scroll is complete.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Scroll the page to an element

$w("#myElement").scrollTo();

Scroll the page to an element and log message when done

$w("#myElement").scrollTo()
  .then( ( ) => {
    console.log("Done with scroll");
} );

show( )

Shows the element and sets its hidden property to false, using an effect if specified.

Description

The show() function shows the element and returns a Promise that is resolved when the effect is complete and the element's hidden property has been set to false.

You can optionally apply an effect when showing the element by providing an effectName value. You can also customize the effect by providing the optional effectOptions object.

Effects:

See Also

hide( ), hidden, expand( )

Syntax

function show([effectName: string], [effectOptions: ArcEffectOptions | BounceEffectOptions | FadeEffectOptions | FlipEffectOptions | FloatEffectOptions | FlyEffectOptions | FoldEffectOptions | GlideEffectOptions | PuffEffectOptions | RollEffectOptions | SlideEffectOptions | SpinEffectOptions | TurnEffectOptions | ZoomEffectOptions]): Promise<void>
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
Promise<void>
Fulfilled - When the effect is complete and the element's hidden property has been set to false.

MIXED IN FROM

?
Where this functionality is inherited from.
$w.HiddenCollapsedMixin

Examples

Show an element with no effect

$w("#myElement").show();

Show an element with the "fade" effect

$w("#myElement").show("fade");

Show an element with the "fade" effect and custom options

let fadeOptions = {
  "duration":   2000,
  "delay":      1000
};

$w("#myElement").show("fade", fadeOptions);

Show an element with an effect and log message when the effect is done

$w("#myElement").show("fade")
  .then( ( ) => {
    console.log("Done with fade");
  } );

Toggle an element's hidden state

if( $w("#myElement").hidden ) {
  $w("#myElement").show();
}
else {
  $w("#myElement").hide();
}

updateValidityIndication( )

Updates the element's visual validity indication based on its current validity state.

Description

Many elements have a visual cue that indicates whether they are valid or not. For example, a text input that usually has a black outline might have a red outline when its value is not valid.

Syntax

function updateValidityIndication(): void

MIXED IN FROM

?
Where this functionality is inherited from.
$w.FormElement

Examples

Update an element's validatity indicator

$w("#myElement").updateValidityIndication();