datetimepicker 未显示在引导对话框中

Question

我正在使用来自http://eonasdan.github.io/bootstrap-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 的文档后发现，onShow() 是在将消息添加到 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;
    },
 })

Answer 2

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

尝试更改 CSS 并查看是否出现。

此外，请检查在 Firebug 中查看源代码时是否出现了日期时间标记。如果是这样，上述可能会将其修复为可能是 z-index 问题。

Answer 3

我用这个代码修复了：

onshown: function(dialogRef){

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