模态框中datetimepicker插件滑动时上下分离的另外一种思路

背景介绍

目前正在做的一个项目中需要在模态框中增加一列订单数据，而添加订单数据时必须要添加订单的日期，添加订单日期就要用到日期插件，所以我选择的是bootstrap-datetimepicker这个日期格式的插件，之前也用过这个插件，感觉也是非常好用，但是这次在做项目的过程中就遇到了这样的一个问题：当在模态框中点击input框，从而选择日期，但是日期选择时，有一部分没有显示出来，我想着可以滑动整个模态框，从而让日期格式的插件也跟着上滑，可是没有想到的是，模态框上滑了，但是日期格式的插件却停留在了下面一直不动，如下图：

上滑时输入框和日期插件上下分离

搜索解决办法

遇到了问题，那就开始了各种搜索，谷歌上给出大多数都是datepicker的解决办法，而找到的答案都没有起到作用，首先是在Stack Overflow上搜索，结果给出的答案是：

问题图

答案图

使用他给出的方法，可是也没有解决我的问题，又在GitHub上搜索，结果也是同样的问题，截图如下：

GitHub上的解决办法

既然都解决不了，自己也没有办法，那只能另辟蹊径了。

解决方法

首先查询了datetimepicker的手册，然后看到这个里面有一个选项，点击查看可以配置的选项，可以看到有一个：pickerPosition的选项，它的默认值是：bottom-right，这时猛然想起，这个原因就是插件显示在输入框的下方，从而导致无法显示日期，而上滑是为了显示下方的日期，那我为什么不开始的时候就将日期插件显示在input输入框的上方呢，于是就将这个值设置为'top-right'，结果真的就起到作用了。显示如图：

另外的思路

具体的代码如下：

总结：

1. 编程中肯定会遇到各种各样的难题，而遇到难题之后，一般都会搜索，可是当使用了搜索的办法之后还是不能解决问题时，这时候需要静下心来想一想，或者是暂且抛开这个问题，在做其他事情的过程中就可能会突然间灵感打开，再回到这个问题时，就可以迎刃而解了。
2. 不能钻入死胡同中，否则那一天的工作效率会极低。