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 datepicker import needs to be updated to:
import {datepicker} from 'eonasdan-bootstrap-datetimepicker'; import 'eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css!';

And, it currently fails with: "bootstrap-datetimepicker requires Moment.js to be loaded first", even with putting the imports in the right order...

Hello, is it there any solution for moment.js loading problem !?

In this example the DOM manipulation (initializing a bootstrap popover) is done in the bind() method, not attached().

After reading the Aurelia doc on Extending HTML, not sure if DOM manipulation shoudl be performed in the attached() or bind() methods. Can anyone shed some light on this?

https://www.danyow.net/jquery-ui-datepicker-with-aurelia/

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. :(