CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatepicker
Drogon
Drogon

Reputation: 360

datetimepicker not showing up in bootstrap dialog

I am using the datetimepicker from http://eonasdan.github.io/bootstrap-datetimepicker/ I have a bootstrap dialogbox which contains a textfield and an ID. I have exactly copied it, but my datetimepicker does not show up... Does anyone have an idea?

Javascript/HTML:

BootstrapDialog.show({
                //Set properties
                draggable:true,
                title: cObj.title, 
                message: function (dialogItself) {
                    var form = $('<form id="createEventForm"> </form>');
                    var klantNaam = $('<input id="titleDrop" type="text" />');
                    var description = $('<textarea id="descriptionDrop"></textarea>');
                    var employee = $('<select class="form-control" id="employee">');
                    var starttime = $('<input id="starttime" type="text" class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>');
                    var startTimeDiv =
                     $('<div/>', {
                        id: 'datetimepicker4',
                        class: 'input-group date',
                        html: starttime
                    });
                    var endtime = $('<input type="text" class="endtime" id="endtime"/>');
                dialogItself.setData('field-klant-naam', klantNaam);
                dialogItself.setData('field-description', description);    // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
                dialogItself.setData('select-user', employee);   // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
                dialogItself.setData('starttime', startTimeDiv);   // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
                dialogItself.setData('endtime', endtime);
                form.append('<label>Klant naam</label>').append(klantNaam);
                form.append('<label>Beschrijving</label>').append(description);
                form.append('<label>Medewerker</label>').append(employee);
                form.append('<label>Start tijd</label>').append(startTimeDiv);
                form.append('<label>Eind tijd</label>').append(endtime);
                  $.each(<?php echo $list?>, function(key, value) {
                   employee.append($("<option/>", {
                        value: value.key,
                        text: value.value
                    }));
                });


                return form;
                 },
 })

    $('#datetimepicker4').datetimepicker();

CSS:

  #datepicker4{
        z-index: 99999;
    }

Upvotes: 0

Views: 803

Answers (3)

van hoai
van hoai

Reputation: 21

i fixed with this code:

onshown: function(dialogRef){

                    $('#submit_date').datepicker({
                        language: 'ja',
                        isRTL: false,
                        //autoclose: true,
                    });
                },

Upvotes: 0

Bilal
Bilal

Reputation: 429

You need to call datetimepicker() on element existing in the document, in your case you are just defining the message: function() {} that is returned to the BootstrapDialog object, which means it's still in memory and hasn't been added to the DOM yet.

after taking a look on the documentation of BootstrapDialog it turns out that onShow() is invoked after the message has been added to the DOM

BootstrapDialog.show({
                //Set properties
                draggable:true,
                title: cObj.title, 
                onShow: function() {
                    if (!this.datetime_invoked) {
                       this.datetime_invoked = true;
                       $('#datetimepicker4').datetimepicker();
                    }
                },
                message: function (dialogItself) {
                    var form = $('<form id="createEventForm"> </form>');
                    var klantNaam = $('<input id="titleDrop" type="text" />');
                    var description = $('<textarea id="descriptionDrop"></textarea>');
                    var employee = $('<select class="form-control" id="employee">');
                    var starttime = $('<input id="starttime" type="text" class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>');
                    var startTimeDiv =
                     $('<div/>', {
                        id: 'datetimepicker4',
                        class: 'input-group date',
                        html: starttime
                    });

                    var endtime = $('<input type="text" class="endtime" id="endtime"/>');
                dialogItself.setData('field-klant-naam', klantNaam);
                dialogItself.setData('field-description', description);    // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
                dialogItself.setData('select-user', employee);   // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
                dialogItself.setData('starttime', startTimeDiv);   // Put it in dialog data's container then you can get it easier by using dialog.getData() later.
                dialogItself.setData('endtime', endtime);
                form.append('<label>Klant naam</label>').append(klantNaam);
                form.append('<label>Beschrijving</label>').append(description);
                form.append('<label>Medewerker</label>').append(employee);
                form.append('<label>Start tijd</label>').append(startTimeDiv);
                form.append('<label>Eind tijd</label>').append(endtime);
                  $.each(<?php echo $list?>, function(key, value) {
                   employee.append($("<option/>", {
                        value: value.key,
                        text: value.value
                    }));
                });


                return form;
    },
 })

Upvotes: 1

presidentnickson
presidentnickson

Reputation: 1085

Your ID is different in your CSS file. In your markup you have #datetimepicker4, but in your css #datepicker4

Try to change in the CSS and see if it appears.

Also, check if the datetime markup is appearing when you view the source in Firebug. If so, the above may fix it as its likely a z-index issue.

Upvotes: 0

Related Questions