Skip to content

DateBox

Jump to bottom
Evgenii Koriakin edited this page May 17, 2018 · 67 revisions

Table of contents

Demo

Demo

Usage

View:

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

Controller:

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

Fields

changeTimeout

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

Type

Number

Default value

0

Examples

Sets the field:

View:

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

canReset

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

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 the field:

View:

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

disabledDates

A list of dates to disable.

Type

String[]

Default value

[]

Examples

Sets the field:

View:

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

displayFormat

The format used for displaying a date.

Type

String

Default value

'dd MMM yyyy'

Examples

Sets the field:

View:

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

eventDates

A list of dates to mark as events.

Type

String[]

Default value

[]

Examples

Sets the field:

View:

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

format

The format used for saving a date.

Type

String

Default value

'yyyy-MM-ddTHH:mm:ssZ'

Examples

Sets the 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>

max

A maximum date allowed (inclusive).

Type

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

Default value

null

Examples

Sets the field:

View:

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

Controller:

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

min

A minimum date allowed (inclusive).

Type

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

Default value

null

Examples

Sets the field:

View:

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

Controller:

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

modifier

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

Type

String

Default value

null

Examples

Sets the field:

View:

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

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

placeholder

A placeholder which is displayed when the value is empty.

Type

String

Default value

null

Examples

Sets the field:

View:

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

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 the 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 = {
    validate: 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 the 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 String
Value or null if the value is empty.

Examples

Subscribes to the event:

View:

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

Controller:

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

validate

Fires when the value is validated.

Parameters

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

Examples

Subscribes to the event:

View:

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

Controller:

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

API

failedValidator()

Returns a validator which has not passed the validation.

Examples

View:

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

Controller:

$scope.dateBox = {};

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

isInitialized

Determines whether the component is initialized.

Examples

View:

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

Controller:

$scope.dateBox = {};

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

isValid()

Determines whether the value of the component is valid.

Examples

View:

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

Controller:

$scope.dateBox = {};

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

refresh()

Refreshes displayed date and validity state of the component.

Examples

View:

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

Controller:

$scope.dateBox = {};

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

validate()

Validates the value and highlights the component accordingly.

Examples

View:

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

Controller:

$scope.dateBox = {};

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

Editors

CheckBox
DateBox
RadioBox
SelectBox
TextArea
TextBox

Navigation

Button
Tabs

Layout

Form
Grid
Label
Modal

Other

Progress

Services

MaDate

Clone this wiki locally