将日期选择器添加到 bootstrap 模式的步骤

Question

我正在做一个项目，我必须将日期选择器添加到 bootstrap modal.I 不知道如何将日期选择器添加到模式弹出窗口 window。我希望将日期选择器添加到 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){
                }
                }
                });
  });

    });

请帮助我，拯救我的一天。任何带有分步代码的 fiddle 都可以帮助我和像我这样的人..提前致谢

Answer 1

我建议您在源 code.and 中使用 bootstrap-datepicker.js 和 bootstrap-datepicker.css，请按照以下步骤操作：

1).首先在你的源代码中添加js和css的库文件。在 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();

这是一个包含您的代码和添加的日期选择器的 jsFiddle： https://jsfiddle.net/bishbashbosh/9jormmpz/1/

我不得不将代码放在

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

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

希望对您有所帮助！

将日期选择器添加到 bootstrap 模式的步骤

Steps to add datepicker to the bootstrap modal

ajax

twitter-bootstrap

jquery-ui-datepicker

bootstrap-modal