Question

我正在使用http://eonasdan.github.io/bootstrap-datetimepicker/中的datetimepicker 我有一个包含文本字段和ID的引导程序对话框。我已经完全复制了它，但我的datetimepicker没有出现......有没有人有想法？

的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;
    }

Answer 1

您需要在文档中存在的元素上调用datetimepicker()，在您的情况下，您只是定义返回到BootstrapDialog对象的message: function() {}，这意味着它仍然在内存中而没有已被添加到DOM中。

看了一下BootstrapDialog的文档后，发现在将消息添加到DOM之后调用了onShow()

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;
    },
 })

Answer 2

您的CSS文件中的ID不同。在您的标记中，您有＃datetimepicker4，但在您的css＃datepicker4

中

尝试更改CSS并查看它是否显示。

此外，检查在Firebug中查看源时是否显示日期时间标记。如果是这样，上述内容可能会将其视为z索引问题。

Answer 3

我修复了这段代码：

onshown: function(dialogRef){

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

datetimepicker未显示在引导程序对话框中

3 个答案: