boostrap的日期选择：datetimepicker 做开始时间与结束时间的判断，开始时间小于结束时间

日期选择器联动

最新推荐文章于 2025-09-11 04:00:09 发布

原创最新推荐文章于 2025-09-11 04:00:09 发布 · 2.2w 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个使用JQuery和Bootstrap插件实现的日期选择器联动功能，确保结束日期不会早于开始日期。通过设置开始和结束日期的选择器，使得用户无法选择不符合逻辑的时间范围。

JQuery 和 bootstrap 插件自己导入，这里直接上代码：

这里 pzTime 为开始时间，

pzqxTime 为结束时间；

结束时间在开始时间之后，不能选择开始之前的时间！

开始时间在结束时间之前！

从前面开始时间选择：

从后面结束时间选择：

    $("#pzTime").datetimepicker({
        language : 'zh-CN',
        weekStart : 1,
        todayBtn : 1,
        autoclose : 1,
        todayHighlight : 1,
        startView : 2,
        minView: "month",
        format: 'yyyy-mm-dd',
        forceParse : 0,
        endDate : new Date()
    }).on('hide', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var startTime = event.date;
        $('#pzqxTime').datetimepicker('setStartDate',startTime);
        $('#pzqxTime').val("");
    });
    $("#pzqxTime").datetimepicker({
        language : 'zh-CN',
        weekStart : 1,
        todayBtn : 1,
        autoclose : 1,
        todayHighlight : 1,
        startView : 2,
        minView: "month",
        format: 'yyyy-mm-dd',
        forceParse : 0,
        endDate : new Date()
    }).on('hide', function(event) {
        event.preventDefault();
        event.stopPropagation();
        var endTime = event.date;
        $('#pzTime').datetimepicker('setEndDate',endTime);
    });

下面有个更加严格的方法：
获取开始时间的值 = 结束时间，这是前面约束；
获取结束时间的值 = 开始时间，这是后面的约束；
这里最大限度，开始时间 = 结束时间，为当天，是比较合理的！


	$("#startDate").datetimepicker({
		language : 'zh-CN',
		weekStart : 1,
		todayBtn : 1,
		autoclose : 1,
		todayHighlight : 1,
		startView : 2,
		minView: "month",
		format: 'yyyy-mm-dd',
		forceParse : 0
	}).on('hide', function(event) {
		event.preventDefault();
		event.stopPropagation();
		var startTime = event.date;
		$("#expirationDate").datetimepicker('setStartDate',startTime);
		$("#expirationDate").val("");
	});
	$("#expirationDate").datetimepicker({
		language : 'zh-CN',
		weekStart : 1,
		todayBtn : 1,
		autoclose : 1,
		todayHighlight : 1,
		startView : 2,
		minView: "month",
		format: 'yyyy-mm-dd',
		forceParse : 0
	}).on('hide', function(event) {
		event.preventDefault();
		event.stopPropagation();
		var endTime = event.date;
		$("#startDate").datetimepicker('setEndDate',endTime);
	});