Сначала конвертируйте обе даты в класс POSIXct
. Обязательно выполняйте вычисления в том же часовом поясе, классы POSIXt по умолчанию соответствуют вашему часовому поясу locale, as.Date
по умолчанию - по UTC.
test1 <- as.Date("2016-01-01", tz="UTC")
test2 <- strptime("2016-01-02", format="%Y-%m-%d", tz="UTC")
difftime(as.POSIXct(test2), as.POSIXct(test1, tz="UTC"), units="days")
# Time difference of 1 days
Переместить логику расчета в отдельную функцию. И называйте это всякий раз, когда вам нужно пересчитать.
Ваша логика пошла правильно. Атрибуты данных хороши здесь. Там вы можете хранить некоторые метаданные на кнопках, таких как «Счета в месяц», чтобы при обработке клика вы могли получать данные из элемента и пересчитывать обновленные данные.
Я обновил вашу скрипку кнопками типа обработки и отдельной логикой пересчета
$(document).ready(function() {
var price = 21;
var $buttonPlus = $('.increase-btn');
var $buttonMin = $('.decrease-btn');
var $quantity = $('.quantity');
var $paymentType = $('.payment-type');
var $checkout = $(".checkout");
$checkout.on("input", ".quantity", function() {
recalc();
})
/*For plus and minus buttons*/
$buttonPlus.click(function() {
$quantity.val(parseInt($quantity.val()) + 1).trigger('input');
recalc();
});
$buttonMin.click(function() {
$quantity.val(Math.max(parseInt($quantity.val()) - 1, 0));
recalc();
});
$paymentType.click(function() {
var $btn = $(this);
price = $btn.data('price');
$('#period').text($btn.data('period'));
$paymentType.removeClass('btn-info');
$btn.addClass('btnHover');
recalc();
});
function recalc() {
var quantity = +$quantity.val();
$("#total").text("$" + price * quantity);
}
})
.btnHover:hover {
background-color:#17a2b8;
color:white;
}
.priceTitle {
font-weight: 700;
font-size: 15px;
color: #6bde9f;
text-align: center;
}
.pricing {
font-size: 65px;
font-weight: 400;
color: #6bde9f;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<!--Yearly/Monthly Buttons-->
<div class="container" style="margin-top:50px;">
<center><div class="btn-group">
<button style="font-weight:bold;" id="yearly" type="button" class="btn btn-info payment-type" data-price="21" data-type="year">Billed Yearly</button>
<button type="button" id="monthlyBtn" class="btn btnHover payment-type" data-price="23" data-type="month">Billed Monthly</button>
</div></center>
</div>
<br>
<!--Calculation section-->
<div class="col-sm-12 col-md-4 checkout">
<div style="margin-bottom:-25px;">
<p class="price priceTitle" data-price="21">COMPANY</p>
</div>
<div class="row" style="padding-left:100px;">
<div class="col-6" style="height:50px;">
<p class="total pricing" style="float:right; margin-right:-15px;"><span id="total">$21</span></p>
</div>
<div class="col-6" style="height:90px;">
<p style="font-size:12px; margin-top:40px; margin-left:-12px;">per<br> <span id="period">month</span></p>
</div>
</div>
<center><div>
<p style="font-size:12px; margin-bottom:5px;">People on your team</p>
<button type="button" class="btn decrease-btn">-</button>
<input style="width:70px; text-align:center; padding-bottom:5px" type="text" class="rounded quantity" value="1"/>
<button type="button" class="btn increase-btn">+</button>
</div></center>
</div>
</body>