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

Question

我正在做一个项目，我必须将 datepicker 添加到引导模式。我不知道如何将 datepicker 添加到模式弹出窗口。 我希望将日期选择器添加到引导模式的步骤没有任何错误。谁能指导我一步一步地为模态创建一个日期选择器。 以下是我的模态代码：

 <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的库文件。 在 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 加载后执行。

希望有帮助！