Click here to Skip to main content
15,560,045 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hey guys, I have this on my index:

XML
<script type="text/x-handlebars" data-template-name="components/datetime-picker">
        <div class="form-group">
            <div class='input-group date'>
                {{#if iconOnRight}}
                <input type='text' {{bind-attr placeholder=placeholder}} class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                {{else}}
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                <input type='text' {{bind-attr placeholder=placeholder}} class="form-control" />
                {{/if}}
            </div>
        </div>
    </script>



and I'm calling it like this:

XML
<div>
                                    <label for="inputEventStart">2.4. Event/Meeting start date and time (*):</label>
                                    {{datetime-picker datetime=EventStartDate iconOnRight=false}}
                                </div>



this is the code for the component:

C#
App.DatetimePickerComponent = Ember.Component.extend({
    pickerWrapper: null,
    pickerData: null,
    classNames: ['input-small'],
    format: "DD/MM/YYYY HH:mm",
    placeholder: Ember.computed.alias('format'),
    iconOnRight: true,

    /**
     * Create function */
    didInsertElement: function () {
        var self = this;
        var format = this.get('format');

        var pickerWrapper = this.$().datetimepicker({
            format: format
        });
        this.set('pickerWrapper', pickerWrapper);

        var pickerData = pickerWrapper.data("DateTimePicker");
        this.set('pickerData', pickerData);

        if (this.get('datetime'))
            pickerData.setDate(this.get('datetime'));

        pickerWrapper.on('dp.change', function (ev) {
            //self.sendAction('action', ev.format());
            self.set('datetime', ev.date);
        });

    },

    datetimeChanged: function () {
        // get model datetime
        var modelDatetime = this.get('datetime');
        // get picker datetime
        var picker = this.get('pickerData');
        var pickerDatetime = picker.getDate();
        // if not the same the overwrite model over picker
        if (modelDatetime != pickerDatetime) {
            picker.setDate(modelDatetime);
        }
    }.observes('datetime')

});


What's happenning is that the input is there with the glyphicons and all but the picker doesn't show when I click on the input... most of this code I got from someone else since I'm really new to ember to I guess the problem will be something like the way things are connected or how I'm implementing them... help please.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900