angular-bootstrap-datetimepicker
Version:
Native Angular (8+) datetime picker component styled by Twitter Bootstrap 4.
1,273 lines (1,257 loc) • 105 kB
JavaScript
import { __extends, __decorate, __param } from 'tslib';
import * as _moment from 'moment';
import _moment__default, { } from 'moment';
import { InjectionToken, Inject, NgModule, EventEmitter, Renderer2, ElementRef, Output, Input, HostListener, Directive, NgZone, Component, ChangeDetectionStrategy } from '@angular/core';
import { Validators, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { take } from 'rxjs/operators';
/**
* Determines the model type of the Date/Time picker another type.
*/
var DlDateAdapter = /** @class */ (function () {
function DlDateAdapter() {
}
return DlDateAdapter;
}());
/**
* Work around for moment namespace conflict when used with webpack and rollup.
* See https://github.com/dherges/ng-packagr/issues/163
*
* Depending on whether rollup is used, moment needs to be imported differently.
* Since Moment.js doesn't have a default export, we normally need to import using
* the `* as`syntax.
*
* rollup creates a synthetic default module and we thus need to import it using
* the `default as` syntax.
*
* @internal
**/
var moment = _moment;
/**
* Adapts `moment` to be usable as a date by date/time components that work with dates.
**/
var DlDateAdapterMoment = /** @class */ (function (_super) {
__extends(DlDateAdapterMoment, _super);
function DlDateAdapterMoment() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Create a new instance of a `moment` type from milliseconds.
* @param milliseconds
* a time value as milliseconds (local time zone)
* @returns
* an instance of `moment` for the specified moment in time.
*/
DlDateAdapterMoment.prototype.fromMilliseconds = function (milliseconds) {
return moment(milliseconds);
};
/**
* Returns a moment in time value as milliseconds (local time zone).
* @param value
* a moment or `null`.
* @returns
* a `moment.valueOf()` result for the specified `moment` or `null`
*/
DlDateAdapterMoment.prototype.toMilliseconds = function (value) {
return (value) ? value.valueOf() : undefined;
};
return DlDateAdapterMoment;
}(DlDateAdapter));
/**
* Adapts `Date` to be usable as a date by date/time components that work with dates.
**/
var DlDateAdapterNative = /** @class */ (function (_super) {
__extends(DlDateAdapterNative, _super);
function DlDateAdapterNative() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Create a new instance of a `moment` type from milliseconds.
* @param milliseconds
* a time value as milliseconds (local time zone)
* @returns
* an instance of `moment` for the specified moment in time.
*/
DlDateAdapterNative.prototype.fromMilliseconds = function (milliseconds) {
return new Date(milliseconds);
};
/**
* Returns a moment in time value as milliseconds (local time zone).
* @param value
* a Date or null.
* @returns
* a `value.getTime()` result for the specified `Date` or `null`.
*/
DlDateAdapterNative.prototype.toMilliseconds = function (value) {
return (value) ? value.getTime() : undefined;
};
return DlDateAdapterNative;
}(DlDateAdapter));
/**
* Adapts `number` to be usable as a date by date/time components that work with dates.
* No op adapter.
**/
var DlDateAdapterNumber = /** @class */ (function (_super) {
__extends(DlDateAdapterNumber, _super);
function DlDateAdapterNumber() {
return _super !== null && _super.apply(this, arguments) || this;
}
/**
* Returns the specified number.
* @param milliseconds
* a moment time time.
* @returns
* the specified moment in time.
*/
DlDateAdapterNumber.prototype.fromMilliseconds = function (milliseconds) {
return milliseconds;
};
/**
* Returns the specified number.
* @param value
* a moment time time or `null`
* @returns
* the specified moment in time or `null`
*/
DlDateAdapterNumber.prototype.toMilliseconds = function (value) {
return value;
};
return DlDateAdapterNumber;
}(DlDateAdapter));
/**
* @internal
*/
var moment$1 = _moment;
/* istanbul ignore if */
if ('default' in _moment) {
moment$1 = _moment__default;
}
/**
* InjectionToken for string dates that can be used to override default model format.
**/
var DL_DATE_TIME_DISPLAY_FORMAT = new InjectionToken('DL_DATE_TIME_DISPLAY_FORMAT');
/**
* `Moment`'s long date format `lll` used as the default output format
* for string date's
*/
var DL_DATE_TIME_DISPLAY_FORMAT_DEFAULT = moment$1.localeData().longDateFormat('lll');
/**
* InjectionToken for string dates that can be used to override default input formats.
**/
var DL_DATE_TIME_INPUT_FORMATS = new InjectionToken('DL_DATE__TIME_INPUT_FORMATS');
/**
* Default input format's used by `DlDateAdapterString`
*/
var DL_DATE_TIME_INPUT_FORMATS_DEFAULT = [
'YYYY-MM-DDTHH:mm',
'YYYY-MM-DDTHH:mm:ss',
'YYYY-MM-DDTHH:mm:ss.SSS',
'YYYY-MM-DD',
'M/D/YYYY h:m:s A',
'M/D/YYYY h:m A',
'M/D/YYYY h:m A',
'M/D/YYYY',
'M/D/YY h:m:s A',
'M/D/YY h:m A',
'M/D/YY h A',
'M/D/YY',
DL_DATE_TIME_DISPLAY_FORMAT_DEFAULT,
moment$1.ISO_8601,
];
/**
* InjectionToken for string dates that can be used to override default model format.
**/
var DL_DATE_TIME_MODEL_FORMAT = new InjectionToken('DL_DATE_TIME_MODEL_FORMAT');
/**
* Default model format (ISO 8601)`
*/
var DL_DATE_TIME_MODEL_FORMAT_DEFAULT = 'YYYY-MM-DDTHH:mm:ss.SSSZ';
/**
* Work around for moment namespace conflict when used with webpack and rollup.
* See https://github.com/dherges/ng-packagr/issues/163
*
* Depending on whether rollup is used, moment needs to be imported differently.
* Since Moment.js doesn't have a default export, we normally need to import using
* the `* as`syntax.
*
* rollup creates a synthetic default module and we thus need to import it using
* the `default as` syntax.
*
* @internal
*
**/
var moment$2 = _moment;
/**
* Adapts `string` to be usable as a date by date/time components that work with dates.
**/
var DlDateAdapterString = /** @class */ (function (_super) {
__extends(DlDateAdapterString, _super);
/**
* Constructs a new instance of this class.
*
* @param inputFormats
* see {@link DL_DATE_TIME_INPUT_FORMATS}
* @param modelFormat
* see {@link DL_DATE_TIME_MODEL_FORMAT}
*/
function DlDateAdapterString(inputFormats, modelFormat) {
var _this = _super.call(this) || this;
_this.inputFormats = inputFormats;
_this.modelFormat = modelFormat;
return _this;
}
/**
* Returns the specified number.
* @param milliseconds
* a moment time time.
* @returns
* the specified moment in time.
*/
DlDateAdapterString.prototype.fromMilliseconds = function (milliseconds) {
return moment$2(milliseconds).format(this.modelFormat);
};
/**
* Returns the specified number.
* @param value
* a moment time time or `null`
* @returns
* the milliseconds for the specified value or `null`
* `null` is returned when value is not a valid input date string
*/
DlDateAdapterString.prototype.toMilliseconds = function (value) {
if (value !== undefined && value !== null) {
var newMoment = moment$2(value, this.inputFormats, true);
return newMoment.isValid() ? newMoment.valueOf() : undefined;
}
};
DlDateAdapterString = __decorate([
__param(0, Inject(DL_DATE_TIME_INPUT_FORMATS)),
__param(1, Inject(DL_DATE_TIME_MODEL_FORMAT))
], DlDateAdapterString);
return DlDateAdapterString;
}(DlDateAdapter));
var ɵ0 = DL_DATE_TIME_DISPLAY_FORMAT_DEFAULT, ɵ1 = DL_DATE_TIME_INPUT_FORMATS_DEFAULT, ɵ2 = DL_DATE_TIME_MODEL_FORMAT_DEFAULT;
/**
* Import this module to supply your own `DateAdapter` provider.
* @internal
**/
var DlDateTimeCoreModule = /** @class */ (function () {
function DlDateTimeCoreModule() {
}
DlDateTimeCoreModule = __decorate([
NgModule({
providers: [
{ provide: DL_DATE_TIME_DISPLAY_FORMAT, useValue: ɵ0 },
{ provide: DL_DATE_TIME_INPUT_FORMATS, useValue: ɵ1 },
{ provide: DL_DATE_TIME_MODEL_FORMAT, useValue: ɵ2 }
]
})
], DlDateTimeCoreModule);
return DlDateTimeCoreModule;
}());
/**
* Import this module to store `milliseconds` in the model.
* @internal
*/
var DlDateTimeNumberModule = /** @class */ (function () {
function DlDateTimeNumberModule() {
}
DlDateTimeNumberModule = __decorate([
NgModule({
imports: [DlDateTimeCoreModule],
providers: [
{ provide: DlDateAdapter, useClass: DlDateAdapterNumber }
],
exports: [DlDateTimeCoreModule]
})
], DlDateTimeNumberModule);
return DlDateTimeNumberModule;
}());
/**
* Import this module to store a native JavaScript `Date` in the model.
* @internal
*/
var DlDateTimeDateModule = /** @class */ (function () {
function DlDateTimeDateModule() {
}
DlDateTimeDateModule = __decorate([
NgModule({
imports: [DlDateTimeCoreModule],
providers: [
{ provide: DlDateAdapter, useClass: DlDateAdapterNative }
],
})
], DlDateTimeDateModule);
return DlDateTimeDateModule;
}());
/**
* Import this module to store a `moment` in the model.
* @internal
*/
var DlDateTimeMomentModule = /** @class */ (function () {
function DlDateTimeMomentModule() {
}
DlDateTimeMomentModule = __decorate([
NgModule({
imports: [DlDateTimeCoreModule],
providers: [
{ provide: DlDateAdapter, useClass: DlDateAdapterMoment }
],
})
], DlDateTimeMomentModule);
return DlDateTimeMomentModule;
}());
var ɵ3 = DL_DATE_TIME_INPUT_FORMATS_DEFAULT, ɵ4 = DL_DATE_TIME_DISPLAY_FORMAT_DEFAULT;
/**
* Import this module to store a `string` in the model.
* @internal
*/
var DlDateTimeStringModule = /** @class */ (function () {
function DlDateTimeStringModule() {
}
DlDateTimeStringModule = __decorate([
NgModule({
imports: [DlDateTimeCoreModule],
providers: [
{ provide: DL_DATE_TIME_INPUT_FORMATS, useValue: ɵ3 },
{ provide: DL_DATE_TIME_MODEL_FORMAT, useValue: ɵ4 },
{ provide: DlDateAdapter, useClass: DlDateAdapterString }
],
})
], DlDateTimeStringModule);
return DlDateTimeStringModule;
}());
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* Emitted when the value of a date/time input changes.
*/
var DlDateTimeInputChange = /** @class */ (function () {
/**
* Constructs a new instance.
* @param newValue
* the new value of the date/time picker.
*/
function DlDateTimeInputChange(newValue) {
this._value = newValue;
}
Object.defineProperty(DlDateTimeInputChange.prototype, "value", {
/**
* Get the new value of the date/time picker.
* @returns the new value or null.
*/
get: function () {
return this._value;
},
enumerable: true,
configurable: true
});
return DlDateTimeInputChange;
}());
/**
* @internal
*/
var moment$3 = _moment;
/**
* This directive allows the user to enter dates, using the keyboard, into an input box and
* angular will then store a date value in the model.
*
* The input format(s), display format, and model format are independent and fully customizable.
*/
var DlDateTimeInputDirective = /** @class */ (function () {
/**
* Constructs a new instance of this directive.
* @param _renderer
* reference to the renderer.
* @param _elementRef
* reference to this element.
* @param _dateAdapter
* date adapter for the date type in the model.
* @param _displayFormat
* from `DL_DATE_TIME_DISPLAY_FORMAT`, which defines the format to use for a valid date/time value.
* @param _inputFormats
* from `DL_DATE_TIME_INPUT_FORMATS`, which defines the input formats that allowed as valid date/time values.
* NB: moment is always in strict parse mode for this directive.
*/
function DlDateTimeInputDirective(_renderer, _elementRef, _dateAdapter, _displayFormat, _inputFormats) {
var _this = this;
this._renderer = _renderer;
this._elementRef = _elementRef;
this._dateAdapter = _dateAdapter;
this._displayFormat = _displayFormat;
this._inputFormats = _inputFormats;
/* tslint:disable:member-ordering */
this._filterValidator = function (control) {
// @ts-ignore
return (_this._inputFilter || (function () { return true; }))(_this._value) ?
null : { 'dlDateTimeInputFilter': { 'value': control.value } };
};
this._inputFilter = function () { return true; };
this._isValid = true;
this._parseValidator = function () {
return _this._isValid ?
null : { 'dlDateTimeInputParse': { 'text': _this._elementRef.nativeElement.value } };
};
this._changed = [];
this._touched = [];
this._validator = Validators.compose([this._parseValidator, this._filterValidator]);
this._onValidatorChange = function () { };
this._value = undefined;
/**
* Emits when a `change` event when date/time is selected or
* the value of the date/time picker changes.
**/
this.dateChange = new EventEmitter();
}
DlDateTimeInputDirective_1 = DlDateTimeInputDirective;
Object.defineProperty(DlDateTimeInputDirective.prototype, "dlDateTimeInputFilter", {
/**
* Set a function used to determine whether or not the `value` entered by the user is allowed.
* @param inputFilterFunction
* a function that returns `true` if the `value` entered by the user is allowed, otherwise `false`.
*/
set: function (inputFilterFunction) {
this._inputFilter = inputFilterFunction || (function () { return true; });
this._onValidatorChange();
},
enumerable: true,
configurable: true
});
Object.defineProperty(DlDateTimeInputDirective.prototype, "value", {
/* tslint:enable:member-ordering */
/**
* Returns `D` value of the date/time input or `undefined` | `null` if no value is set.
**/
get: function () {
return this._value;
},
/**
* Set the value of the date/time input to a value of `D` | `undefined` | `null`;
* @param newValue
* the new value of the date/time input
*/
set: function (newValue) {
var _this = this;
if (newValue !== this._value) {
this._value = newValue;
this._changed.forEach(function (onChanged) { return onChanged(_this._value); });
}
},
enumerable: true,
configurable: true
});
/**
* Emit a `change` event when the value of the input changes.
*/
DlDateTimeInputDirective.prototype._onChange = function () {
this.dateChange.emit(new DlDateTimeInputChange(this._value));
};
/**
* Format the input text using {@link DL_DATE_TIME_DISPLAY_FORMAT} and mark the control as touched.
*/
DlDateTimeInputDirective.prototype._onBlur = function () {
if (this._value) {
this._setElementValue(this._value);
}
this._touched.forEach(function (onTouched) { return onTouched(); });
};
/**
* Parse the user input into a possibly valid date.
* The model value is not set if the input is NOT one of the {@link DL_DATE_TIME_INPUT_FORMATS}.
* @param value
* Value of the input control.
*/
DlDateTimeInputDirective.prototype._onInput = function (value) {
var testDate = value === null || value === undefined || value === ''
? undefined
: moment$3(value, this._inputFormats, true);
this._isValid = testDate && testDate.isValid();
this.value = this._isValid ? this._dateAdapter.fromMilliseconds(testDate.valueOf()) : undefined;
};
/**
* @internal
*/
DlDateTimeInputDirective.prototype._setElementValue = function (value) {
if (value !== null && value !== undefined) {
this._renderer.setProperty(this._elementRef.nativeElement, 'value', moment$3(value).format(this._displayFormat));
}
};
/**
* @internal
*/
DlDateTimeInputDirective.prototype.registerOnChange = function (onChange) {
this._changed.push(onChange);
};
/**
* @internal
*/
DlDateTimeInputDirective.prototype.registerOnTouched = function (onTouched) {
this._touched.push(onTouched);
};
/**
* @internal
*/
DlDateTimeInputDirective.prototype.registerOnValidatorChange = function (validatorOnChange) {
this._onValidatorChange = validatorOnChange;
};
/**
* @internal
*/
DlDateTimeInputDirective.prototype.setDisabledState = function (isDisabled) {
this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
};
/**
* @internal
*/
DlDateTimeInputDirective.prototype.validate = function (control) {
return this._validator(control);
};
/**
* @internal
*/
DlDateTimeInputDirective.prototype.writeValue = function (value) {
this._isValid = true;
this.value = value;
this._setElementValue(value);
};
var DlDateTimeInputDirective_1;
DlDateTimeInputDirective.ctorParameters = function () { return [
{ type: Renderer2 },
{ type: ElementRef },
{ type: DlDateAdapter },
{ type: String, decorators: [{ type: Inject, args: [DL_DATE_TIME_DISPLAY_FORMAT,] }] },
{ type: Array, decorators: [{ type: Inject, args: [DL_DATE_TIME_INPUT_FORMATS,] }] }
]; };
__decorate([
Output()
], DlDateTimeInputDirective.prototype, "dateChange", void 0);
__decorate([
Input()
], DlDateTimeInputDirective.prototype, "dlDateTimeInputFilter", null);
__decorate([
HostListener('change')
], DlDateTimeInputDirective.prototype, "_onChange", null);
__decorate([
HostListener('blur')
], DlDateTimeInputDirective.prototype, "_onBlur", null);
__decorate([
HostListener('input', ['$event.target.value'])
], DlDateTimeInputDirective.prototype, "_onInput", null);
DlDateTimeInputDirective = DlDateTimeInputDirective_1 = __decorate([
Directive({
selector: 'input[dlDateTimeInput]',
providers: [
{ provide: NG_VALUE_ACCESSOR, useExisting: DlDateTimeInputDirective_1, multi: true },
{ provide: NG_VALIDATORS, useExisting: DlDateTimeInputDirective_1, multi: true }
]
}),
__param(3, Inject(DL_DATE_TIME_DISPLAY_FORMAT)),
__param(4, Inject(DL_DATE_TIME_INPUT_FORMATS))
], DlDateTimeInputDirective);
return DlDateTimeInputDirective;
}());
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* Import this module to allow date/time input.
* @internal
**/
var DlDateTimeInputModule = /** @class */ (function () {
function DlDateTimeInputModule() {
}
DlDateTimeInputModule = __decorate([
NgModule({
declarations: [DlDateTimeInputDirective],
imports: [CommonModule],
exports: [DlDateTimeInputDirective],
})
], DlDateTimeInputModule);
return DlDateTimeInputModule;
}());
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* Emitted when the value of a date/time picker changes.
*/
var DlDateTimePickerChange = /** @class */ (function () {
/**
* Constructs a new instance.
* @param newValue
* the new value of the date/time picker.
*/
function DlDateTimePickerChange(newValue) {
this._value = newValue;
}
Object.defineProperty(DlDateTimePickerChange.prototype, "value", {
/**
* Get the new value of the date/time picker.
* @returns the new value or null.
*/
get: function () {
return this._value;
},
enumerable: true,
configurable: true
});
return DlDateTimePickerChange;
}());
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* Work around for moment namespace conflict when used with webpack and rollup.
* See https://github.com/dherges/ng-packagr/issues/163
*
* Depending on whether rollup is used, moment needs to be imported differently.
* Since Moment.js doesn't have a default export, we normally need to import using
* the `* as`syntax.
*
* rollup creates a synthetic default module and we thus need to import it using
* the `default as` syntax.
*
* @internal
**/
var moment$4 = _moment;
/**
* Default implementation for the `day` view.
*/
var DlDayModelProvider = /** @class */ (function () {
function DlDayModelProvider() {
}
/**
* Receives input changes detected by Angular.
*
* @param changes
* the input changes detected by Angular.
*/
DlDayModelProvider.prototype.onChanges = function (
// @ts-ignore
changes) { };
/**
* Returns the `day` model for the specified moment in `local` time with the
* `active` day set to the first day of the month.
*
* The `day` model represents a month (42 days) as six rows with seven columns
* and each cell representing one-day increments.
*
* The `day` always starts at midnight.
*
* Each cell represents a one-day increment at midnight.
*
* @param milliseconds
* the moment in time from which the minute model will be created.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* the model representing the specified moment in time.
*/
DlDayModelProvider.prototype.getModel = function (milliseconds, selectedMilliseconds) {
var startOfMonth = moment$4(milliseconds).startOf('month');
var endOfMonth = moment$4(milliseconds).endOf('month');
var startOfView = moment$4(startOfMonth).subtract(Math.abs(startOfMonth.weekday()), 'days');
var rowNumbers = [0, 1, 2, 3, 4, 5];
var columnNumbers = [0, 1, 2, 3, 4, 5, 6];
var previousMonth = moment$4(startOfMonth).subtract(1, 'month');
var nextMonth = moment$4(startOfMonth).add(1, 'month');
var activeValue = moment$4(milliseconds).startOf('day').valueOf();
var selectedValue = selectedMilliseconds === null || selectedMilliseconds === undefined
? selectedMilliseconds
: moment$4(selectedMilliseconds).startOf('day').valueOf();
return {
viewName: 'day',
viewLabel: startOfMonth.format('MMM YYYY'),
activeDate: activeValue,
leftButton: {
value: previousMonth.valueOf(),
ariaLabel: "Go to " + previousMonth.format('MMM YYYY'),
classes: {},
},
upButton: {
value: startOfMonth.valueOf(),
ariaLabel: "Go to month view",
classes: {},
},
rightButton: {
value: nextMonth.valueOf(),
ariaLabel: "Go to " + nextMonth.format('MMM YYYY'),
classes: {},
},
rowLabels: columnNumbers.map(function (column) { return moment$4().weekday(column).format('dd'); }),
rows: rowNumbers.map(rowOfDays)
};
function rowOfDays(rowNumber) {
var currentMoment = moment$4();
var cells = columnNumbers.map(function (columnNumber) {
var dayMoment = moment$4(startOfView).add((rowNumber * columnNumbers.length) + columnNumber, 'days');
return {
display: dayMoment.format('D'),
ariaLabel: dayMoment.format('ll'),
value: dayMoment.valueOf(),
classes: {
'dl-abdtp-active': activeValue === dayMoment.valueOf(),
'dl-abdtp-future': dayMoment.isAfter(endOfMonth),
'dl-abdtp-past': dayMoment.isBefore(startOfMonth),
'dl-abdtp-selected': selectedValue === dayMoment.valueOf(),
'dl-abdtp-now': dayMoment.isSame(currentMoment, 'day'),
}
};
});
return { cells: cells };
}
};
/**
* Move the active `day` one row `down` from the specified moment in time.
*
* Moving `down` can result in the `active` day being part of a different month than
* the specified `fromMilliseconds`, in this case the month represented by the model
* will change to show the correct hour.
*
* @param fromMilliseconds
* the moment in time from which the next `day` model `down` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `day` one row `down` from the specified moment in time.
*/
DlDayModelProvider.prototype.goDown = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds).add(7, 'days').valueOf(), selectedMilliseconds);
};
/**
* Move the active `day` one row `up` from the specified moment in time.
*
* Moving `up` can result in the `active` day being part of a different month than
* the specified `fromMilliseconds`, in this case the month represented by the model
* will change to show the correct hour.
*
* @param fromMilliseconds
* the moment in time from which the next `day` model `up` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `day` one row `up` from the specified moment in time.
*/
DlDayModelProvider.prototype.goUp = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds).subtract(7, 'days').valueOf(), selectedMilliseconds);
};
/**
* Move the `active` day one cell `left` in the current `day` view.
*
* Moving `left` can result in the `active` day being part of a different month than
* the specified `fromMilliseconds`, in this case the month represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the `day` model to the `left` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `day` one cell to the `left` of the specified moment in time.
*/
DlDayModelProvider.prototype.goLeft = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds).subtract(1, 'day').valueOf(), selectedMilliseconds);
};
/**
* Move the `active` day one cell `right` in the current `day` view.
*
* Moving `right` can result in the `active` day being part of a different month than
* the specified `fromMilliseconds`, in this case the month represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the `day` model to the `right` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `day` one cell to the `right` of the specified moment in time.
*/
DlDayModelProvider.prototype.goRight = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds).add(1, 'day').valueOf(), selectedMilliseconds);
};
/**
* Move the active `day` one month `down` from the specified moment in time.
*
* Paging `down` will result in the `active` day being part of a different month than
* the specified `fromMilliseconds`. As a result, the month represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the next `day` model page `down` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `day` one month `down` from the specified moment in time.
*/
DlDayModelProvider.prototype.pageDown = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds).add(1, 'month').valueOf(), selectedMilliseconds);
};
/**
* Move the active `day` one month `up` from the specified moment in time.
*
* Paging `up` will result in the `active` day being part of a different month than
* the specified `fromMilliseconds`. As a result, the month represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the next `day` model page `up` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `day` one month `up` from the specified moment in time.
*/
DlDayModelProvider.prototype.pageUp = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds).subtract(1, 'month').valueOf(), selectedMilliseconds);
};
/**
* Move the `active` `day` to the last day of the month.
*
* The view or time range will not change unless the `fromMilliseconds` value
* is in a different day than the displayed decade.
*
* @param fromMilliseconds
* the moment in time from which the last day of the month will be calculated.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* a model with the last cell in the view as the active `day`.
*/
DlDayModelProvider.prototype.goEnd = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds)
.endOf('month').startOf('day').valueOf(), selectedMilliseconds);
};
/**
* Move the `active` `day` to the first day of the month.
*
* The view or time range will not change unless the `fromMilliseconds` value
* is in a different day than the displayed decade.
*
* @param fromMilliseconds
* the moment in time from which the first day of the month will be calculated.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* a model with the first cell in the view as the active `day`.
*/
DlDayModelProvider.prototype.goHome = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$4(fromMilliseconds).startOf('month').valueOf(), selectedMilliseconds);
};
return DlDayModelProvider;
}());
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* Work around for moment namespace conflict when used with webpack and rollup.
* See https://github.com/dherges/ng-packagr/issues/163
*
* Depending on whether rollup is used, moment needs to be imported differently.
* Since Moment.js doesn't have a default export, we normally need to import using
* the `* as`syntax.
*
* rollup creates a synthetic default module and we thus need to import it using
* the `default as` syntax.
*
* @internal
**/
var moment$5 = _moment;
/**
* Default implementation for the `hour` view.
*/
var DlHourModelProvider = /** @class */ (function () {
function DlHourModelProvider() {
}
/**
* Receives input changes detected by Angular.
*
* @param changes
* the input changes detected by Angular.
*/
DlHourModelProvider.prototype.onChanges = function (
// @ts-ignore
changes) { };
/**
* Returns the `hour` model for the specified moment in `local` time with the
* `active` hour set to the beginning of the day.
*
* The `hour` model represents a day (24 hours) as six rows with four columns
* and each cell representing one-hour increments.
*
* The hour always starts at the beginning of the hour.
*
* Each cell represents a one-hour increment starting at midnight.
*
* @param milliseconds
* the moment in time from which the minute model will be created.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* the model representing the specified moment in time.
*/
DlHourModelProvider.prototype.getModel = function (milliseconds, selectedMilliseconds) {
var startDate = moment$5(milliseconds).startOf('day');
var rowNumbers = [0, 1, 2, 3, 4, 5];
var columnNumbers = [0, 1, 2, 3];
var previousDay = moment$5(startDate).subtract(1, 'day');
var nextDay = moment$5(startDate).add(1, 'day');
var activeValue = moment$5(milliseconds).startOf('hour').valueOf();
var selectedValue = selectedMilliseconds === null || selectedMilliseconds === undefined
? selectedMilliseconds
: moment$5(selectedMilliseconds).startOf('hour').valueOf();
return {
viewName: 'hour',
viewLabel: startDate.format('ll'),
activeDate: activeValue,
leftButton: {
value: previousDay.valueOf(),
ariaLabel: "Go to " + previousDay.format('ll'),
classes: {},
},
upButton: {
value: startDate.valueOf(),
ariaLabel: "Go to " + startDate.format('MMM YYYY'),
classes: {},
},
rightButton: {
value: nextDay.valueOf(),
ariaLabel: "Go to " + nextDay.format('ll'),
classes: {},
},
rows: rowNumbers.map(rowOfHours)
};
function rowOfHours(rowNumber) {
var currentMoment = moment$5();
var cells = columnNumbers.map(function (columnNumber) {
var hourMoment = moment$5(startDate).add((rowNumber * columnNumbers.length) + columnNumber, 'hours');
return {
display: hourMoment.format('LT'),
ariaLabel: hourMoment.format('LLL'),
value: hourMoment.valueOf(),
classes: {
'dl-abdtp-active': activeValue === hourMoment.valueOf(),
'dl-abdtp-selected': selectedValue === hourMoment.valueOf(),
'dl-abdtp-now': hourMoment.isSame(currentMoment, 'hour'),
}
};
});
return { cells: cells };
}
};
/**
* Move the active `hour` one row `down` from the specified moment in time.
*
* Moving `down` can result in the `active` hour being part of a different day than
* the specified `fromMilliseconds`, in this case the day represented by the model
* will change to show the correct hour.
*
* @param fromMilliseconds
* the moment in time from which the next `hour` model `down` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `hour` one row `down` from the specified moment in time.
*/
DlHourModelProvider.prototype.goDown = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds).add(4, 'hour').valueOf(), selectedMilliseconds);
};
/**
* Move the active `hour` one row `up` from the specified moment in time.
*
* Moving `up` can result in the `active` hour being part of a different day than
* the specified `fromMilliseconds`, in this case the day represented by the model
* will change to show the correct hour.
*
* @param fromMilliseconds
* the moment in time from which the next `hour` model `up` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `hour` one row `up` from the specified moment in time.
*/
DlHourModelProvider.prototype.goUp = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds).subtract(4, 'hour').valueOf(), selectedMilliseconds);
};
/**
* Move the `active` hour one cell `left` in the current `hour` view.
*
* Moving `left` can result in the `active` hour being part of a different day than
* the specified `fromMilliseconds`, in this case the day represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the `hour` model to the `left` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `hour` one cell to the `left` of the specified moment in time.
*/
DlHourModelProvider.prototype.goLeft = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds).subtract(1, 'hour').valueOf(), selectedMilliseconds);
};
/**
* Move the `active` hour one cell `right` in the current `hour` view.
*
* Moving `right` can result in the `active` hour being part of a different day than
* the specified `fromMilliseconds`, in this case the day represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the `hour` model to the `right` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `hour` one cell to the `right` of the specified moment in time.
*/
DlHourModelProvider.prototype.goRight = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds).add(1, 'hour').valueOf(), selectedMilliseconds);
};
/**
* Move the active `hour` one day `down` from the specified moment in time.
*
* Paging `down` will result in the `active` hour being part of a different day than
* the specified `fromMilliseconds`. As a result, the day represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the next `hour` model page `down` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `hour` one day `down` from the specified moment in time.
*/
DlHourModelProvider.prototype.pageDown = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds).add(1, 'day').valueOf(), selectedMilliseconds);
};
/**
* Move the active `hour` one day `up` from the specified moment in time.
*
* Paging `up` will result in the `active` hour being part of a different day than
* the specified `fromMilliseconds`. As a result, the day represented by the model
* will change to show the correct year.
*
* @param fromMilliseconds
* the moment in time from which the next `hour` model page `up` will be constructed.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* model containing an `active` `hour` one day `up` from the specified moment in time.
*/
DlHourModelProvider.prototype.pageUp = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds).subtract(1, 'day').valueOf(), selectedMilliseconds);
};
/**
* Move the `active` `hour` to `11:00 pm` of the current day.
*
* The view or time range will not change unless the `fromMilliseconds` value
* is in a different day than the displayed decade.
*
* @param fromMilliseconds
* the moment in time from which `11:00 pm` will be calculated.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* a model with the `11:00 pm` cell in the view as the active `hour`.
*/
DlHourModelProvider.prototype.goEnd = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds)
.endOf('day')
.startOf('hour')
.valueOf(), selectedMilliseconds);
};
/**
* Move the `active` `hour` to `midnight` of the current day.
*
* The view or time range will not change unless the `fromMilliseconds` value
* is in a different day than the displayed decade.
*
* @param fromMilliseconds
* the moment in time from which `midnight` will be calculated.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* a model with the `midnight` cell in the view as the active `hour`.
*/
DlHourModelProvider.prototype.goHome = function (fromMilliseconds, selectedMilliseconds) {
return this.getModel(moment$5(fromMilliseconds).startOf('day').valueOf(), selectedMilliseconds);
};
return DlHourModelProvider;
}());
/**
* @license
* Copyright 2013-present Dale Lotts All Rights Reserved.
* http://www.dalelotts.com
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/dalelotts/angular-bootstrap-datetimepicker/blob/master/LICENSE
*/
/**
* Work around for moment namespace conflict when used with webpack and rollup.
* See https://github.com/dherges/ng-packagr/issues/163
*
* Depending on whether rollup is used, moment needs to be imported differently.
* Since Moment.js doesn't have a default export, we normally need to import using
* the `* as`syntax.
*
* rollup creates a synthetic default module and we thus need to import it using
* the `default as` syntax.
*
* @internal
**/
var moment$6 = _moment;
/**
* Default implementation for the `minute` view.
*/
var DlMinuteModelProvider = /** @class */ (function () {
function DlMinuteModelProvider() {
this.step = 5;
}
/**
* Receives `minuteStep` configuration changes detected by Angular.
*
* Changes where the value has not changed are ignored.
*
* Setting `minuteStep` to `null` or `undefined` will result in a
* minuteStep of `5`.
*
* @param changes
* the input changes detected by Angular.
*/
DlMinuteModelProvider.prototype.onChanges = function (changes) {
var minuteStepChange = changes['minuteStep'];
if (minuteStepChange
&& (minuteStepChange.previousValue !== minuteStepChange.currentValue)) {
this.step = minuteStepChange.currentValue;
if (this.step === null || this.step === undefined) {
this.step = 5;
}
}
};
/**
* Returns the `minute` model for the specified moment in `local` time with the
* `active` minute set to the beginning of the hour.
*
* The `minute` model represents an hour (60 minutes) as three rows with four columns
* and each cell representing 5-minute increments.
*
* The hour always starts at midnight.
*
* Each cell represents a 5-minute increment starting at midnight.
*
* The `active` minute will be the 5-minute increments less than or equal to the specified milliseconds.
*
* @param milliseconds
* the moment in time from which the minute model will be created.
* @param selectedMilliseconds
* the current value of the date/time picker.
* @returns
* the model representing the specified moment in time.
*/
DlMinuteModelProvider.prototype.getModel = function (milliseconds, selectedMilliseconds) {
var _this = this;
var startDate = moment$6(milliseconds).startOf('hour');
var currentMilliseconds = moment$6().valueOf();
var minuteSteps = new Array(Math.ceil(60 / this.step)).fill(0).map(function (zero, index) { return zero + index * _this.step; });
var minuteValues = minuteSteps.map(function (minutesToAdd) { return moment$6(startDate).add(minutesToAdd, 'minutes').valueOf(); });
var activeValue = moment$6(minuteValues.filter(function (value) { return value <= milliseconds; }).pop()).valueOf();
var nowValue = currentMilliseconds >= startDate.valueOf() && currentMilliseconds <= moment$6(startDate).endOf('hour').valueOf()
? moment$6(minuteValues.filter(function (value) { return value <= currentMilliseconds; }).pop()).valueOf()
: null;
var previousHour = moment$6(startDate).subtract(1, 'hour');
var nextHour = moment$6(startDate).add(1, 'hour');
var selectedValue = selectedMilliseconds === null || selectedMilliseconds === undefined
? selectedMilliseconds
: moment$6(minuteValues.filter(function (value) { return value <= selectedMilliseconds; }).pop()).valueOf();
var rows = new Array(Math.ceil(minuteSteps.length / 4))
.fill(0)
.map(function (zero, index) { return zero + index; })
.map(function (value) {
return { cells: minuteSteps.slice((value * 4), (value * 4) + 4).map(rowOfMinutes) };
});
return {
viewName: 'minute',
viewLabel: startDate.format('lll'),
activeDate: activeValue,
leftButton: {
value: previousHour.valueOf(),
ariaLabel: "Go to " + previousHour.format('lll'),
classes: {},
},
upButton: {
value: startDate.valueOf(),
ariaLabel: "Go to " + startDate.format('ll'),
classes: {},
},
rightButton: {
value: nextHour.valueOf(),
ariaLabel: "Go to " + nextHour.format('lll'),
classes: {},
},
rows: rows
};
function rowOfMinutes(stepMinutes) {
var minuteMoment = moment$6(startDate).add(stepMinutes, 'minutes');
return {
display: minuteMoment.format('LT'),
ariaLabel: minuteMoment.format('LLL'),
value: minuteMoment.valueOf(),
classes: {
'dl-abdtp-active': activeValue === minuteMoment.valueOf(),
'dl-abdtp-selected': selectedValue === minuteMoment.valueOf(),
'dl-abdtp-now': nowValue === minuteMoment.valueOf(),
}
};
}
};
/**
* Move the active `minute` one row `down` from the specified moment in time.
*
* Moving `down` can result in the `active` minute being part of a different hour than
* the specified `fromMilliseconds`, in this case the hour represented by the model
* will change to show the correct hour.
*
* @param fromMilliseconds
* the moment in time from which the next `minute` model `down` will be constructed.
* @param selectedMilliseconds
* the current value of the dat