Change a date from 2 inputs, binding two-way recursive-error

Help Requests
1

Hi all,

anyone know why when i set a date from moment and “this.test” (my variable") and it’s also binded in the view it crashs?

image
image.png1662×809 113 KB

Thank you all,
Andrea

2

I got it.
There is a problem with the binding.

value.two-way became recursive but :

how can do change a date from input dialog or another input( nights)

image
image.png539×550 9.5 KB

3

If i change night the “DateEnd” change correctly but the control is value.two-way so it continues for a loop to raise the property and go in error…

How can set the date so?

4

You will need some guard condition to prevent syncing, if you can provide a repro of what you want to achieve, it will be easier for folks to explain and help.

5

The right way to solve this is using a value converter that has a single object for the date.

export class App {
  date = new Date();
}

export class AsDateValueConverter {
  
  // we store the value to capture current state
  value = new Date();
  
  // to view expects a Date object
  toView(date) {
    
    // if the value exists and is different from the current value
    if (date && !this.equal(date, this.value)) {
      
      // we update the current value
      this.value = date;
    }
    
    // and we pass the value of the current value (not the incoming value) as a string to the view
    console.log('toView', this.toString(this.value));
    return this.toString(this.value);
  }
  
  // fromView expects a date string
  fromView(dateString) {
    
    // we parse the date
    const date = new Date(dateString);
    
    // if the date is valid and different from the current value
    if (!isNaN(date.getTime()) && !this.equal(date, this.value)) {
      
      // we update the current value
      this.value = date;
    }
    
    // and we pass the value of the current value to the view model
    console.log('fromView', this.value)
    return this.value;
  }
  
  // we define a custom function for determining how the value should be displayed in the view
  toString(date) {
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    const day = date.getDate();
    return `${year}-${month < 10 ? '0' : ''}${month}-${day < 10 ? '0' : ''}${day}`;
  }
  
  // we test for equality based on what results in a similar view to prevent infinite loops
  equal(dateOne, dateTwo) {
    return this.toString(dateOne) === this.toString(dateTwo);
  }
}

Running gist here: https://gist.run/?id=040775f06aba5e955afd362ee60863aa

1 Like