layui的时间选择模块常用是直接绑定在input框，通过点击input框触发弹出日期选择面板进而选择日期，插件会自动将结果填充到input，而且貌似这个还没发控制，就是说你不想它自动填充都不行，所以今天遇到一个需求就费了不少时间
公司需求是时间即可以选择也可以自己手动去填，所以这个时间格式可能是不规则的，理想效果是一个输入框，一个时间按钮，输入框可以自行输入，当需要选择时间时点击时间按钮弹出时间选择界面然后选择时间，确定后填充到输入框。
结合需求我尝试了直接绑定输入框的方法，但是结果并不理想，虽然可以手动输入但是在点击input框的时候由于绑定了时间插件所以会弹出时间选择界面，导致实际输入是无效的，因为输入完成后失去焦点后插件会认为你完成了一次选择时间的操作而去填充到输入框导致之前输入的内容被覆盖，时间插件自动填充这个动作看了下文档没有找有有关可以控制的方法，所以只能采取一些其他手段，下面是最终解决方法。
layui时间模块文档里面有一个自定义时间的东西，里面有一个外部事件调用，通过这个可以将弹出选择时间界面的动作绑定到一个按钮上，当然原来的用于选择时间的输入框也必须要有，假定现在有一个按钮，id为：test1,一个input框(仅仅是为了接收和配置插件弹出时间选择界面，没有这个元素插件无法运行)，id为:test2,通过将弹出动作绑定到按钮test1，点击确定时间后插件自动填充到输入框test2，那么复制官方文档代码稍作修改得到如下代码:
//外部事件调用
lay('#test1').on('click', function(e){ // test1 是一个按钮
laydate.render({
elem: '#test2'
,show: true //直接显示
,closeStop: '#test1' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
});
});这段代码已经可以时间点击按钮来唤起时间选择，后面是如何让用户可以自行输入时间，用test2肯定不行，开始已经说过行不通，test2就是一个辅助作用，要输入就必须再单独建一个input，假设id为：test3。
test3现在仅仅是一个普通的输入框，要和后面的时间联系起来就需要继续做一些操作，layui的时间模块有一个选择完毕的回调方法，通过回调方法即可以将选择的结果填充到test3，然后将test2做一些处理将它从界面隐藏，不能删除，test2是必须存在的。最终界面是这样。
前面的input框test3没有跟时间插件有直接联系，所以用户可以随意编辑，需要选择时间时点击后面的图标即可。
微信