• Demo
• Usage
• Fields
  • canReset
  • changeTimeout
  • culture
  • disabledDates
  • displayFormat
  • eventDates
  • format
  • hasTime
  • id
  • instance
  • isDisabled
  • isRequired
  • max
  • min
  • modifier
  • parser
  • placeholder
  • timeZone
  • validators
  • value
• Events
  • change
  • validate
• API
  • failedValidator()
  • isInitialized
  • isValid()
  • refresh()
  • validate()

Demo

View:

<ma-date-box
    value="date">
</ma-date-box>

Controller:

$scope.date = '2016-07-25T00:00:00Z';

A timeout (in milliseconds) after which change event is invoked. The timeout is reset after another change takes place.

Number

0

Sets the field:

View:

<ma-date-box
    change-timeout="500">
</ma-date-box>

Determines whether the button which allows the user to clear the value is displayed.

Boolean

false

Sets the field:

View:

<ma-date-box
    can-reset="true">
</ma-date-box>

The culture used to parse a provided value.
Supported cultures: 'en-GB', 'en-US'.

String

null

Sets the field:

View:

<ma-date-box
    culture="'en-US'">
</ma-date-box>

A list of dates to disable.

String[]

[]

Sets the field:

View:

<ma-date-box
    event-dates="['2018-05-09', '2018-05-15']">
</ma-date-box>

The format used for displaying a date.

String

'dd MMM yyyy'

Sets the field:

View:

<ma-date-box
    display-format="'dd/MM/yy'">
</ma-date-box>

A list of dates to mark as events.

String[]

[]

Sets the field:

View:

<ma-date-box
    event-dates="['2018-05-09', '2018-05-15']">
</ma-date-box>

The format used for saving a date.

String

'yyyy-MM-ddTHH:mm:ssZ'

Sets the field:

View:

<ma-date-box
    format="'dd/MM/yy HH:mm'">
</ma-date-box>

Determines whether the user can enter time (hours and minutes) along with date.

Boolean

false

Sets the field:

View:

<ma-date-box
    has-time="true">
</ma-date-box>

Unique identifier of the component.

String

''

Sets the field:

View:

<ma-date-box
    id="date">
</ma-date-box>

An object that provides API for the component.

View:

<ma-date-box
    instance="dateBox">
</ma-date-box>

Controller:

$scope.dateBox = {};

// API object can be used after the component has been initialized by AngularJS,
// which is often after a timeout or in callback functions.
$timeout(function() {
    var isValid = dateBox.isValid();
});

Determines whether a component is disabled.

Boolean

false

Sets the field:

View:

<ma-date-box
    is-disabled="true">
</ma-date-box>

Determines whether a value is required.
If a value is not set by the user the component will become invalid and will be highlighted accordingly.

Boolean

false

Sets the field:

View:

<ma-date-box
    is-required="true">
</ma-date-box>

A maximum date allowed (inclusive).

String
Allowed format is 'yyyy-MM-ddTHH:mm:ssZ', e.g. '2016-10-15T00:00:00Z'.

null

Sets the field:

View:

<ma-date-box
    max="max">
</ma-date-box>

Controller:

$scope.max = '2016-10-15T00:00:00Z';

A minimum date allowed (inclusive).

String
Allowed format is 'yyyy-MM-ddTHH:mm:ssZ', e.g. '2016-10-15T00:00:00Z'.

null

Sets the field:

View:

<ma-date-box
    min="min">
</ma-date-box>

Controller:

$scope.min = '2016-10-15T00:00:00Z';

A single CSS modifier or list of space-separated CSS modifiers to add to the component.

String

null

Sets the field:

View:

<ma-date-box
    modifier="horizontal">
</ma-date-box>
<ma-date-box
    modifier="horizontal highlighted">
</ma-date-box>

A function used to parse the date entered by the user.
The function can be used to add support for custom date formats.

Function

null

Object

date String
Date or null if date is empty.

Sets the field:

View:

<ma-date-box
    parser="parser">
</ma-date-box>

Controller:

$scope.parser = function(date) {
    // Parse the date and return it along with time zone offset.
    var parsedDate = new Date(date);

    return {
        date: parsedDate,
        offset: 240
    }
};

A placeholder which is displayed when the value is empty.

String

null

Sets the field:

View:

<ma-date-box
    placeholder="Enter date">
</ma-date-box>

The time zone used to display and save a date.

String

'Z'
By default the date is displayed and saved in UTC.
Both '-07:00' and 'GMT-07:00' are valid time zones.

Sets the field:

View:

<ma-date-box
    time-zone="'-07:00'">
</ma-date-box>

A list of validators which is used to validate the value each time it is changed.

Array

null

Sets the field:

View:

<ma-date-box
    validators="[dateValidator]">
</ma-date-box>

Controller:

$scope.dateValidator = {
    validate: function(date) {
        // Check the date somehow and return true or false.
        return true;
    }
};

A value of the component (representing a date) which is bound to an outer scope with two-way data binding.

String

null

Sets the field:

View:

<ma-date-box
    value="date">
</ma-date-box>

Controller:

$scope.date = '2016-07-25T00:00:00Z';

Fires when the value is changed by the user.

maValue String
Value or null if the value is empty.

Subscribes to the event:

View:

<ma-date-box
    change="change(maValue)">
</ma-date-box>

Controller:

$scope.change = function(date) {
    // Handle the event.
};

Fires when the value is validated.

maValue String
Value entered by the user or null if the value is empty.

Subscribes to the event:

View:

<ma-date-box
    validate="validate(maValue)">
</ma-date-box>

Controller:

$scope.validate = function(value) {
    // Handle the event.
};

Returns a validator which has not passed the validation.

View:

<ma-date-box
    instance="dateBox">
</ma-date-box>

Controller:

$scope.dateBox = {};

$timeout(function() {
    var failedValidator = dateBox.failedValidator();
}, 5000);

Determines whether the component is initialized.

View:

<ma-date-box
    instance="dateBox">
</ma-date-box>

Controller:

$scope.dateBox = {};

$timeout(function() {
    var isInitialized = dateBox.isInitialized;
}, 5000);

Determines whether the value of the component is valid.

View:

<ma-date-box
    instance="dateBox">
</ma-date-box>

Controller:

$scope.dateBox = {};

$timeout(function() {
    var isValid = dateBox.isValid();
}, 5000);

Refreshes displayed date and validity state of the component.

View:

<ma-date-box
    instance="dateBox">
</ma-date-box>

Controller:

$scope.dateBox = {};

$timeout(function() {
    dateBox.refresh();
}, 5000);

Validates the value and highlights the component accordingly.

View:

<ma-date-box
    instance="dateBox">
</ma-date-box>

Controller:

$scope.dateBox = {};

$timeout(function() {
    dateBox.validate();
}, 5000);