jQuery UI Datepicker showOn 选项

showOn 选项是 jQuery UI Datepicker 插件提供的一个配置项，用于指定触发日期选择器的元素和事件。

语法

showOn: String | Boolean

• 如果为字符串，可以是 focus、button 或 both。
• 如果为布尔值 true（默认值），表示在日期输入框获得焦点时显示日期选择器。
• 如果为布尔值 false，则不会自动显示日期选择器，需要通过其他方式手动触发。

示例

1. showOn: "focus"

当日期输入框获得焦点时自动显示日期选择器。

$(function() {
  $("#datepicker").datepicker({
    showOn: "focus"
  });
});

2. showOn: "button"

在输入框旁边添加一个按钮，单击按钮时显示日期选择器。

$(function() {
  $("#datepicker").datepicker({
    showOn: "button"
  });
});

3. showOn: "both"

既可以通过日期输入框获得焦点显示，也可以通过按钮显示。

$(function() {
  $("#datepicker").datepicker({
    showOn: "both"
  });
});

4. showOn: false

不自动显示日期选择器，需要通过其他方式手动触发。

$(function() {
  $("#datepicker").datepicker({
    showOn: "false"
  });

  $("#button").click(function() {
    $("#datepicker").datepicker("show");
  });
});

以上示例中，#datepicker 是日期输入框的 ID，#button 是触发按钮的 ID。

结论

通过 showOn 选项，可以控制日期选择器的自动显示方式，方便用户选择日期，提升用户体验。同时也可以通过手动触发的方式，更加灵活地调用日期选择器。