Angular 7是否没有DateTime选择器？ [英] Are there no DateTime picker for Angular 7?

问题描述

我找不到Angular 7的任何DateTime选择器。
所以我决定将Date Picker和Time Picker结合起来

现在如何在 createdStartDate 文本框中显示选定的日期和时间？

解决方案

如果需要，可以将ngbDropDown，ngbDatePicker和ngbTimePicker组合使用

为此，您需要两个变量和一个吸气剂

 日期：任意； 
 time：any = {hour：0，minute：0}; 
 
 _value; 
标签； 
 ngOnInit（）
 {
 this.getDatetime（）
} 
 getDatetime（）{
 let value = null; 
 if（！this.date）{
 if（！this.time）value = yyyy / MM / dd hh：mm; 
否则
的值= 
 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 我制作了自定义表单控件

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

这篇关于Angular 7是否没有DateTime选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！