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>
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.
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.
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:
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:
@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.@Specifies a control property that is bound to a scope using the ng-model directive.=A reference to the Calendar control created by this directive.=The month being displayed in the calendar.@The first day of the week.&This event occurs after the binding has finished initializing the control with attribute values.=A value indicating whether the binding has finished initializing the control with attribute values.=The function used to customize the dates shown in the calendar.@The latest valid date (string in the format "yyyy-MM-dd").@The earliest valid date (string in the format "yyyy-MM-dd").@A value indicating whether the control displays a month or the entire year.@A value indicating whether the control displays the header area.=The date being edited.&The Calendar.gotFocus event handler.&The Calendar.lostFocus event handler.&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.