Как отобразить год и месяцы Jquery пользовательского интерфейса в дополнительных календарных таблицах? - PullRequest
Новая
       155

Как отобразить год и месяцы Jquery пользовательского интерфейса в дополнительных календарных таблицах?

0 голосов
/ 26 марта 2020

Моя проблема в том, что Jquery Пользовательский интерфейс позволяет выбрать год или месяц только из выпадающего меню.

Как можно изменить средство выбора даты по умолчанию, чтобы разрешить выбор года и месяца в качестве дополнительных таблиц календаря для средства выбора даты по умолчанию?

Вид по умолчанию:

default date picker: days in calendar + month and year dropdowns

Как я хочу выбрать месяцы -> нажатие на месяц, чтобы отобразить дополнительный календарь:

  1. Требуемая функциональность месяца :
    • метка месяца, которую можно активировать нажатием
    • без выпадающих списков
    • при нажатии на метку месяца - должен открыться календарь, в котором дни заменены на выбор месяца

screen 1

screen 2

(на экране 2 показано, что происходит при нажатии на целевая область на экране 1)

Как выбрать годы -> щелчок по году, чтобы отобразить дополнительный календарь:

Требуемая функциональность года:

  • метка года, по которой можно нажимать
  • без выпадающих списков
  • при нажатии на метку года - теперь должен открываться календарь с днями заменено выбором года

screen 1

screen 2

(на экране 2 показано, что происходит, когда вы нажимаете на целевую область на экране 1)

Как я понимаю, мне нужно создать новые календари на ярлыке "месяц" или "год", но я понятия не имею, как это сделать + как показывать месяцы или годы в календаре вместо выпадающего списка.

1 Ответ

0 голосов
/ 01 апреля 2020

Из-за динамического c характера Datepicker, он перестраивает каждый календарь, нет хорошего способа сделать это "из коробки".

Как изменить средство выбора даты по умолчанию, чтобы разрешить выбор года и месяца в качестве дополнительных таблиц календаря для средства выбора даты по умолчанию?

Вот базовый c пример как ты мог начать это настраивать. Проблема возникает, когда вы делаете выбор. DatePicker redr aws всех различных элементов и удалит все настройки.

Пример: 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);
  })
});

Если вы хотите попасть «под капот», найдите некоторое время, чтобы рассмотреть следующее: Widget Factory .

The jQuery UI Widget Factory - это расширяемая база, на которой построены все jQuery виджеты пользовательского интерфейса. Использование фабрики виджетов для создания плагина предоставляет удобства для управления состоянием, а также соглашения для общих задач, таких как предоставление методов плагина и изменение параметров после создания экземпляра.

Таким образом, вы можете перестроить некоторые элементы в вашем самостоятельно делать изнутри, так что, когда вы делаете выбор, он перетаскивает aws всех элементов по вашему желанию.

...