Skip to content

Instantly share code, notes, and snippets.

@charlespockert
Created May 5, 2015 16:20
Show Gist options
  • Save charlespockert/6a1fef3f546f6d37d1dc to your computer and use it in GitHub Desktop.
Save charlespockert/6a1fef3f546f6d37d1dc to your computer and use it in GitHub Desktop.
Bootstrap datepicker for Aurelia
<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>
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);
});
}
}
@ashanvabs
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment