CODEWITHSUNDEEP
angulartypescriptdatetime
Midnight_Blaze
Midnight_Blaze

Reputation: 501

How to two way bind two elements to one date model

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?

Code example:

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

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

Upvotes: 0

Views: 228

Answers (1)

Eliseo
Eliseo

Reputation: 57941

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

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

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

Upvotes: 1

Related Questions