Angular 7에는 DateTime 선택기가 없습니까?

Question

Angular 7에 대한 DateTime 선택기를 찾을 수 없습니다. 그래서 날짜 선택기와 시간 선택기를 결합하기로 결정했습니다.

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>

이것이 내가 지금까지 가지고있는 것입니다.

이제 createdStartDate텍스트 상자 에 선택한 날짜와 시간을 표시하는 방법은 무엇입니까?

Answer 1

원하는 경우 ngbDropDown, ngbDatePicker 및 ngbTimePicker에 결합 된 것을 사용할 수 있습니다.

이를 위해서는 두 개의 변수와 하나의 게터가 필요합니다.

  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>

stackblitz 에서 참조

참고 : 이것은 종속성을 만들지 않도록 사용자 지정 양식 컨트롤을 만드는 경우입니다.

호기심에 대한 업데이트 , stackblitz 에서 사용자 지정 양식 컨트롤을 만듭니다.

Answer 2

바인딩 할 수있는 양식 요소를 작성하려는 경우. 더 나은 방법은 별도의 구성 요소를 만들고 제어 값 접근 자를 구현하는 것 입니다.

그런 다음 구성 요소를 양식 요소로 사용하고 ngModal 또는 양식 컨트롤을 여기에 바인딩 할 수 있습니다.