DateBox

Table of contents

• Demo
• Usage
• Fields
  • canReset
  • culture
  • displayFormat
  • format
  • hasTime
  • id
  • instance
  • isDisabled
  • isRequired
  • maxDate
  • minDate
  • parser
  • timeZone
  • validators
  • value
• Events
  • change

Demo

Demo

Usage

View:

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

Controller:

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

Fields

canReset

Determines whether a button is displayed allowing the user to empty a previously set value.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

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

culture

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

Type

String

Default value

null

Examples

Sets culture field:

View:

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

displayFormat

The format used for displaying a date.

Type

String

Default value

'dd MMM yyyy'

Examples

Sets displayFormat field:

View:

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

format

The format used for saving a date.

Type

String

Default value

'yyyy-MM-ddTHH:mm:ssZ'

Examples

Sets format field:

View:

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

hasTime

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

Type

Boolean

Default value

false

Examples

Sets the field:

View:

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

id

Unique identifier of the component.

Type

String

Default value

''

Examples

Sets the field:

View:

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

instance

An object that provides API for the component.

Examples

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();
});

isDisabled

Determines whether a component is disabled.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

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

isRequired

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.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

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

maxDate

A maximum date the user can enter (inclusive).

Type

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

Default value

null

Examples

Sets value field:

View:

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

Controller:

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

minDate

A minimum date the user can enter (inclusive).

Type

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

Default value

null

Examples

Sets value field:

View:

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

Controller:

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

parser

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

Type

Function

Default value

null

Returns

Object

Parameters

date String
Date or null if date is empty.

Examples

Sets parser 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
    }
};

timeZone

The time zone used to display and save a date.

Type

String

Default value

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

Examples

Sets timeZone field:

View:

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

validators

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

Type

Array

Default value

null

Examples

Sets the field:

View:

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

Controller:

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

value

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

Type

String

Default value

null

Examples

Sets value field:

View:

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

Controller:

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

Events

change

Fires when the value is changed by the user.

Parameters

maValue Object
Value or null if the value is empty.

Examples

Subscribes to change event:

View:

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

Controller:

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