📅 最后修改于: 2023-12-03 15:02:12.745000 🧑 作者: Mango
jQuery UI日期选择器是一个非常流行的日期选择插件，它提供了多种定制选项来满足用户需求。其中一个可用的选项是onSelect，当日期选择器的日期被选中时，该选项将调用一个回调函数。
该回调函数将被传递选择的日期作为第一个参数，并且作为该插件完整的日期实例可用。通过使用该选项，并使用该回调函数，您可以轻松地监听并响应所选日期的更改。
下面我们将简要介绍如何使用onSelect选项，以便改变所选日期的显示方式。
首先，您需要在您的 HTML 文件中引入jQuery和jQuery UI，并在HTML文件中创建一个日期选择器。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI日期选择器onSelect选项示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>日期: <input type="text" id="datepicker"></p>
<script>
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
console.log(date);
}
});
});
</script>
</body>
</html>
在我们的示例中，我们创建了一个具有ID “datepicker”的日期选择器，并将“onSelect”选项设置为一个回调函数。该回调函数将在选择器的日期更改时被调用，并打印所选日期的字符串。
现在，我们将添加一点额外的功能，以显示所选日期的时间戳。要做到这一点，我们将调整回调函数，以便它将所选日期的时间戳显示在日期选择器下方的 <div> 中。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI日期选择器onSelect选项示例</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p>日期: <input type="text" id="datepicker"></p>
<div id="timestamp"></div>
<script>
$( function() {
$( "#datepicker" ).datepicker({
onSelect: function(date) {
var timestamp = $.datepicker.parseDate('yy-mm-dd', date).getTime() / 1000;
$('#timestamp').text('时间戳: ' + timestamp);
}
});
});
</script>
</body>
</html>
现在，当用户选择日期时，我们将把时间戳显示在 <div id="timestamp"> 中。
在本教程中，我们了解了如何使用jQuery UI日期选择器的onSelect选项。使用此选项，您可以轻松地监听并响应所选日期的更改，并将其用于您的自定义JavaScript代码中。