Tempus Dominus日历控件的选择日期事件

最近在做项目的时候,看见AdminLTE 3.0的日历控件有些好看,就想拿来在项目使用,本以为复制粘贴就行了,但是不好使。通过查看浏览器的控制台的出错信息,是一个叫做sparkline的div产生了空的innerHtml异常,但是日历控件并没有这个div啊。通过查看原始网页,发现这个div存在于页面上的一个地图控件,为什么要依赖别的控件原因不清楚(应该是dashboard.js的问题)。复制粘贴这个控件后果然好使了,再用hidden属性把它隐藏就可以了。
接下来我想监控点击选择日期的事件,达到只要选择日期就会异步更新页面表格数据的效果,但是无论我怎么设置都没有效果。在网上搜索解决方案无果后,我突然想到官方文档可能有事件的描述,打开官网后发现文档里果然有event的说明。然后我留意到了一个叫做change.datetimepicker的方法,但是经过多次尝试后依然无法解决问题,无奈下在google搜索这个方法名称,然后在stackoverflow的一个帖子里(JS DateTimePicker onChange event not working)终于找到了解决办法,原来on函数里面不需要selector表达式作为参数,只需要事件名称‘change.datetimepicker’和要执行的函数作为参数即可。
还有一个要注意的是,这个事件其实在页面加载的时候会自动触发一次,所以如果不需要这一个特性的话,必需加一个布尔值变量来判断是否第一次执行函数。
实例代码:

let first = true;
jQuery("#calendar").on('change.datetimepicker', function () {
	if (!first) showData(jQuery('td.active').attr('data-day').replace(/\//g, '-'));
    else first = false;
})

你可能感兴趣的:(Tempus Dominus日历控件的选择日期事件)