背景介绍
目前正在做的一个项目中需要在模态框中增加一列订单数据,而添加订单数据时必须要添加订单的日期,添加订单日期就要用到日期插件,所以我选择的是bootstrap-datetimepicker这个日期格式的插件,之前也用过这个插件,感觉也是非常好用,但是这次在做项目的过程中就遇到了这样的一个问题:当在模态框中点击input框,从而选择日期,但是日期选择时,有一部分没有显示出来,我想着可以滑动整个模态框,从而让日期格式的插件也跟着上滑,可是没有想到的是,模态框上滑了,但是日期格式的插件却停留在了下面一直不动,如下图:
搜索解决办法
遇到了问题,那就开始了各种搜索,谷歌上给出大多数都是datepicker的解决办法,而找到的答案都没有起到作用,首先是在Stack Overflow上搜索,结果给出的答案是:
使用他给出的方法,可是也没有解决我的问题,又在GitHub上搜索,结果也是同样的问题,截图如下:
既然都解决不了,自己也没有办法,那只能另辟蹊径了。
解决方法
首先查询了datetimepicker的手册,然后看到这个里面有一个选项,点击查看可以配置的选项,可以看到有一个:pickerPosition的选项,它的默认值是:bottom-right,这时猛然想起,这个原因就是插件显示在输入框的下方,从而导致无法显示日期,而上滑是为了显示下方的日期,那我为什么不开始的时候就将日期插件显示在input输入框的上方呢,于是就将这个值设置为'top-right',结果真的就起到作用了。显示如图:
具体的代码如下:
<script>
$('#datetimepicker').datetimepicker({
# 这里是其他的配置项
...
pickerPosition: 'top-right',
});
</script>
总结:
- 编程中肯定会遇到各种各样的难题,而遇到难题之后,一般都会搜索,可是当使用了搜索的办法之后还是不能解决问题时,这时候需要静下心来想一想,或者是暂且抛开这个问题,在做其他事情的过程中就可能会突然间灵感打开,再回到这个问题时,就可以迎刃而解了。
- 不能钻入死胡同中,否则那一天的工作效率会极低。