bootstrap-datetimepicker日期选择难点

需求:

如下图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")获取,获取方式如下

$('[id="list[0].startTime"]')


猜你喜欢

转载自blog.csdn.net/qq_19260033/article/details/80080165