angulardatetimepickerngb-datepicker

Are there no DateTime picker for Angular 7?


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

DateTimePicker

Now how to display the selected date and time on the createdStartDate textbox?


Solution

  • 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