I couldn't find any DateTime picker for Angular 7. So I decided to combine the Date Picker and Time Picker
https://ng-bootstrap.github.io/#/components/datepicker
https://ng-bootstrap.github.io/#/components/timepicker
<ng-template #dateTimePicker>
<ngb-datepicker #createdStartDate name="datepicker"></ngb-datepicker>
<ngb-timepicker #createdStartTime name="timepicker" [meridian]="true"></ngb-timepicker>
</ng-template>
<form [formGroup]="managePromotionsForm"
<div class="col-md-6">
<div class="row form-group">
<label class="col-md-4 control-label" for="createdStartDate" translate="">Created From </label>
<div class="col-md-6">
<div class="input-group">
<input readOnly class="form-control" id="createdStartDate" placeholder="From Date"
[formControl]="controls['createdStartDate']">
<div class="input-group-append">
<button class="btn btn-outline-secondary calendar" [ngbPopover]="dateTimePicker" type="button"></button>
</div>
</div>
</div>
</div>
</div>
</form>
This is what I have so far
Now how to display the selected date and time on the createdStartDate
textbox?
If you want you can use a combined to ngbDropDown, ngbDatePicker and ngbTimePicker
For this you need two variables and one getter
date: any;
time:any= {hour:0,minute:0};
_value;
label;
ngOnInit()
{
this.getDatetime()
}
getDatetime() {
let value = null;
if (!this.date) {
if (!this.time) value = "yyyy/MM/dd hh:mm";
else
value =
"yyyy/MM/dd " +
("0" + this.time.hour).slice(-2) +
":" +
("0" + this.time.minute).slice(-2);
}
if (!value) {
value = new Date(Date.UTC(
this.date.year,
this.date.month - 1,
this.date.day,
this.time ? this.time.hour : 0,
this.time ? this.time.minute : 0
);
this._value=value;
} else
this._value=null
this.form.get("control").setValue(this._value);
this.label=value;
}
<form [formGroup]="form">
<div ngbDropdown>
<button class="datepicker btn btn-link" ngbDropdownToggle>{{_value?(_value|date:'medium'):label}}</button>
<div ngbDropdownMenu >
<ngb-datepicker #dp [(ngModel)]="date" (dateSelect)="getDatetime()"[ngModelOptions]="{standalone:true}" ></ngb-datepicker>
<ngb-timepicker [ngModel]="time" (ngModelChange)="time=$event;getDatetime()"[ngModelOptions]="{standalone:true}"></ngb-timepicker>
</div>
</div>
<button class="btn btn-primary">submit</button>
See in stackblitz
NOTE: This is a case that we would create create a custom form control to not make so dependency
Update for curiosity, in stackblitz I make the custom form control