Question

我有两个日期选择器元素，一个用于月份，一个用于多年，我想在它们和一个javascript Date对象之间设置双向绑定，我的问题如下：

有可能这样做吗？如果是这样怎么样？如果不是，我怎么能至少模仿这种行为？

代码示例：

<select class="selectpicker form-control" required [(ngModel)]="exp.StartDate.Month" >
   <option *ngFor="let obj of months" [value]="obj">{{obj}}</option>>
</select>


<select class="selectpicker form-control" required [(ngModel)]="exp.StartDate.Year">
   <option *ngFor="let obj of years" [value]="obj">{{obj}}</option>>
</select>

两个选择器都以数组的形式获取数据，数年或数月（0-11）。

Answer 1

简单的方法是拥有一个带有二传手的财产。所以在你的组件中你有

year:number;
month:number;
get fecha():any
{
    return new Date(this.year,this.month-1,1)
}
console.log(year,month,fecha);

如果您有ngModel，则可以拆分[（ngModel）]

<select [value] = "exp.StartDate.Month" (input)="updateMonth($event.target.value)" >
...
</select>
<select [value] = "exp.StartDate.Year" (input)="updateYear($event.target.value)">

//In your component
updateMonth(month:number)
  {
    this.exp.StartDate.Month=month;
    this.exp.StartDate.Value=this.exp.StartDate.Year+'-'+this.exp.StartDate.Mont+'-1';
  }
  updateYear(year:number)
  {
    this.exp.StartDate.Year=year;
    this.exp.StartDate.Value=this.exp.StartDate.Year+'-'+this.exp.StartDate.Mont+'-1';
  }

或者您可以创建自定义表单控件来控制值。我不知道你的exp.StartDate是否是一个javascript日期。我编写了一个带有自定义表单控件的代码，该控件需要一个javaScript Date Object（如果你使用String尝试更改代码）

import { Component, forwardRef, HostBinding, Input } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

//Really TODO change input to select
@Component({
  selector: 'app-month-year',
  template: `
    <input [disabled]="disabled" [value] = "month" (input)="updateMonth($event.target.value)" >
    <input [disabled]="disabled" [value] = "year" (input)="updateYear($event.target.value)">
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MonthYearComponent),
      multi: true
    }
  ]
})
export class MonthYearComponent implements ControlValueAccessor {

  month:number;
  year:number;


  // Allow the input to be disabled, and when it is make it somewhat transparent.
  @Input() disabled = false;
  @Input('value') value;

  onChange: any = () => { };
  onTouched: any = () => { };

  updateMonth(month:number)
  {
    this.month=month;
    this.value=this.getDate(); //<--change the "value"
    this.onChange(this.value);
  }
  updateYear(year:number)
  {
    this.year=year;
    this.value=this.getDate(); //change the value
    this.onChange(this.value);

  }

  constructor() { }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) { 
    this.onTouched = fn;
  }

  writeValue(value) { //<--when receive a value
    if (value) {
      this.month=value.getMonth()+1;
      this.year=value.getFullYear();

      }

  }
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }
  //It's better use a function to return the value
  private getDate() 
  {
    const date=new Date();
    date.setFullYear(this.year,this.month-1,1);
    return date;
  }
}

如何将两个元素绑定到一个日期模型

1 个答案: