Nifty - Form Components - Time

Question

I am trying to implentment nifty timepicker, Ive got the pop-up bit working however it doesn't seem to be binding that to my inputbox.

1. Here is it working online: http://www.themeon.net/nifty/v2.2.3/forms-components.html
2. Looking within Developer tools I managed to grab the code and where the files are stored: http://jdewit.github.io/bootstrap-timepicker/ (I grabbed the css/js files, these are stored locally on my machine.

Here is my code, it is a custom element in aurelia.io

time.js

import {customElement, bindable, inject, bindingMode} from 'aurelia-framework';
import {activationStrategy} from 'aurelia-router';

@customElement('time')
@bindable({name: 'value', attribute: 'value', defaultValue: '', defaultBindingMode: bindingMode.twoWay})
@inject(Element)
export class Time {
    constructor(element) {
        this.element = element;
    }

    valueChanged() {
        var currentvalue = $('.input-group.date', this.element).val();

        if (currentvalue !== this.value) {
            $('.input-group.date', this.element).timepicker('update', this.value);
        }

        alert("currentvalue " + currentvalue);
        alert("selected " + this.value);
    }

    bind(){
        var options = {
            minuteStep: 5,
            showInputs: false,
            disableFocus: true
        };

        $('.input-group.date', this.element).timepicker(options).timepicker('update', this.value);

        $('.input-group.date', this.element).on('changeTime', (event) => {           
            this.value = $('.input-group.date', this.element).timepicker('getTime');
    });
    }
}

time.html

<template>
    <div class="input-group date">
        <input type="text" class="form-control" disabled.bind="readonly"/>
        <span class="input-group-addon"><i class="fa fa-clock-o fa-lg"></i></span>
    </div>
</template>

Where its referenced:

<time value.bind="baseContent.ValidToTime" />

The pop-up as I said does work, just not the binding, I think its going to be something stupid but I cant see it myself.

UPDATE - Altered a couple of things, its slowly getting there, seems a bit buggy from my end

1. Updates textbox, but doesn't pass updated value back up to basecontent (where its called from) - using bindingMode.twoway
2. When I update the textbox rather than use the widget I have to click off to get it to update the widget. 14:35 = should be being updated at the same time.

time.js

import {customElement, bindable, inject, bindingMode} from 'aurelia-framework';
import {activationStrategy} from 'aurelia-router';

@customElement('time')
@bindable({name: 'value', attribute: 'value', defaultValue: '', defaultBindingMode: bindingMode.twoWay})
@bindable({name: 'readonly', attribute: 'disabled', defaultValue: false, defaultBindingMode: bindingMode.oneWay})
@inject(Element)
export class Time {
    constructor(element) {
        this.element = element;
    }

    valueChanged() {
        var currentvalue = $('.timepicker', this.element).val();

        if (currentvalue !== this.selected) {
            $('.timepicker', this.element).timepicker('setTime', this.value);
        }
    }

    bind() {
        var options = {
            defaultTime: 'value',
            minuteStep: 1,
            disableFocus: true,
            maxHours: 24,
            showMeridian: false
    };

        $('.timepicker', this.element).timepicker(options).timepicker('setTime', this.value);

        if(this.readonly){
            $('.timepicker', this.element).attr('readonly', 'readonly');
        }

        $('.timepicker', this.element).timepicker().on('changeTime.timepicker', function() {
            this.value = $('.timepicker', this.element).data("timepicker").getTime();
        });
    }
}

Answer 1

Well, Clare, you've got an issue with this.

$('.timepicker', this.element)
    .timepicker()
    .on('changeTime.timepicker', function() {
         this.value = $('.timepicker', this.element).data("timepicker").getTime();
    //   ^^^^ Ouch, wrong context.   
    })
;

You should use an arrow function there

$('.timepicker', this.element)
    .timepicker()
    .on('changeTime.timepicker', () => {
         this.value = $('.timepicker', this.element).data("timepicker").getTime();
    })
;

Or do it old-school, though you need not with var self = this; and so on.

BTW you can also take the value out of the event parameter.

$el.timepicker(options)
     .val(this.formatToGMT(this.value))
     .on('changeTime.timepicker', (e) => {
        let update = {hour: e.time.hours,minute: e.time.minutes, second: e.time.seconds};
        this.value = moment(that.value).utcOffset(0).set(update).utc();
     });