使用带有jquery的datepicker，与div onselect相关联的对话框

1 回答

• 0

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

  The workflow is as follows:

  • 用户点击日期

  • 模态显示各种输入

  • 模态打开时清除输入

  • 用户在输入中输入信息

  • 用户点击添加锻炼

  • 在显示屏上添加了一个 Span 标签，显示了锻炼号码和所选日期

  • 此 Span 的数据属性设置为存储日期， Headers 和模态输入中的每个值

  • 如果用户单击 Span 右端的"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>
  

  回复于 2024-04-26T23:02:12+08:00