在Web开发中，日期选择器是一个不可或缺的组件，它可以帮助用户方便地选择和输入日期。Laydate是一个基于原生JavaScript的日期和时间选择器插件，它简单易用，功能丰富。本文将详细介绍Laydate的按钮回调功能，并通过实战案例帮助你更好地理解和应用。

什么是按钮回调？

在Laydate中，按钮回调是指在日期选择器打开后，某些按钮（如今天、清空等）被点击时触发的函数。这些回调函数可以让你在用户操作日期选择器时执行一些自定义的操作，如更新页面数据、显示提示信息等。

使用Laydate的按钮回调

要使用Laydate的按钮回调功能，首先需要引入Laydate的CSS和JavaScript文件。以下是一个基本的示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Laydate按钮回调示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" media="all">
</head>
<body>

<div id="demo"></div>

<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  // 基本初始化
  laydate.render({
    elem: '#demo',
    done: function(value, date, endDate){
      console.log(value); //得到日期生成的值，如：2020-09-01
      console.log(date); //得到日期时间对象：{year: 2020, month: 9, date: 1, hours: 0, minutes: 0, seconds: 0}
      console.log(endDate); //结束的日期时间对象，开启范围选择（range: true）时有效
    }
  });
  
  // 监听今天按钮
  laydate.on('date(today)', function(date){
    console.log(date); //当前点击的日期
    // 执行自定义操作，例如：将日期设置为今天
    document.getElementById('demo').innerHTML = date.year + '-' + date.month + '-' + date.date;
  });
});
</script>

</body>
</html>

在上面的示例中，我们创建了一个日期选择器，并监听了“今天”按钮的点击事件。当用户点击“今天”按钮时，会在控制台输出当前点击的日期，并在页面上显示该日期。

实战案例：禁用过去日期

以下是一个实战案例，我们将使用Laydate的按钮回调功能来禁用日期选择器中过去的日期：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Laydate禁用过去日期示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css" media="all">
</head>
<body>

<div id="demo"></div>

<script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.all.js"></script>
<script>
layui.use('laydate', function(){
  var laydate = layui.laydate;
  
  // 基本初始化
  laydate.render({
    elem: '#demo',
    done: function(value, date, endDate){
      console.log(value); //得到日期生成的值
    },
    calendar: true,
    trigger: 'click',
    choose: function(date){
      if(date.year < 2023){
        return false;
      }
    }
  });
});
</script>

</body>
</html>

在这个示例中，我们通过choose回调函数来禁用选择器中2023年之前的日期。这样，用户就只能选择2023年及以后的日期。

总结

通过本文的介绍，相信你已经对Laydate的按钮回调功能有了深入的了解。在实际应用中，你可以根据需求灵活运用这些回调函数，为用户打造更加便捷和个性化的日期选择体验。