Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法

问题描述：

Laydate时间组件在火狐浏览器下，当页面上有多个时间输入框时，只会给第一个时间输入框赋值，其他时间输入框无法获取到值，这给使用Laydate组件的开发人员带来很大的困扰。

问题解决：

Laydate时间组件在火狐浏览器下无法正常赋值，是因为火狐浏览器不支持同一个页面上有多个相同ID的元素。在Laydate时间组件中，每个时间输入框都需要设置一个唯一的ID，但是Laydate组件会自动在页面中动态创建DOM元素，导致同一个ID出现在多个时间输入框上，从而导致无法正确获取到值。因此，需要对Laydate时间组件进行修改，使之可以支持在同一个页面上有多个时间输入框的情况。

解决方法：

1.将Laydate.js文件进行修改，使之支持自定义ID
在Laydate源代码中，将elem.value修改为_this.config.elem[0].value；同时，在elem.attr('readonly', 'readonly')后面添加以下代码：

if (_this.config.elem.length > 1) {
  var elem_id = _this.config.elem.attr('id');
  if (elem_id) {
    elem_id = elem_id + Math.floor(Math.random() * 10000);
  } else {
    _this.config.elem.attr('id', 'laydate_' + Math.floor(Math.random() * 10000));
  }
  _this.config.elem.attr('data-laydate-id', elem_id);

  _this.config.elem.each(function () {
    var that = this;
    if (that != _this.config.elem[0]) {
      $(that).attr('id', elem_id);
    }
  });
}

上述代码会在输入框添加唯一的ID并将其存储在data-laydate-id属性中，以便在Laydate组件中获取到当前时间输入框的唯一ID。

2.在调用Laydate组件的时候，将ID指定为唯一ID
在使用Laydate时间组件的时候，需要将当前时间输入框的ID指定为唯一ID。例如：

<input type="text" id="start_time">
<input type="text" id="end_time">

<script>
  // 使用Laydate组件
  laydate.render({
    elem: '#start_time', // 指定唯一ID
  });

  laydate.render({
    elem: '#end_time', // 指定唯一ID
  });
</script>

在上述代码中，分别给两个时间输入框指定了唯一ID，并且在调用Laydate组件的时候，将ID指定为唯一ID，这样就可以正常使用Laydate组件了。

示例说明：

假设有一个页面上有两个时间输入框，分别为开始时间和结束时间，需要使用Laydate组件实现时间选择。可以按照以下步骤进行操作：

1.修改Laydate.js文件，使之支持自定义ID。修改后的代码如下：

以上为Laydate.js代码中，对应问题解决方法1的代码添加。

2.在页面中引入Laydate.js和jQuery，然后对时间输入框进行初始化。

<input type="text" id="start_time">
<input type="text" id="end_time">

<script src="jquery.js"></script>
<script src="laydate.js"></script>
<script>
  laydate.render({
    elem: '#start_time',
  });

  laydate.render({
    elem: '#end_time',
  });
</script>

在上述代码中，首先引入了jQuery和Laydate.js库，然后使用Laydate.render方法分别对开始时间和结束时间输入框进行初始化。

3.在浏览器中查看效果

在浏览器中打开页面，可以看到开始时间和结束时间输入框已经可以正常使用Laydate组件了，不会出现无法正常赋值的问题。

总结：

针对Laydate时间组件火狐浏览器下只能给第一个输入框赋值的问题，需要对Laydate.js文件进行修改，使之支持自定义ID；在使用Laydate组件时，需要将ID指定为唯一ID。以上操作可以使Laydate时间组件可以在同一个页面上正常使用。