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对象，而不是更改现有datetimepickers的选项。每次onchange事件触发时，您都会创建一个新的datetimepicker。您可以通过将console.log('Monthly option selected')之类的东西放入相应的条件语句中来进行验证。每次将选择更改为“每月”时，都会创建更多行写入控制台，因为创建了更多的datetimepicker。

您必须在脚本的开头创建两个datetimepicker，然后仅更改其选项，而不创建新的选项。此代码应为您提供预期的结果：

$(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");
  });
});

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

1 个答案: