core/date-time-picker/date-time-picker.component.ts
ControlValueAccessor
Validator
OnInit
AfterViewInit
OnDestroy
| providers |
)
)
|
| selector | c8y-date-time-picker |
| standalone | true |
| imports |
CloseDatePickerDirective
BsDatepickerModule
FormsModule
ReactiveFormsModule
TimepickerModule
DatePickerComponent
C8yTranslatePipe
|
| templateUrl | ./date-time-picker.component.html |
Properties |
Methods |
Inputs |
Outputs |
Accessors |
constructor(cd: ChangeDetectorRef, dateFormatService: DateFormatService)
|
|||||||||
|
Parameters :
|
| adaptivePosition |
Type : boolean
|
Default value : false
|
|
If true, the datepicker will adapt its position based on available space. This is useful for responsive designs where the datepicker should not overflow the viewport. |
| config |
Type : DateAndTimeOptions
|
Default value : {
showMinutes: true,
showSeconds: false,
showSpinners: false
}
|
| dateInputFormat |
Type : string
|
|
The format in which the date input should be displayed. E.g. 'dd/MM/yyyy' or 'MM/dd/yyyy'. This format is used to parse and display the date in the input field. |
| dateType |
Type : DateType
|
Default value : 'DateAndTime'
|
|
Specifies the type of date input. |
| maxDate |
Type : string
|
| minDate |
Type : string
|
| placeholder |
Type : string
|
| size |
Type : string
|
|
Specifies the size of the date-time picker. |
| onDateSelected |
Type : EventEmitter<PickedDates>
|
| datepickerShown | |||||
datepickerShown(undefined: literal type)
|
|||||
|
Parameters :
Returns :
void
|
| handleMouseWheel | ||||||
handleMouseWheel(event: WheelEvent)
|
||||||
|
Parameters :
Returns :
void
|
| hide |
hide()
|
|
Returns :
void
|
| nextDay |
nextDay()
|
|
Returns :
void
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onTimeChange | ||||||
onTimeChange(time: Date)
|
||||||
|
Parameters :
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 |
Type : unknown
|
Default value : gettext('Select a date…')
|
| form |
Type : FormGroup
|
| maxDate |
Type : Date
|
|
The maximum date that can be selected in the date-time picker. This property is used to restrict the selection of dates beyond this value. |
| minDate |
Type : Date
|
|
The minimum date that can be selected in the date-time picker. This property is used to restrict the selection of dates before this value. |
| onChange |
Type : function
|
Default value : () => {...}
|
| onTouched |
Type : function
|
Default value : () => {...}
|
| time |
Type : Date | null
|
| _minDate | ||||||
set_minDate(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| _maxDate | ||||||
set_maxDate(value: string)
|
||||||
|
Parameters :
Returns :
void
|
| dateControl |
getdateControl()
|
<div class="datetime-picker">
@switch (dateType) {
@case ('DateAndTime') {
<div
class="d-contents"
[closeDatepicker]="datepicker"
>
<div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
<input
class="form-control"
data-cy="bootstrap-date-input"
[placeholder]="placeholder || defaultPlaceholder | translate"
bsDatepicker
[outsideClick]="false"
[bsConfig]="{
customTodayClass: 'today',
dateInputFormat: dateInputFormat,
adaptivePosition: adaptivePosition
}"
[formControl]="dateControl"
(blur)="onTouched()"
[minDate]="minDate"
[maxDate]="maxDate"
(onShown)="datepickerShown($event)"
/>
</div>
<timepicker
class="form-group {{ size ? 'form-group-' + size : '' }}"
[(ngModel)]="time"
(ngModelChange)="onTimeChange($event)"
[showSeconds]="config.showSeconds"
[showSpinners]="config.showSpinners"
[showMeridian]="config.showMeridian"
(wheel)="handleMouseWheel($event)"
></timepicker>
</div>
}
@case ('Date') {
<div
class="d-contents"
[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]="dateControl"
(blur)="onTouched()"
[minDate]="minDate"
[maxDate]="maxDate"
(onShown)="datepickerShown($event)"
/>
</div>
</div>
}
@case ('DateRange') {
<div class="d-contents">
<div class="form-group datepicker {{ size ? 'form-group-' + size : '' }}">
<input
class="form-control"
placeholder="{{ 'Select a date range' | translate }}"
[formControl]="dateControl"
[bsConfig]="{
customTodayClass: 'today',
adaptivePosition: true,
rangeInputFormat: dateInputFormat
}"
bsDaterangepicker
/>
</div>
</div>
}
@case ('Time') {
<div class="d-contents">
<timepicker
class="form-group {{ size ? 'form-group-' + size : '' }}"
[(ngModel)]="time"
(ngModelChange)="onTimeChange($event)"
[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>
}
@case ('SingleDateRequired') {
<div class="d-contents">
<div class="form-group {{ size ? 'form-group-' + size : '' }}">
<c8y-date-picker (onDateSelected)="onDateSelected.emit($event)"></c8y-date-picker>
</div>
</div>
}
}
</div>