bootstrap-datetimepicker日期选择难点

男娘i 2022-05-26 04:54 266阅读 0赞

**需求：**

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

![70][]![70 1][]

**解决：**

点第一个输入框，会弹出日期选项，日期框的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"]')

[70]: https://img-blog.csdn.net/20180425153240688?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE5MjYwMDMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220526/04cf34fa06cc417ab170d881cd1ec48b.png