bootstrap-datetimepicker实现结束时间比开始时间多半个小时

最新推荐文章于 2023-09-13 10:46:22 发布

九月镇灵将

最新推荐文章于 2023-09-13 10:46:22 发布

阅读量361

点赞数

分类专栏：小程序文章标签： html js

本文链接：https://blog.csdn.net/weixin_43845191/article/details/115027699

版权

小程序专栏收录该内容

6 篇文章 0 订阅

订阅专栏

引入所需文件

bootstrap-datetimepicker.min.css
bootstrap-datetimepicker.min.js
bootstrap-datetimepicker.zh-CN.js
我这边提供自己使用的 >下载

html使用

<div class="input-group" style="padding: 10px 15px;">
   <span class="input-group-addon">开始时间</span>
   <input type="text" name="start_time" class="form-control form_datetime exam-start-time" readonly placeholder="请选择开始时间..." required>
   <span class="input-group-addon">结束时间</span>
   <input type="text" name="end_time" class="form-control form_datetime exam-end-time" readonly placeholder="请选择结束时间..." required>
</div>

效果大致是这样：
在这里插入图片描述

jq实现

$('.exam-start-time').datetimepicker({
	format: "yyyy-mm-dd hh:ii:00",
	todayBtn: "linked",
	language: "zh-CN",
	autoclose: true,
	pickerPosition:'top-right',
	startDate:new Date()
	}).on('click', function () {
	let oldDateObj = new Date($(".exam-end-time").val());
	let newDateObj = new Date();
	newDateObj.setTime(oldDateObj.getTime() - (30 * 60 * 1000));
	$(".exam-start-time").datetimepicker("setEndDate", newDateObj)
});

$('.exam-end-time').datetimepicker({
	format: "yyyy-mm-dd hh:ii:00",
	todayBtn: "linked",
	language: "zh-CN",
	autoclose: true,
	pickerPosition:'top-right',
	startDate:new Date()
	}).on("click",function(){
	let oldDateObj = new Date($(".exam-start-time").val());
	let newDateObj = new Date();
	newDateObj.setTime(oldDateObj.getTime() + (30 * 60 * 1000));
	$(".exam-end-time").datetimepicker("setStartDate", newDateObj)
});