CODEWITHSUNDEEP
htmlbackbone.jsrequirejsmarionette
nbz
nbz

Reputation: 3938

Marionette.ItemView: Add Eonasdan datetimepicker

This is the first time I am doing any kind of web development so please do pardon any mistakes I make in the lingo.

I know how to add the datetimepicker when there is basic html and javascript file.

<div class='input-group date' id='datetimepicker1'>
     <input type='text' class="form-control" />
     <span class="input-group-addon"><span class="glyphicon glyphicon-calendar">
     </span>
     </span>
</div>
<script>
   $(function () {
        $('#datetimepicker1').datetimepicker();
        });
</script>

Now I have the same html element but it is backed with a Marionette.Itemview. How can I do the equivalent in that model?

define([
"backbone.marionette",
"jquery",
], function(Marionette, jQuery){

var TestForm = Marionette.ItemView.extend({
    template: TestTemplate,

    ui:{
        minDatePicker: "#minDatePicker"
    }
    return TestForm;    
}

Upvotes: 0

Views: 359

Answers (1)

nbz
nbz

Reputation: 3938

So I managed to figure it out after a lot of trial and error. Hope this helps someone else in the future.

define([
"backbone.marionette",
"jquery",
"moment",
"datetimepicker"
], function(Marionette, jQuery, moment, picker){

var TestForm = Marionette.ItemView.extend({
    template: TestTemplate,

ui:{
    minDatePicker: "#minDatePicker"
},

events:{
    "dp.change #minDatePicker": function(e) {
        this.ui.minDatePicker.data('DateTimePicker').setMinDate();
}

onRender:function() {
    this.ui.minDatePicker.datetimepicker();
}
    return TestForm;    
}

Upvotes: 1

Related Questions