如何以两种方式将两个元素绑定到一个日期模型 [英] How to two way bind two elements to one date model

问题描述

我有两个日期选择器元素，一个是几个月，一个是几年，我想在它们和javascript Date对象之间设置两种方式的绑定，我的问题如下:

I have two elements of date picker, one for months and one for years, I want to set two way binding between them and a javascript Date object, my question is as follows:

是否可以这样做?如果是的话，怎么办? 如果没有，我至少如何模仿这种行为?

Is it possible to do so? and if so how? If not how can I emulate this behavior at least?

代码示例:

<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)的数组形式获取数据.

Both selectors get their data in the form of arrays with either years or months (0-11).

推荐答案

最简单的方法是使用setter创建一个fecha属性.因此，在您的组件中，您有

The easy way is to have a property fecha with setter. So in your Component you have

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

如果您具有ngModel，则可以拆分[(ngModel)]

If you have ngModel, you can split the [(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对象的代码(如果您使用String，请尝试更改代码)

Or you can create a custom form control to control the value. I don't know if your exp.StartDate is or not a javascript Date. I write a code with a custom form control that expect a javaScript Date Object (if you use a String try to change the code)

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;
  }
}

这篇关于如何以两种方式将两个元素绑定到一个日期模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！