Question

我正在开发一个项目，我必须将datepicker添加到bootstrap模式中。我不知道如何将datepicker添加到模态弹出窗口。我希望步骤将datepicker添加到bootstrap模式而不会出现任何错误。任何人都可以一步一步地指导我为模态创建一个日期选择器。以下是我的模态代码：

 <div class="modal fade" id="modal_calendar" tabindex="-1" role="dialog">
  <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">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
        <div class="modal-body">
         <form id="event_frm" class="form-horizontal">

         <div class="form-group">
    <label for="Title">Subject</label>
    <input type="text" class="form-control" id="event_Subject" placeholder="Subject">
   </div>
  <div class="form-group">
    <label for="body">Body</label>
       <input type="text" class="form-control" id="event_Body" placeholder="Body">
       </div>
      <div class="form-group">
    <label for="start_date">Body</label>
    <input type="text" class="form-control" id="event_start_date" placeholder="Start Date">
  </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><!-- /.modal -->

以下是我通过ajax保存表单数据的ajax调用：

 $('#save_event').click(function() {


var subject =$('#event_Subject').val();
var body =$('#event_Body').val();
var start_date = $('#event_start_date').val();
if($('#event_Subject').val() =='')
{
    alert('subject required'); return false;
}
else
{
    $("#modal_calendar").modal('hide');
}
if($('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){
                }
                }
                });
  });

    });

请帮助我，挽救我的一天。任何一步一步代码的小提琴都可以帮助我和像我这样的人......感谢提前

Answer 1

我建议您在源代码中使用bootstrap-datepicker.js和bootstrap-datepicker.css。并按照以下步骤操作：

1）。首先在你的源代码中添加js和css的libruary文件。在Html中写为：

<div class="input-group date" id="datepickerDiv" style="width:75%; height:40px;">
    <input type="text" class="form-control" id="date_Input" style="color:#888; height:40px;">
    <div class="input-group-addon cal-addonImg">
        <span class="glyphicon glyphicon-th"></span>
    </div>
</div>

在Js中：当您专注于输入文本字段

时

$("#date_Input").datepicker({
                autoclose:true,
                showOnFocus:true,
                format:'yyyy/mm/dd'
             });

它会帮助你，我希望如此......

Answer 2

使用jQuery UI可以轻松地将一个日期选择器添加到字段中。任何jQuery小部件，例如'datepicker'都将作为一个函数存在，可以在页面上的任何元素上调用，如下所示： $('#event_start_date').datepicker();

这是一个包含代码和添加的datepicker的jsFiddle： https://jsfiddle.net/bishbashbosh/9jormmpz/1/

我必须把代码放在

中

$(function() { . . . });

...以便在jQuery和jQuery UI加载后执行它。

希望有所帮助！

将datepicker添加到bootstrap模式的步骤

2 个答案: