无法根据每月和每年的选择更新开始日期和结束日期
无法根据每月和每年的选择更新开始日期和结束日期
提问于 2019-05-25 07:33:51
我尝试为每个按钮添加每月和每年的开始日期和到期日期。如果选择每月，则应在“开始日期”字段中显示“当前年份”、“日期和月份”，并在“到期日期”中显示下一个月。如果选择了年度，则应在“开始日期”字段、“当前年份”、“日期和月份”中显示“开始日期”，并在“到期日期”中显示下一年度。
我写的代码只起了几个月的作用。那也只是在第一个按钮上，而不是在每个按钮上点击。如果我将每月更改为年度，则年度不更新。请帮我把这个修好。提前谢谢。
$(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">×</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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-05-25 09:14:57
代码的主要问题是创建新的existing选择器对象，而不是更改现有日期选择器的选项。每次onchange事件触发时，都会创建一个新的日期选择器。您可以通过在相应的条件语句中放置一些类似于console.log('Monthly option selected')的内容来验证这一点。每次将select更改为“每月”时，会有更多的行写入控制台，因为创建了更多的日期选择器。
您必须在脚本开始时创建两个日期选择器，然后只更改它们的选项，而不是创建新的选项。这段代码应该给出预期的结果：
$(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");
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56302777
复制相关文章
相似问题
腾讯云开发者
