jquery datepicker参数介绍和示例

下面是关于“jquery datepicker参数介绍和示例”的详细攻略：

什么是jQuery Datepicker

jQuery Datepicker是一个基于jQuery的日期选择插件，它提供了丰富的API，可以让我们对日期选择器进行定制和配置，以满足不同的需求。

基本用法

在使用jQuery Datepicker之前，我们需要先引入jQuery和jQuery UI的库文件，代码如下：

<!-- 引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- 引入jQuery UI -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

然后，我们就可以使用jQuery Datepicker了，代码如下：

<input type="text" id="datepicker">

$(function() {
  $("#datepicker").datepicker();
});

上面的代码中，我们定义了一个输入框，并使用了datepicker()方法将其转换为日期选择器。

参数介绍

jQuery Datepicker提供了很多参数，让我们可以对日期选择器进行各种定制。下面是一些比较常用的参数说明：

• dateFormat：设置日期格式，例如"yy-mm-dd"。
• showButtonPanel：是否显示按钮面板，默认为false。
• numberOfMonths：设置日期选择器的显示方式。可以设置一个数字来显示一个月，也可以设置一个数组来显示多个月。例如：[2, 3]表示显示2行3列。
• firstDay：设置一周的第一天，默认为0，表示星期天。
• minDate和maxDate：设置最小和最大日期。
• onSelect：当选择一个日期时会触发该事件。

完整的参数列表可以参考官方文档：https://api.jqueryui.com/datepicker/#options

示例说明

示例1

下面是一个日期选择器的示例，该示例设置了日期格式为"yy-mm-dd"，并禁用了周末（星期六和星期日），代码如下：

<p>选择日期：<input type="text" id="datepicker"></p>

<script>
  $(function() {
    $("#datepicker").datepicker({
      dateFormat: "yy-mm-dd",
      beforeShowDay: function(date) {
        var day = date.getDay();
        return [(day != 0 && day != 6)];
      }
    });
  });
</script>

示例2

下面是另一个日期选择器的示例，该示例设置了日期选择器显示两行三列，点击选择日期后，会在控制台输出所选择的日期，代码如下：

<p>选择日期：<input type="text" id="datepicker"></p>

<script>
  $(function() {
    $("#datepicker").datepicker({
      numberOfMonths: [2, 3],
      onSelect: function(date) {
        console.log("选择日期：" + date);
      }
    });
  });
</script>

以上就是关于“jquery datepicker参数介绍和示例”的完整攻略，希望对你有所帮助。