Question

我正在尝试在Bootbox模式中使用Datepicker，但问题是datepicker不会在模态中显示日历，但它在外面工作。

<button class="add_date_btn btn btn-primary btn-sm" taller_id="<?php htmlout($id); ?>">Add</button>
<div id="add_class_form" title="Agregar Clase">
    <form action="" method="post" id="form_clase">
        <div class="form-group">
            <div class="input-group"> 
                <input type="text" class="form-control" value="Choose Date" id="datepicker" name="fecha" required />
            </div>
        </div>
    </form>
</div>

在模态上我使用Bootbox加载隐藏DIV的内容：

$('.add_date_btn').on('click', function () {
      bootbox.dialog({
          message: $('#add_class_form').html(),
          title: "Add Class",
          buttons: {
              cancelar: {
                  label: "Cancelar",
                  className: "btn-default"
              }
          }
      });
  }); //End click

示例在这里：http://jsfiddle.net/4EjSW/

在我的网站上，DIV #add_class_form被设置为“display：none”，但是在示例代码中我把它留在那里，所以当它在模态之外时，任何人都可以确认它实际上正在工作。

知道怎么解决这个问题吗？

Answer 1

 bootbox.dialog(
            {
                title: "Gestione Eventi",
                message: '<div class="row"> ' +
                         '<div class="col-md-12"> ' +
                         '<form class="form-horizontal"> ' +
                         '<div class="form-group"> ' +
                         '<label class="col-md-4 control-label" for="name">Name</label> ' +
                         '<div class="col-md-4"> ' +
                         '<input id="name" name="name" type="text" placeholder="Your name" class="form-control input-md datepicker"> ' +
                         '<span class="help-block">Here goes your name</span> </div> ' +
                         '</div> ' +
                         '<div class="form-group"> ' +
                         '<label class="col-md-4 control-label" for="awesomeness">How awesome is this?</label> ' +
                         '<div class="col-md-4"> <div class="radio"> <label for="awesomeness-0"> ' +
                         '<input type="radio" name="awesomeness" id="awesomeness-0" value="Really awesome" checked="checked"> ' +
                         'Really awesome </label> ' +
                         '</div><div class="radio"> <label for="awesomeness-1"> ' +
                         '<input type="radio" name="awesomeness" id="awesomeness-1" value="Super awesome"> Super awesome </label> ' +
                         '</div> ' +
                         '</div> </div>' +
                         '</form> </div> </div>',
                buttons: {
                    success: {
                        label: "Save",
                        className: "btn-success",
                        callback: function () {
                            this.close();
                        }
                    }
                }
            });

            $(".datepicker").datepicker();

这对我有用。在bootbox对话框调用之后，进入相同的范围，调用datepicker函数..

Answer 2

尝试在html版本中加载消息到bootbox而不是原始字符串。

替换它：

           message: $('#add_class_form').html(),

要：

           message: $('#add_class_form'),

查看结果：http://jsfiddle.net/ens1z/4EjSW/3/

使用Bootbox在Bootstrap模式中的Datepicker

2 个答案: