3

Two way binding seems to not update the view unless you type in a text field. So I am using a vanilla date picker (rome). Like most date pickers it pops up a calendar to select your date.

Problem:

  • Once you click a date from the date picker it will properly place the date in the text box. It does not however update the two-way binding. But if I manually type a date in the text box the two binding works properly and is reflected up to schedule.html

schedule.html

<template>
  <require from="../../shared/components/date-range-picker"></require>
  <require from="../../shared/components/time-range-picker"></require>
  <div>${data.dateTime.openDate}</div> <!-- This doesn't update -->
  <date-range-picker containerless date-range.two-way="data.dateTime"></date-range-picker>
  <time-range-picker containerless time-range.two-way="data.dateTime"></time-range-picker>
</template>

date-range-picker.html

<template>
  <div class="form-group input-button-group input-group date">
    <input type="text" class="form-control" id="open" value.bind="dateRange.openDate" class="form-control"
      placeholder="Select a Start Date" />
    <span class="input-group-addon"><i class="icon-ion-calendar"></i></span>
  </div>
  <div class="form-group input-button-group input-group date">
    <input type="text" class="form-control" id="close" value.bind="dateRange.closeDate" class="form-control"
      placeholder="Select a Close Date" />
    <span class="input-group-addon"><i class="icon-ion-calendar"></i></span>
  </div>
</template>

date-range-picker.js

import { bindable, bindingMode } from 'aurelia-framework';
import rome from 'rome';
import 'rome/dist/rome.css';

export class DateRangePicker {
  @bindable({ defaultBindingMode: bindingMode.twoWay }) dateRange;

  attached() {
    const open = document.getElementById('open');
    const close = document.getElementById('close');

    rome(open, {
      time: false,
      dateValidator: rome.val.beforeEq(close),
    });

    rome(close, {
      time: false,
      dateValidator: rome.val.afterEq(open),
    });
  }
}

1 Answer 1

1

You could dispatch the change event of the input element. I've done this using a customAttribute, but you can still use customElements. Like this:

rome.js

import {inject} from 'aurelia-dependency-injection';
import {customAttribute} from 'aurelia-templating';

@inject(Element)
@customAttribute('rome')
export class Rome {

  constructor(element) {
    this.element = element;
  }

  attached() {
    let picker = rome(this.element);
    picker.on('data', () => {
      this.element.dispatchEvent(new Event('change'));
    });
  }
}

Usage

<require from='./rome'></require>

<input type="text" rome value.bind="selectedDate">
${selectedDate}
5
  • I made the changes but the bind still doesn't happen.
    – allencoded
    Jun 10, 2016 at 15:21
  • Nevermind got it to work now what to do if they are null
    – allencoded
    Jun 10, 2016 at 16:32
  • sorry, I didn't understand your question. Could you explain better?
    – Fabio
    Jun 10, 2016 at 16:35
  • If you have a pre-populate date and time in the text box and then click to change is where it doesn't update. Your fix worked great on that part. But you fix throws an error when/if the text box is empty. Unhandled rejection TypeError: Cannot read property 'text' of undefined
    – allencoded
    Jun 10, 2016 at 16:55
  • It seems fine to me gist.run/?id=c32f322b1f56e6f0a83679512247af7b. Can you reproduce the error in this Gist?
    – Fabio
    Jun 10, 2016 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.