layui时间控件清空之后无法正常使用的问题

1. layui时间控件简介

Layui是一款企业级前端UI框架，提供了一系列常用的UI组件，如日期控件、表格、分页、上传等。

日期控件是Layui提供的常用组件之一，它可以帮助我们快速地实现日历选择功能，并且可以自定义一些选项，如日期范围、时间选择等。

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1' //指定元素
  });
});

2. 清空时间控件的问题

在使用Layui的日期控件过程中，我们经常会遇到这样一个问题：清空日期后，再次选择日期时控件无法正常显示选择的日期。

这个问题的原因是，当我们清空日期控件后，控件会将日期输入框的值设为null或""，而日期控件在渲染时会读取这个值，如果这个值不符合日期格式，就会出现无法正常选择日期的问题。

3. 解决方案

3.1 配置format

为了解决这个问题，我们可以为日期控件配置format选项，让日期控件在读取输入框的值时，将这个值解析成指定格式的日期字符串。

layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1', //指定元素
    format: 'yyyy-MM-dd'
  });
});

在这个例子中，我们将format设置为‘yyyy-MM-dd’，意思是日期控件在读取输入框的值时，会将这个值解析成‘年-月-日’的格式。

3.2 自定义解析函数

除了配置format，我们还可以通过自定义解析函数来解决这个问题。我们可以在laydate实例的value属性上设置一个解析函数，这个函数会在解析输入框的值时被调用，我们可以在这个函数中将输入框的值转换成指定格式的日期字符串。

layui.use('laydate',function(){
  var laydate = layui.laydate;
  
  //执行一个laydate实例
  laydate.render({
    elem: '#test1',
    value: '2019-6-12',
    done: function(value, date){
      if(value === ''){
        //清空日期
        laydate.render({
          elem: '#test1',
          value: null
        });
      }
    },
    value: function(date, value){
      //将输入框的值解析成'yyyy-MM-dd'的格式
      return value.replace(/\./g,'/');
    }
  });
});

在这个例子中，我们在laydate实例的done回调函数中处理了清空日期的情况，将输入框的值设置为null。

4. 总结

通过上面的介绍，我们了解了Layui的日期控件以及清空日期控件后无法正常使用的问题，并且提供了两种解决方案：配置format和自定义解析函数。

对于清空日期控件后无法正常使用的问题，我们还需要注意一些细节，如清空日期时不要直接将输入框的值设置为""，而是要设置为null，否则可能会出现一些奇怪的问题。