core/date-time-picker/date-time-picker.component.ts
ControlValueAccessor
Validator
OnDestroy
| providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DateTimePickerComponent), multi: true
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => DateTimePickerComponent), multi: true
}
|
| selector | c8y-date-time-picker |
| templateUrl | ./date-time-picker.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor(cd: ChangeDetectorRef)
|
||||||
|
Parameters :
|
| adaptivePosition |
Type : boolean
|
Default value : false
|
| config |
Type : DateAndTimeOptions
|
Default value : {
showMeridian: false,
showMinutes: true,
showSeconds: false,
showSpinners: false
}
|
| dateInputFormat |
Type : string
|
Default value : 'YYYY-MM-DD'
|
| dateType |
Type : DateType
|
Default value : 'DateAndTime'
|
|
Specifies the type of date input. |
| maxDate |
Type : string
|
| minDate |
Type : string
|
| placeholder |
Type : string
|
| size |
Type : string
|
| onDateSelected |
Type : EventEmitter<PickedDates>
|
| handleMouseWheel | ||||||
handleMouseWheel(event: WheelEvent)
|
||||||
|
Parameters :
Returns :
void
|
| hide |
hide()
|
|
Returns :
void
|
| nextDay |
nextDay()
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| previousDay |
previousDay()
|
|
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(onTouched: any)
|
||||||
|
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(disabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| validate | ||||||
validate(_control: AbstractControl)
|
||||||
|
Parameters :
Returns :
ValidationErrors | null
|
| writeValue | ||||||
writeValue(value: string)
|
||||||
|
Control Value Accessor - If form value changes by external factor, update date property and internal form with new value.
Parameters :
Returns :
void
|
| date |
Type : Date
|
| datepicker |
Type : BsDatepickerDirective
|
Decorators :
@ViewChild(BsDatepickerDirective)
|
| defaultPlaceholder |
Default value : gettext('Select a date…')
|
| form |
Type : FormGroup
|
| maxDate |
Type : Date
|
| minDate |
Type : Date
|
| onChange |
Type : function
|
Default value : () => {...}
|
| onTouched |
Type : function
|
Default value : () => {...}
|
| _minDate | ||||||
set_minDate(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| _maxDate | ||||||
set_maxDate(value: string)
|
||||||
|
Parameters :
Returns :
void
|
<div
class="datetime-picker"
[ngSwitch]="dateType"
>
<div
class="d-contents"
*ngSwitchCase="'DateAndTime'"
[closeDatepicker]="datepicker"
>
<div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
<input
class="form-control"
[placeholder]="placeholder || defaultPlaceholder | translate"
bsDatepicker
[outsideClick]="false"
[bsConfig]="{
customTodayClass: 'today',
dateInputFormat: dateInputFormat,
adaptivePosition: adaptivePosition
}"
[formControl]="form.get('date')"
(blur)="onTouched()"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
<timepicker
class="form-group {{ size ? 'form-group-' + size : '' }}"
[formControl]="form.get('time')"
[showSeconds]="config.showSeconds"
[showSpinners]="config.showSpinners"
[showMeridian]="config.showMeridian"
(wheel)="handleMouseWheel($event)"
></timepicker>
</div>
<div
class="d-contents"
*ngSwitchCase="'Date'"
[closeDatepicker]="datepicker"
>
<div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
<input
class="form-control"
[placeholder]="placeholder || defaultPlaceholder | translate"
bsDatepicker
[outsideClick]="false"
[bsConfig]="{
customTodayClass: 'today',
dateInputFormat: dateInputFormat,
adaptivePosition: adaptivePosition
}"
[formControl]="form.get('date')"
(blur)="onTouched()"
[minDate]="minDate"
[maxDate]="maxDate"
/>
</div>
</div>
<div
class="d-contents"
*ngSwitchCase="'DateRange'"
>
<div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
<input
class="form-control"
placeholder="{{ 'Select a date range' | translate }}"
[formControl]="form.get('date')"
[bsConfig]="{
customTodayClass: 'today',
adaptivePosition: true,
rangeInputFormat: dateInputFormat
}"
bsDaterangepicker
/>
</div>
</div>
<div
class="d-contents"
*ngSwitchCase="'Time'"
>
<timepicker
class="form-group {{ size ? 'form-group-' + size : '' }}"
[formControl]="form.get('time')"
[showSeconds]="config.showSeconds"
[showSpinners]="config.showSpinners"
[showMeridian]="config.showMeridian"
[minutesPlaceholder]="'MM`MINUTES`' | translate"
[hoursPlaceholder]="'HH`HOURS`' | translate"
[secondsPlaceholder]="'SS`SECONDS`' | translate"
(wheel)="handleMouseWheel($event)"
></timepicker>
</div>
<div *ngSwitchCase="'SingleDateRequired'">
<div class="form-group {{ size ? 'form-group-' + size : '' }}">
<c8y-date-picker (onDateSelected)="onDateSelected.emit($event)"></c8y-date-picker>
</div>
</div>
</div>