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.
- Here is it working online: http://www.themeon.net/nifty/v2.2.3/forms-components.html
- 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
- Updates textbox, but doesn't pass updated value back up to basecontent (where its called from) - using bindingMode.twoway
- 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();
});
}
}