DateBox - Marcura/marcura-ui GitHub Wiki
Table of contents
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);