Почему декабрьский месяц не загружается только при выборе варианта 12 в раскрывающемся списке месяцев?

Я работаю по полному календарю. Я вручную добавил раскрывающийся список месяцев после того, как получил ссылку из Интернета. Пока работает исправно. Проблема в том, что до сентября работает нормально. Но когда я выбираю октябрь, он показывает только сентябрь, затем для ноября показывает октябрь, а для декабря показывает только ноябрь. Декабрь не работает в этом раскрывающемся списке и календаре.

Мой код ниже:

$(".fc-right").append('<select class="select_month"><option value="">Select Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mrch</option><option value="4">Aprl</option><option value="5">May</option><option value="6">June</option><option value="7">July</option><option value="8">Aug</option><option value="9">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>');

$(".select_month").on("change", function (event) {
    $('#calendar_full').fullCalendar('changeView', 'month', this.value);
    $('#calendar_full').fullCalendar('gotoDate', y + '-' + this.value + '-1');
}); // y assigned as selected year.

Если я изменю значение параметра для октября на 11, ноября на 12 и декабря на 13, октябрь и ноябрь вернутся к норме, но декабрь все еще не работает.

Как это исправить. Пожалуйста, помогите.


javascript date fullcalendar momentjs fullcalendar-3
person Riya    schedule 15.08.2019    source источник
comment
Есть ли причина, по которой вы используете свой собственный раскрывающийся список для выбора месяца вместо использования элементов управления, которые предоставляет FullCalendar?   -  person Barmar    schedule 15.08.2019
comment
Без рабочего примера я бы предположил, что вы, вероятно, не передаете плагину правильную/совместимую дату/значение для методов changeView или gotoDate.   -  person hungerstar    schedule 15.08.2019
comment
Если я не ошибаюсь, changeView принимает представление в качестве первого параметра ('month'), а Date или его эквивалент строка как вторая. Вы передаете одно число (в виде строки). Вместо этого попробуйте передать что-то вроде '2019-' + ('00' + this.value).slice(-2) + '-01'.   -  person Heretic Monkey    schedule 15.08.2019
comment
@HereticMonkey Разве gotoDate не переопределяет это?   -  person Barmar    schedule 15.08.2019
comment
Второй аргумент changeView является необязательным, попробуйте его не указывать и просто используйте gotoDate.   -  person Barmar    schedule 15.08.2019
comment
@ Бармар Может быть? В этом случае OP может попытаться передать то же значение для вызова gotoDate. Я думаю, что дело в том, чтобы использовать правильно отформатированную дату.   -  person Heretic Monkey    schedule 15.08.2019
comment
Вероятно, нет необходимости в changeView и gotoDate.   -  person Barmar    schedule 15.08.2019
comment
@Barmar извините за поздний ответ, когда я просматриваю все элементы управления календарем, я не могу найти подходящий для моего требования, поэтому я выбираю этот ..   -  person Riya    schedule 15.08.2019
comment
Я использую gotoDate в основном для изменения полного календарного года, который я выбрал с помощью другого текстового поля... и он работает нормально, только декабрьский месяц не отображается.   -  person Riya    schedule 15.08.2019
comment
Подозрительно, что проблема возникает для всех месяцев с 2-мя цифрами.   -  person Barmar    schedule 15.08.2019
comment
Что произойдет, если вы измените -1 на -2.   -  person Barmar    schedule 15.08.2019
comment
@Barmar Если вы это сделаете, формат даты все равно будет недействительным. Смотрите ответ ниже.   -  person ADyson    schedule 15.08.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вы не создаете допустимые строки даты для передачи в функции fullCalendar.

1) this.value будет одним числом. changeView ожидает, что вы предоставите полную дату (см. документацию).

2) y + '-' + this.value + '-1' будет создавать даты, такие как 2019-1-1 или 2019-10-1, которые не являются допустимыми форматами даты RFC2822 или ISO из-за однозначных значений в разделах месяца и дня.

Вы увидите предупреждение в консоли (сгенерированное momentJS), когда попытаетесь использовать эти значения в качестве дат, потому что это не может гарантировать, будут ли они интерпретированы правильно или нет. Очевидно, что в вашем случае происходит некоторая неверная интерпретация, которая приводит к вашей проблеме. документация по MomentJS содержит четкий список поддерживаемых форматов даты. См. также соответствующую документацию по датам fullCalendar v3.

Кроме того, использование changeView и goToDate здесь излишне. Если вы хотите убедиться, что выбрано представление «месяц», используйте changeView, а также передайте дату. Если вы просто хотите изменить дату, не заботясь о типе просмотра, используйте goToDate. В этом примере я предполагаю, что вы хотите changeView.

Исправление простое:

1) убедитесь, что все ваши параметры раскрывающегося списка имеют 2-значное значение

2) также установите жестко запрограммированную строку дня на двузначное 01

3) передать полную строку даты в функцию fullCalendar.

$(".fc-right").append('<select class="select_month"><option value="">Select Month</option><option value="01">Jan</option><option value="02">Feb</option><option value="03">Mrch</option><option value="04">Aprl</option><option value="05">May</option><option value="06">June</option><option value="07">July</option><option value="08">Aug</option><option value="09">Sep</option><option value="10">Oct</option><option value="11">Nov</option><option value="12">Dec</option></select>');

$(".select_month").on("change", function(event) {
  var dateStr = y + '-' + this.value + '-01';
  console.log(dateStr);
  $('#calendar_full').fullCalendar('changeView', 'month', dateStr);
});

Рабочая демонстрация: http://jsfiddle.net/f362m5du/2/

person ADyson    schedule 15.08.2019
comment
Почему это работает с 2019-3-1, но с ошибкой на 1 с 2019-10-1? Они оба имеют однозначную часть дня. Это просто случайность, что он работает для первого? - person Barmar; 15.08.2019
comment
@ Бармар, я так полагаю. Конструктор JS Date просто делает все возможное с тем, что вы ему даете, если он не распознает формат. Результаты не гарантируются. Поведение может даже различаться в разных браузерных движках. Он делает это вместо того, чтобы просто выдавать ошибку, что, ИМХО, немного глупо. - person ADyson; 15.08.2019
comment
Я думал, что он использует синтаксический анализатор moment.js, а не собственный синтаксический анализатор JS. - person Barmar; 15.08.2019
comment
fullCalendar действительно использует momentJS, но полное предупреждение, которое вы видите в браузере от momentJS, если вы используете неверную строку даты, гласит: Предупреждение об устаревании: предоставленное значение не соответствует распознанному формату RFC2822 или ISO. Момент построения возвращается к js Date(), который не надежен во всех браузерах и версиях. Форматы даты, отличные от RFC2822/ISO, не рекомендуются и будут удалены в предстоящем основном выпуске. См. momentjs.com/guides/#/warnings/js-date для получения дополнительной информации. В общем, momentJS не может прочитать это и предупреждает вас. JS Date также не всегда может его прочитать, но не предупреждает вас. - person ADyson; 15.08.2019
comment
Это имеет смысл. Есть много других вопросов о странных результатах родного парсера дат. - person Barmar; 15.08.2019
comment
@ Бармар, да. Это дерьмо (ИМХО), поэтому такие библиотеки, как momentJS, действительно полезны :-) - person ADyson; 15.08.2019
comment
@ADyson Привет Ура, одна функция работает у меня в текущем году отлично, но в другой функции я устанавливаю значение y в качестве выбранного года, согласно моему коду, y правильно выбираю год, но при использовании этого раскрывающегося списка год становится текущим год. Допустим, я выбираю 2012 год, календарь переходит на январь 2012 года, но когда я использую раскрывающийся список, чтобы выбрать апрель, он переходит на апрель 2019 года. К вашему сведению, эти функции отлично работали на моих старых кодах, за исключением проблемы с декабрем. - person Riya; 15.08.2019
comment
@Riya, хорошо, вы не включили код для выбора года в свой вопрос, поэтому я не могу нести ответственность за эту конкретную часть проблемы. Для моей демонстрации мне пришлось жестко закодировать год, потому что у меня не было возможности узнать, как вы создаете это значение. Вы случайно скопировали мою жестко закодированную строку y = 2019 в свой код? - person ADyson; 15.08.2019
comment
var year = $("#CalendarYear").val(); $(".select_month").on("change", function (event) { $('#calendar_full').fullCalendar('changeView', 'month', this.value); $('#calendar_full').fullCalendar('gotoDate', year + '-' + this.value + '-1'); }); Это был код, который я использовал для этой функции. а для текстового поля «Календарный год» я даю ссылку на календарь только для выбора года, так что только четырехзначный год может загружаться в текстовое поле, например «2012», «2015» и т. д. - person Riya; 15.08.2019
comment
@Riya Я думаю, вам нужно определить year внутри функцию изменения, чтобы вы всегда выбирали самое последнее значение. - person ADyson; 15.08.2019
comment
@Riya вместо создания собственных настраиваемых элементов управления для этого, почему бы не использовать что-то вроде модифицированного средства выбора даты jQueryUI для выбора значений месяца и года? например jsfiddle.net/DBpJe/7755 . (Вам не обязательно прикреплять его к текстовому полю.) - person ADyson; 15.08.2019
comment
на самом деле, я использую эту же функцию в двух разных местах: одно для текущего года, другое для выбора прошлых лет. Я дал коды для текущего рассматриваемого года, тогда как я забыл упомянуть присвоение значения для y. для моей функции вопроса, var y = new Date().getFullYear();, я присваиваю значение для y как dis - person Riya; 15.08.2019
comment
вот почему вы всегда получаете текущий год... вместо этого попробуйте y = $("#CalendarYear").val();, чтобы получить значение, выбранное пользователем - person ADyson; 15.08.2019
comment
Поскольку это две разные функции, назначить год или год не проблема. Несмотря на то, что я попробовал ваш последний ответ 'y = $("#CalendarYear").val();, он не работает. К вашему сведению, если я назначу var year = $("#CalendarYear").val();, то я изменю код в функции изменения как var dateStr = year + '-' + this.value + '-01';. - person Riya; 15.08.2019
comment
без полного рабочего примера будет сложно диагностировать. Как я уже говорил ранее, на основе показанного вами небольшого фрагмента я подозреваю, что проблема может заключаться в том, что вы устанавливаете значение для year в какой-то другой момент в коде, и если пользователь затем изменит значение в текстовом поле и затем выбирает месяц, вы не читаете последнее значение. Попробуйте так: jsfiddle.net/zLh2swjb - person ADyson; 15.08.2019
comment
Большое спасибо @ADyson. Я обнаружил, где я сделал ошибку. Когда я отлаживаю, я обнаружил, что код выполняет другой цикл, поэтому он не работает, с кодом нет проблем. Большое спасибо - person Riya; 15.08.2019