无法根据每月和每年的选择更新开始和结束日期

Question

我尝试为每个按钮添加每月和每年的开始和到期日期。如果选择了每月，则在开始日期字段中应显示当前年份、日期和月份，在到期日期中应显示下个月。如果选择每年，则在开始日期字段中应显示当前年份、日期和月份，在到期日期中应显示下一年。

我编写的代码只能工作几个月。在第一个按钮中也是如此，而不是在每个按钮单击时。如果我将每月更改为每年，则年份不会更新。请帮我解决这个问题。提前致谢。

$(function() {
  $(".upgred-frm").on('shown.bs.modal', function() {
    if ($("#payment-frequency").val() == "monthly") {
      $('#datetimepicker1').datetimepicker({
        defaultDate: new Date(),
        format: 'YYYY/MM/DD HH:mm:ss'
      });
      $('#datetimepicker2').datetimepicker({
        defaultDate: moment().subtract(-1, "months"),
        format: 'YYYY/MM/DD HH:mm:ss',
      });
    }
    $("#payment-frequency").on("change", function() {
      if ($(this).val() == "monthly") {
        $('#datetimepicker1').datetimepicker({
          defaultDate: new Date(),
          format: 'YYYY/MM/DD HH:mm:ss'
        });
        $('#datetimepicker2').datetimepicker({
          defaultDate: moment().subtract(-1, "months"),
          format: 'YYYY/MM/DD HH:mm:ss',
        });
      } else if ($(this).val() == "yearly") {
        $('#datetimepicker1').datetimepicker({
          defaultDate: new Date(),
          format: 'YYYY/MM/DD HH:mm:ss'
        });
        $('#datetimepicker2').datetimepicker({
          defaultDate: moment().subtract(-1, "years"),
          format: 'YYYY/MM/DD HH:mm:ss',
        });
      } else {
        return false;
      }
    })
  });

  $(".upgred-frm").on('hide.bs.modal', function() {
    $(this).find("form").trigger("reset");
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/css/paperindex.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js?ver=1"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js?ver=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <button class="btn btn-md btn-default form-control" data-toggle="modal" data-target=".upgred-frm" data-backdrop="static">Upgrade</button>
      <button class="btn btn-md btn-default form-control" data-toggle="modal" data-target=".upgred-frm" data-backdrop="static">Upgrade</button>
      <button class="btn btn-md btn-default form-control" data-toggle="modal" data-target=".upgred-frm" data-backdrop="static">Upgrade</button>
    </div>
  </div>
</div>
<div class="modal fade upgred-frm" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Upgrade Membership</h4>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group payment-frequency">
            <label for="payment-frequency">Payment Frequency</label>
            <select class="form-control" id="payment-frequency">
              <option>Please select</option>
              <option selected value="monthly">Monthly</option>
              <option value="yearly">Yearly</option>
            </select>
          </div>
          <div class="form-group">
            <label>Payment / Trial Start Date</label>
            <div class='input-group date' id='datetimepicker1'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
            <div class="pull-right"><small class="clr-ccc">The date format should be YYYY-MM-DD 00:00:00</small></div>
          </div>
          <div class="form-group">
            <label for="expire-on">Will expire on</label>
            <div class='input-group date' id='datetimepicker2'>
              <input type='text' class="form-control" />
              <span class="input-group-addon">
 <span class="glyphicon glyphicon-calendar"></span>
              </span>
            </div>
            <div class="pull-right"><small class="clr-ccc">The date format should be YYYY-MM-DD 00:00:00:00</small></div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Answer 1

您的代码的主要问题是您创建了新的 datetimepicker 对象，而不是更改现有 datetimepicker 的选项。每次onchange 事件触发时，您都会创建一个新的日期时间选择器。您可以通过在相应的条件语句中放置 console.log('Monthly option selected') 之类的东西来验证这一点。每次您将选择更改为“每月”时，都会有更多行写入您的控制台，因为创建了更多的日期时间选择器。

您必须在脚本开始时创建两个日期时间选择器，然后只更改它们的选项而不是创建新选项。这段代码应该会给你预期的结果：

$(function() {
 $('#datetimepicker1').datetimepicker();
 $('#datetimepicker2').datetimepicker();
});
$(function() {
$(".upgred-frm").on('shown.bs.modal', function() {
        if ($("#payment-frequency").val() == "monthly") {
            $('#datetimepicker1').data('DateTimePicker').clear();
            $('#datetimepicker1').data('DateTimePicker').options({
                defaultDate: new Date(),
                format: 'YYYY/MM/DD HH:mm:ss'
            });
            $('#datetimepicker2').data('DateTimePicker').clear();
            $('#datetimepicker2').data('DateTimePicker').options({
            defaultDate: moment().subtract(-1, "months"),
            format: 'YYYY/MM/DD HH:mm:ss',
            });
        }
    });
    $("#payment-frequency").on("change", function() {
      if ($(this).val() == "monthly") {
        $('#datetimepicker1').data('DateTimePicker').clear();
        $('#datetimepicker1').data('DateTimePicker').options({
          defaultDate: new Date(),
          format: 'YYYY/MM/DD HH:mm:ss'
        });
        $('#datetimepicker2').data('DateTimePicker').clear();
        $('#datetimepicker2').data('DateTimePicker').options({
          defaultDate: moment().subtract(-1, "months"),
          format: 'YYYY/MM/DD HH:mm:ss',
        });
      } else if ($(this).val() == "yearly") {
        $('#datetimepicker1').data('DateTimePicker').clear();
        $('#datetimepicker1').data('DateTimePicker').options({
          defaultDate: new Date(),
          format: 'YYYY/MM/DD HH:mm:ss'
        });
        $('#datetimepicker2').data('DateTimePicker').clear();
        $('#datetimepicker2').data('DateTimePicker').options({
          defaultDate: moment().subtract(-1, "years"),
          format: 'YYYY/MM/DD HH:mm:ss',
        });
      } else {
        return false;
      }
    });

  $(".upgred-frm").on('hide.bs.modal', function() {
    $(this).find("form").trigger("reset");
  });
});