如何在额外的日历表中显示 Jquery UI datepicker 年份和月份？

Question

我的问题是 Jquery UI 只允许 select 从下拉菜单中选择年份或月份。

如何修改默认日期选择器以允许 select将年份和月份作为默认日期选择器的附加日历表？

默认视图：

我多么想要 select 个月 -> 点击一个月显示额外的日历：

所需的月份功能：
- 可点击的月份标签
- 没有下拉菜单
- 点击月份标签时 - 它现在应该打开日历，其中日期被月份替换 selection

（屏幕 2 显示当您点击屏幕 1 上的目标区域时发生的情况）

我多么想要 select 年 -> 点击年份显示额外的日历：

所需年份功能：
- 可点击的年份标签
- 没有下拉菜单
- 单击年份标签时 - 它现在应该打开日历，其中天数被年份替换 selection

（屏幕 2 显示当您点击屏幕 1 上的目标区域时发生的情况）

据我了解，我需要创建一个新的日历点击 "month" 或 "year" 标签，但我不知道如何制作它 + 如何显示月份或年份日历而不是下拉菜单。

Answer 1

由于 Datepicker 的动态特性，它会重建每个日历，没有好的方法来做到这一点 "out of the box"。

How can I modify the default date picker to allow selecting year and month as additional calendar tables for default date picker?

这是一个基本示例，说明如何开始设置它。当您进行选择时，问题就出现了。日期选择器重绘所有不同的元素并将删除所有自定义。

示例：https://jsfiddle.net/Twisty/v6c9r8pa/56/

JavaScript

$(function() {
  var dp = $("#datepicker-1").datepicker({
    changeMonth: true,
    changeYear: true
  });
  $("#datepicker-2").datepicker();
  $(".ui-datepicker-month", dp).hide();
  $("<span>", {
    class: "ui-datepicker-month-btn btn"
  }).html($(".ui-datepicker-month option:selected", dp).text()).insertAfter($(".ui-datepicker-month", dp));
  $(".ui-datepicker-year", dp).hide();
  $("<span>", {
    class: "ui-datepicker-year-btn btn"
  }).html($(".ui-datepicker-year option:selected", dp).text()).insertAfter($(".ui-datepicker-year", dp));

  function selectMonth(ev) {
    var mObj = $(ev.target);
    $(".ui-datepicker-month", dp).val(mObj.data("value")).trigger("change");
    $(".ui-datepicker-month-btn", dp).html(mObj.text().trim());
    mObj.closest(".ui-datepicker").find(".ui-datepicker-calendar").show();
    mObj.closest(".ui-datepicker-month-calendar").remove();
  }

  function showMonths(trg) {
    $(".ui-datepicker-calendar", trg).hide();
    var mCal = $("<table>", {
      class: "ui-datepicker-month-calendar"
    }).insertAfter($(".ui-datepicker-calendar", trg));
    var row, cell;
    $(".ui-datepicker-month option").each(function(i, o) {
      if (i % 4 == 0) {
        row = $("<tr>").appendTo(mCal);
      }
      cell = $("<td>").appendTo(row);
      $("<span>", {
          class: "ui-widget-header circle btn"
        })
        .data("value", $(o).val())
        .html($(o).text().trim())
        .click(selectMonth)
        .appendTo(cell);
      if ($(o).is(":selected")) {
        $("span", cell).addClass("selected");
      }
    });
  }

  $(".ui-datepicker-month-btn").click(function() {
    console.log("Show Months");
    showMonths(dp);
  })
});

如果您想进入 "under the hood"，请花一些时间复习以下内容，Widget Factory。

The jQuery UI Widget Factory is an extensible base on which all of jQuery UI's widgets are built. Using the widget factory to build a plugin provides conveniences for state management, as well as conventions for common tasks like exposing plugin methods and changing options after instantiation.

因此您可以从内部重建您自己制作的一些元素，这样当您进行选择时，它会根据您的需要重新绘制所有元素。

如何在额外的日历表中显示 Jquery UI datepicker 年份和月份？

How to show Jquery UI datepicker year and months in extra calendar tables?

jquery-ui

jquery-ui-datepicker