Bootstrap datepicker for Aurelia

date-picker.html

<template>
    <div class="input-group date">
        <input type="text" value.bind="value" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
    </div>
</template>

date-picker.js

import {inject, customElement, bindable} from 'aurelia-framework';
import moment from 'moment';
import {datepicker} from 'eonasdan/bootstrap-datetimepicker';
import 'eonasdan/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css!';

@inject(Element)
@bindable("value")
export class DatePicker {

    @bindable format = "DD/MM/YY";

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

    attached() {
        this.datePicker = $(this.element).find('.input-group.date')
            .datetimepicker({
                format: this.format,
                showClose: true,
                showTodayButton: true
            });

        this.datePicker.on("dp.change", (e) => {
            this.value = moment(e.date).format(this.format);
        });
    }
}

The code's use of value here is incorrect.

1. The html should not bind the input to anything (i.e. remove value.bind="value"). The datetimepicker already controls the input element value, and binding to the raw data value breaks formatting.
2. The js should update the datetimepickervalue to the type the source model is expecting a date or moment e.g.

    this.datePicker.on("dp.change", (e) => {
        //this.value = moment(e.date).format(this.format);       source model wants a Date, formatting handled by datetimepicker
        this.value = e.date.toDate();
    });

hey could you please explain how to do localizing
I was try to change

this.datePicker = $(this.element).find('.input-group.date')
            .datetimepicker({
                locale: 'nb',
                format: this.format,
                showClose: true,
                showTodayButton: true
            });

but it wont help. :(