bootstrap-datetimepicker日期选择难点

最新推荐文章于 2026-06-04 19:09:10 发布

原创最新推荐文章于 2026-06-04 19:09:10 发布 · 2k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

本文介绍了一种使用jQuery插件实现的日期选择器，能够自动将所选日期按年月日时分格式填充到三个独立的输入框中，并提供了自定义格式化日期的方法。

需求：

如下图1的日期选择框，点第一个输入框，会弹出日期选项（选择到具体的时间点后，如图2，会自动关闭，），需要把选择的日期分别填到3个框中（yyyy-MM-dd、hh、mm）

解决：

点第一个输入框，会弹出日期选项，日期框的js代码如下

$('.form_datetime').datetimepicker({
    format: 'yyyy-mm-dd',//显示格式
    initialDate: new Date(),//初始化当前日期
    autoclose: true,//选中自动关闭
    todayBtn: true,//显示今日按钮
    language:'zh-CN'//汉化日历
});

且加入onChange事件到第一个框中，如下：

function setDateHourMinute() {
	// 获取到日期选择器的选择后的日期（精确到分钟），然后格式化该Date日期类型
	var time = $(".form_datetime").datetimepicker("getDate").format("yyyy-MM-dd hh:mm");
	// 日期
	$("#date").val(overtimeStart.substring(11, 13));
	// 小时
	$("#hour").val(overtimeStart.substring(14, 16));
	// 分钟
	$("minute").val(overtimeStart.substring(11, 13));
}

而js中日期的format方法需要自己去写：

//js格式化日期输出
Date.prototype.format = function(fmt) {
	var o = {
		"M+" : this.getMonth()+1,                 //月份
        "d+" : this.getDate(),                    //日
        "h+" : this.getHours(),                   //小时
        "m+" : this.getMinutes(),                 //分
        "s+" : this.getSeconds(),                 //秒
        "q+" : Math.floor((this.getMonth()+3)/3), //季度
        "S"  : this.getMilliseconds()             //毫秒
	};

	if (/(y+)/.test(fmt)) {
		fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
	}

	for(var k in o) {
		if(new RegExp("("+ k +")").test(fmt)){
			fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
		}
	}

	return fmt;
}

备注：

id命名中有符号的（例如：“list[index].startTime”）的元素，不能直接通过$("#idName")获取，获取方式如下