在引导对话框中没有显示日期时间选择器

Question

我正在使用来自http://eonasdan.github.io/bootstrap-datetimepicker/的日期时间选择器--我有一个引导对话框，其中包含一个文本字段和一个ID。我准确地复制了它，但是我的日期选择器没有出现。有谁有主意吗？

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文件中是不同的。在您的标记中有#datetime采集器4，但是在css #datepicker4 4中

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

此外，在Firebug中查看源时，请检查日期时间标记是否出现。如果是这样的话，以上可能会将其修正为z指数问题。

Answer 3

我修正了这个代码：

onshown: function(dialogRef){

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