Use the wj-input-date directive to add InputDate 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 an InputDate control:</p>
<wj-input-date
value="theDate"
format="M/d/yyyy">
</wj-input-date>
The example below shows a Date value (that includes date and time information)
using an InputDate and an InputTime control. Notice how both controls
are bound to the same controller variable, and each edits the appropriate information
(either date or time). The example also shows a Calendar control that can be
used to select the date with a single click.
The wj-input-date 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 InputDate control created by this directive.
format
@ The format used to display the date being edited (see Globalize).
mask
@ The mask used to validate the input as the user types (see wijmo.input.InputMask).
is-dropped-down
@ A value indicating whether the drop-down is currently visible.
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.
max
@ The latest valid date (a string in the format "yyyy-MM-dd").
min
@ The earliest valid date (a string in the format "yyyy-MM-dd").
placeholder
@ The string to show as a hint when the control is empty.
is-required
@ A value indicating whether to prevent null values.
show-drop-down-button
@ A value indicating whether the control displays a drop-down button.
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 InputDate control.
Use the wj-input-date directive to add InputDate 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:
The example below shows a Date value (that includes date and time information) using an InputDate and an InputTime control. Notice how both controls are bound to the same controller variable, and each edits the appropriate information (either date or time). The example also shows a Calendar control that can be used to select the date with a single click.
Example
The wj-input-date 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 InputDate control created by this directive.@The format used to display the date being edited (see Globalize).@The mask used to validate the input as the user types (see wijmo.input.InputMask).@A value indicating whether the drop-down is currently visible.&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 latest valid date (a string in the format "yyyy-MM-dd").@The earliest valid date (a string in the format "yyyy-MM-dd").@The string to show as a hint when the control is empty.@A value indicating whether to prevent null values.@A value indicating whether the control displays a drop-down button.=The text to show in the control.=The date being edited.&The InputDate.gotFocus event handler.&The InputDate.lostFocus event handler.&The InputDate.isDroppedDownChanging event handler.&The InputDate.isDroppedDownChanged event handler.&The InputDate.textChanged event handler.&The InputDate.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.