将日期选择器与jquery一起使用，与div关联的对话框onselect

Question

不确定这是否可能，我刚刚开始学习javascript和jQuery。如果我想要的方式不可能实现，我非常愿意听到我可能实现这一目标的不同方式。

我想显示一个日期选择器，用户会点击日期，当他们这样做时，会出现一个对话框，其中有特定的预定义数据。他们可以选择不同的日期，它会打开另一个对话框中有不同的预定义数据，我想跟踪他们点击的日期。

<div id="tabs">
 <ul>
<li><a href="#tabs-1">First</a></li>
<li><a href="#tabs-2">Second</a></li>
<li><a href="#tabs-3">Third</a></li>
</ul>
<div id="tabs-1">
<p>I'm going to have different data applying to only this day</p>
</div>
<div id="tabs-2">
<p>I'm going to have different data applying to only this day</p>
</div>
<div id="tabs-3">
<p>I'm going to have different data applying to only this day</p>
</div>
</div>

从jQuery日期选择器内联中选择日期后打开jQuery对话框

这个链接很有用，因为用户发布了一个jsfiddle：http://jsfiddle.net/qqabC/这是我尝试做的事情的一个开始，我只是不确定如何或是否有可能像这样将div合并到对话框中。我一直在摆弄它，但我一无所获。所选的每个日期都有不同的对话框内容。

如果这不可能，实现这一目标的最佳方式是什么？非常感谢。

--编辑：我仍然需要用div id"tabs"实现上面定义的div。选项卡=锻炼天数。因此，表1到表5总共是5天。tabs-1将是他们的第一次点击，这是第1天的表单内容，tabs-2将是他们第二次点击，那是第2天的表单属性，依此类推。我认为我应该使用for循环，因为每次点击div都会增加到下一次。我试着做一些类似的事情：

 var divs = $('#tabs > div[id]');
 var links = $('#tabs li');
 divs.hide();
 for (i=0;i<=max_workouts;i++) {
     $('#tabs li').on('click', function(e){
     var clickedID = $(this).attr('href').clone().appendTo(#workout-modal);
     }

类似的事情是，每次点击都要迭代div，但它不起作用，我一直在尝试寻找将现有div内容放在模式中的例子，但没有任何关于以这种方式迭代div的建议，你有什么建议吗？

Answer 1

以下是如何使用Bootstrap实现此功能的示例。当然，你需要根据需要更改功能和设计，但这应该是一个公平的开始

工作流程如下：

• 用户单击日期
• 模态通过各种输入显示
  • 模态打开时清除输入
• 用户在输入中输入信息
• 用户单击添加训练
• 显示屏上将添加一个跨度标签，显示训练编号和所选日期
  • 该跨度具有数据属性，用于存储日期、标题和模态输入中的每个值
• 如果用户单击跨度右端的"X"，它将被删除
• 如果用户在其他任何位置单击span标签，它将重新打开模态，并使用存储在span上的属性数据填充输入
• 如果用户在加载现有训练后单击添加训练，则新的跨度将替换旧的跨度，而不是添加到div的末尾

这里还有一个jsFiddle

$(function(){
    var max_workouts = 5;
    $('#workout-datepicker').datepicker({
      startDate: "today"
    }).on('changeDate', function(e) {
      var cur = $('.workout-label').length;
      if (cur < max_workouts) {
        var workoutDate = e.format('mm/dd/yyyy');
        var title = 'Workout ' + (cur + 1) + ' - ' + workoutDate;
        openModal(title, workoutDate);
      }
      else{
    	  var $tooMany=$('#too-many');
        $tooMany.show();
        setTimeout(function(){ $tooMany.hide() }, 2000);
      }
    });
    var $workoutLabelsContainer = $('#workout-labels-container');
    $('#add-workout').click(function() {
      var $workoutModal = $('#workout-modal');
      var workoutDate = $workoutModal.data('workout-date');
      var title = $workoutModal.data('workout-title');
      var vaule1 = $('#modal-workout-value-1').val();
      var vaule2 = $('#modal-workout-value-2').val();
      var $workout = $('<span class="label label-primary workout-label col-sm-12">' + title + '<span class="glyphicon glyphicon-remove pull-right remove-workout" aria-hidden="true"></span></span>');
      var clickedLabelIndex = $workoutModal.data('crurent-label-index');
      $workout.data('workout-title', title).data('workout-date', workoutDate).data('value-1', vaule1).data('value-2', vaule2);
      if (clickedLabelIndex == -1) $workoutLabelsContainer.append($workout);
      else($('.workout-label').eq(clickedLabelIndex).replaceWith($workout))
      $workoutModal.modal('hide');
    });
    $workoutLabelsContainer.on('click', '.remove-workout', function(e) {
      e.stopPropagation();
      $(this).closest('.workout-label').remove();
    })
    $workoutLabelsContainer.on('click', '.workout-label', function() {
      var $workoutLabel = $(this);
      var workoutDate = $workoutLabel.data('workout-date');
      var title = $workoutLabel.data('workout-title');
      var value1 = $workoutLabel.data('value-1');
      var value2 = $workoutLabel.data('value-2');
      var labelIndex = $('.workout-label').index($workoutLabel);
      openModal(title, workoutDate, value1, value2, labelIndex);
    });
    function openModal(title, workoutDate, value1, value2, labelIndex) {
      var $workoutModal = $('#workout-modal');
      var $value1 = $('#modal-workout-value-1').val('');
      var $value2 = $('#modal-workout-value-2').val('');
      $workoutModal.data('workout-title', title).data('workout-date', workoutDate);
      $('#workout-modal-title').html(title);
      if (value1) $value1.val(value1);
      if (value2) $value2.val(value2);
      if (labelIndex !== 'undefined' && labelIndex > -1) $workoutModal.data('crurent-label-index', labelIndex);
      else $workoutModal.data('crurent-label-index', -1);
      $workoutModal.modal({
        show: true
      });
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<style>
  .workout-label {
  padding: 6px;
  font-size: 16px;
  width: 100%;
  display: block;
  margin-bottom: 5px;
  cursor: pointer;
}
.remove-workout {
  cursor: pointer;
}
#too-many{
  display:none;
}
</style>
<br>
<br>
<div class="container well" id="workout-container">
  <div class="row">
    <div class="col-xs-6">
      <div id="workout-datepicker"></div>
    </div>
    <div class="col-xs-6" id="workout-labels-container">
    </div>
  </div>
<div class="alert alert-danger" id="too-many" role="alert">Maximun reached</div>
</div>
<div id="workout-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="workout-modal-title"></h3>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="firstname" class="col-sm-4 control-label">Some short text:</label>
            <div class="col-sm-8">
              <input type="text" class="form-control" id="modal-workout-value-1" placeholder="">
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-sm-4 control-label">Some longer text:</label>
            <div class="col-sm-8">
              <textarea class="form-control" id="modal-workout-value-2" name="textarea"></textarea>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="button" class="btn btn-primary" id="add-workout">Add workout</button>
          </div>
        </form>
      </div>
    </div>
  </div>