Javascript Fullcalendar:引导模式框未正确显示元素

在我的一个项目中添加了引导模式的完整日历脚本。我正在使它在我的页面中的一个按钮提交时弹出。但是模式中的元素并不清晰可见。我在哪里犯错？。 我的代码中确实有一个日期选择器，但它也没有显示适当的“prev”和“next”按钮。我也添加了一张样品图片。请帮助我。。 以下是我的代码：-

<div class="modal fade in" id="modal_calendar" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
     <h4 class="modal-title">Add Event </h4>
</div>
      <div class="modal-body">
         <form id="event_frm" class="form-horizontal">

<div class="form-group">
   <div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventsubject">calendar_eventsubject</label><div class="col-sm-8"><input type="text" name="calendar_eventsubject" value="" id="calendar_eventsubject" placeholder="calendar_eventsubject" data-validation-required-message="Enter the calendar_eventsubject" class="form-control" required="">
</div></div>  </div>
  <div class="form-group">
  <div class="form-group "><label class="control-label col-sm-3 " for="calendar_eventbody">calendar_eventbody</label><div class="col-sm-8"><textarea name="calendar_eventbody" cols="40" rows="3" id="calendar_eventbody" placeholder="calendar_eventbody" data-validation-required-message="Enter the calendar_eventbody" class="form-control" required=""></textarea>
</div></div>
       </div>
      <div class="row">
      <div class="form-group "><label class="control-label col-sm-3 " for="lbl_disp_code">common_date</label><div class="col-sm-8"><input type="text" name="lbl_disp_code" value="" id="lbl_disp_code" placeholder="common_date" data-validation-required-message="Enter the common_date" class="mts_date form-control" data-format="DD-MM-YYYY" data-single-date-picker="true" data-show-dropdowns="true" required="">
</div></div>      <div class="control-label col-sm-3">
    <label for="start_date">Start Date</label>
    </div>
    <div class="col-sm-7">
    <input type="text" class="form-control hasDatepicker" id="event_start_date" placeholder="Start Date">
    </div>

  </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary" id="save_event">Save changes</button>
       </div>
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
 </div>

    <script>
    $(document).ready(function() {

        $('#calendar').fullCalendar({ 
            customButtons: {
                EventButton: {
                    text:'Add Event',
                    click:function(event, jsEvent, view){
                        $('#modal_calendar').modal('show');
                    }
                }
            },

            utc: true, 
            header: { 
                left: 'prev,next today EventButton', 
                center: 'title', 
                right: 'month,agendaWeek,agendaDay' 
            },   

            editable: true, 
            droppable: true, 
        });

        $('#event_start_date').datepicker();
        $('#save_event').click(function() {
            var subject =$('#calendar_eventsubject').val();
            var body =$('#calendar_eventbody').val();
            var start_date = $('#event_start_date').val();
            if($('#calendar_event_subject').val() =='') {
                alert('subject required'); return false;
            } else {
                $("#modal_calendar").modal('hide');
            }

            if($('#calendar_event_body').val() == '') {
                alert('Body required'); return false;
            } else {
                $("#modal_calendar").modal('hide');
            }

            if($('#event_start_date').val() == '') {
                alert('Start Date required'); return false;
            } else {
                $("#modal_calendar").modal('hide');
            }

            $.ajax({
                cache: false,
                type: "POST",
                url:"calendar/save_event",
                data :  {'subject' : subject,'body' : body,'start_date' : start_date},
                dataType: 'json',
                success: function(result){
                    if (result!=null){
                    }
                }
            });
        });
    });
    </script>
    <style>
    .datepicker
    {
        z-index:1151 !important;}

    </style>

×
添加事件
日历事件主题
日历事件体
普通日
开始日期
接近
保存更改
$（文档）.ready（函数（）{
$（“#日历”）.fullCalendar（{
自定义按钮：{
事件按钮：{
文本：'添加事件'，
单击：函数（事件、jsEvent、视图）{
$（'modal'u calendar'）。modal（'show'）；
}
}
},
utc：是的，
标题：{
左：“上一个，下一个今天事件按钮”，
中心：'标题'，
右图：“月，agendaWeek，agendaDay”
},   
是的，
真的，
});
$（“#事件_开始_日期”）.datepicker（）；
$（“#保存_事件”）。单击（函数（）{
var subject=$（'#calendar_eventsubject'）.val（）；
var body=$（'#calendar_eventbody'）.val（）；
var start_date=$（'#event_start_date'）.val（）；
if（$（'#日历事件主题'）.val（）=''）{
警报（“需要主题”）；返回false；
}否则{
$（“模态日历”）.modal（'hide'）；
}
if（$（'#日历事件体'）.val（）=''）{
警报（“需要正文”）；返回false；
}否则{
$（“模态日历”）.modal（'hide'）；
}
如果（$（'#事件_开始_日期'）。val（）=''）{
警报（“需要开始日期”）；返回false；
}否则{
$（“模态日历”）.modal（'hide'）；
}
$.ajax({
cache:false，
类型：“POST”，
url:“日历/保存事件”，
数据：{'subject'：subject，'body'：body，'start\u date'：start\u date}，
数据类型：“json”，
成功：功能（结果）{
如果（结果！=null）{
}
}
});
});
});
.日期选择器
{
z索引：1151！重要；}

由此，我的输出如下：-

---

缩进有很长的路要走。您缺少一个结束div，并且在

模态体下方有一个
标记，或者您从未关闭过（更糟糕的是，您正在该表单中打开另一个表单，这是无效的）。请修复此问题，如果您的主要问题仍然存在，请创建一个复制此问题的小提琴。Thanks@milz，实际上我现在修改了表单的详细信息，但这只是表单的示例代码。无论如何，我的问题是日期选择器的元素检查日期选择器在哪里工作。您需要添加完整的代码，因为您的HTML没有日历，您的modal也没有日期选择器。所以我们不能复制你的问题。请添加所有相关代码（提供小提琴者优先）。谢谢这是我的小提琴，但现在我没有得到日期选择器认为你需要添加“外部资源”（左面板）上的库。我添加了一些并进行了更新，但您使用的是
daterangepicker（）
和
datepicker（）
（我假设它是jqueryui）。您现在需要添加daterangepicker的外部资源，它应该可以工作。您缺少一个结束div，并且在
模态体下方有一个
标记，或者您从未关闭过（更糟糕的是，您正在该表单中打开另一个表单，这是无效的）。请修复此问题，如果您的主要问题仍然存在，请创建一个复制此问题的小提琴。Thanks@milz，实际上我现在修改了表单的详细信息，但这只是表单的示例代码。无论如何，我的问题是日期选择器的元素检查日期选择器在哪里工作。您需要添加完整的代码，因为您的HTML没有日历，您的modal也没有日期选择器。所以我们不能复制你的问题。请添加所有相关代码（提供小提琴者优先）。谢谢这是我的小提琴，但现在我没有得到日期选择器认为你需要添加“外部资源”（左面板）上的库。我添加了一些并进行了更新，但您使用的是
daterangepicker（）
和
datepicker（）
（我假设它是jqueryui）。现在需要添加daterangepicker的外部资源，它应该可以工作。