5.20231.904
wijmo.angular.input Class WjCalendar Wijmo API Class

WjCalendar Class

AngularJS directive for the Calendar control.

Use the wj-calendar directive to add Calendar controls to your AngularJS applications. Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

<p>Here is a Calendar control:</p>
<wj-calendar
  value="theDate">
</wj-calendar>

Example

This example creates a Calendar control and binds it to a 'date' variable exposed by the controller. The range of dates that may be selected is limited by the min and max properties.

The wj-calendar directive supports the following attributes:

ng-model
@ Binds the control's value property using the ng-model Angular directive. Binding the property using the ng-model directive provides standard benefits like validation, adding the control's state to the form instance, and so on. To redefine properties on a control that is bound by the ng-model directive, use the wj-model-property attribute.
wj-model-property
@ Specifies a control property that is bound to a scope using the ng-model directive.
control
= A reference to the Calendar control created by this directive.
display-month
= The month being displayed in the calendar.
first-day-of-week
@ The first day of the week.
initialized
& This event occurs after the binding has finished initializing the control with attribute values.
is-initialized
= A value indicating whether the binding has finished initializing the control with attribute values.
item-formatter
= The function used to customize the dates shown in the calendar.
max
@ The latest valid date (string in the format "yyyy-MM-dd").
min
@ The earliest valid date (string in the format "yyyy-MM-dd").
month-view
@ A value indicating whether the control displays a month or the entire year.
show-header
@ A value indicating whether the control displays the header area.
value
= The date being edited.
got-focus
& The Calendar.gotFocus event handler.
lost-focus
& The Calendar.lostFocus event handler.
value-changed
& The Calendar.valueChanged event handler.

If provided, the min and max attributes are strings in the format "yyyy-MM-dd." Technically, you can use any full date as defined in the W3C [RFC 3339], which is also the format used with regular HTML5 input elements.

Heirarchy

  • WjDirective
    • WjCalendar