jQuery UI日期选择器onSelect选项

jQuery UI的日期选择器小部件提供了许多选项，可以自定义日期选择器的外观和行为。其中，onSelect选项用于在选择器中选择日期触发回调函数。本文将详细介绍onSelect选项的语法和用，并提两个示例说明。

语法

以下是onSelect选项的基本语法：

$(selector).datepicker({
  onSelect: function(dateText, inst) {
    // 回调函数代码
  }
});

在这个语法中，selector是要应用日期选择器的元选择器。dateText是选择器中当前选择的日期文本。inst是日期选择器的实例对象。

示例1：在控制台输出选择的日期

以下是一个示例，演示如何在控制台输出选择器中当前选择的日期：

$( "#datepicker" ).datepicker({
  onSelect: function(dateText, inst) {
    console.log("选择的日期：" + dateText);
  }
});

在这个示例中，我们使用onSelect选项指定了一个回调函数，当选择器中的日期更改时，该函数将在控制台输出选择的日期。

示例2：更新页面中的元素

以下是另一个示例，演示如何在选择器中选择日期时更新页面中的元素：

$( "#datepicker" ).datepicker({
  onSelect: function(dateText, inst) {
    $( "#date" ).text(dateText);
  }
});

在这个示例中，我们使用onSelect选项指定了一个回调函数，当选择器中的日期更改时，该函数将更新页面中的元素#date的文本内容。

综上所述，onSelect选项用于在选择器中选择日期时触发回调函数。本文详细介绍了onSelect选项的语法和用法，并提供了两个示例说明。