resources中添加moment.js文件。
然后引入moment.js文件:
<script src="/js/moment.js"></script>
借阅结束时间选完后changeDate事件:
$("input[name='endTime']").datetimepicker({format: "yyyy-mm-dd hh:ii",autoclose: true}).on('changeDate',function(ev){var time=$("input[name='endTime']").val();const endTime = moment(time);const startTime = moment();const minutesDifference = endTime.diff(startTime, 'minutes');const money=minutesDifference/600.0;$('#money').text(money);});
图书借阅价格是1分钟1/60角。
整个代码add.html图书借阅界面:
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head><th:block th:include="include :: header('新增bookorder')" /><th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg"><div class="wrapper wrapper-content animated fadeInRight ibox-content"><form class="form-horizontal m" id="form-order-add"><div class="form-group"> <label class="col-sm-3 control-label">book_id:</label><div class="col-sm-8"><input name="bookId" class="form-control" type="text" th:value="${bookId}"></div></div><div class="form-group"> <label class="col-sm-3 control-label">借阅结束时间:</label><div class="col-sm-8"><div class="input-group date"><input name="endTime" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text"><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div></div><div class="form-group"><p>您需支付 <span id="money">0</span>元</p></div></form></div><th:block th:include="include :: footer" /><th:block th:include="include :: datetimepicker-js" /><script src="/js/moment.js"></script><script th:inline="javascript">var prefix = ctx + "system/order"$("#form-order-add").validate({focusCleanup: true});function submitHandler() {if ($.validate.form()) {$.operate.save(prefix + "/add", $('#form-order-add').serialize());}}$("input[name='startTime']").datetimepicker({format: "yyyy-mm-dd",minView: "month",autoclose: true});$("input[name='endTime']").datetimepicker({format: "yyyy-mm-dd hh:ii",autoclose: true}).on('changeDate',function(ev){var time=$("input[name='endTime']").val();const endTime = moment(time);const startTime = moment();const minutesDifference = endTime.diff(startTime, 'minutes');const money=minutesDifference/600.0;$('#money').text(money);});</script>
</body>
</html>