且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何以两种方式将两个元素绑定到一个日期模型

更新时间:2023-10-06 14:03:52

最简单的方法是使用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;
  }
}