laydate日期控件多个实例问题

Question

代码如下：

`//遍历循环创建实例

    $('.layui-input').each(function (index) {
        var _this = this;
        laydate.render({
            elem: _this,
            trigger: 'click',//可以解决多个实例闪退问题
            isInitValue: false,//初始值填充
            // value:$('#TimeVal'+index).text(),
            range: index < 3 ? '~' : false, //或 range: '~' 来自定义分割字符
            ready: function (date) {//初始回调
                console.log('初始：', date); //得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
            },
            change: function (value, date, endDate) {//选择切换回调
                console.log('选择切换回调：',value,date,endDate); //得到日期生成的值，如：2017-08-18
            },
            done: function (value, date) {
                console.log(value, date)
                $('#TimeVal' + index).text(value)
            }
        });
    });`
    

结果是当我选择了一个时间，后面的实例跟着回显了当前时间，我想要的是后面要选择才回显时间并不是选择了一个时间，后面的框也跟着回显了当前的时间，如下：

试了下因为我的dom结构是非input元素绑定laydate的，

这样div里面有文字就是有那样的问题，没有文字就是正常的，用input绑定也是正常的，但是我需要宽度自适应所以就不想要input元素绑定。有没有大佬有好的想法呢

Answer 1

用input元素宽度比较难做到自适应，所以想办法给非input元素加上placeholder，
解决办法如下：
dom结构：

<div class="layui-inline flex_align">
                            <i>统计时间：</i>
                            <!-- <input type="text" class="layui-input" placeholder="请选择统计时间" readonly="readonly"
                                id="waresTime"> -->
                            <div class="layui-input" id="waresTime" placeholder="请选择统计时间"></div>
                            <em class="x_date flex_center"></em>
                        </div>

css(关键):

.layui-input:empty::before{
    content:attr(placeholder);
}

js:

//同时绑定多个
        lay('.layui-input').each(function (index) {
            laydate.render({
                elem: this,
                trigger: 'click',//可以解决多个实例闪退问题
                // isInitValue: false,//初始值填充（需配合value使用）
                // value:$('#TimeVal'+index).text(),
                range: index < 3 ? '~' : false, //或 range: '~' 来自定义分割字符
                theme: '#0069E0',//主题
                done: function (value, date) {
                    $('#TimeVal' + index).text(value)
                }
            });
        }); 

可参考：
https://www.mybj123.com/4882....

Answer 2

我奇怪的是为什么需要在一个界面中有那么多时间选择交互位置？按理只有一个即可？！
这样就不会有你这样的问题啦。