Как и многие другие, я столкнулся с многочисленными проблемами, пытаясь это сделать, и только комбинация опубликованных решений и, в конечном итоге, большой взлом, чтобы сделать его идеальным, дали мне решение.
Проблемы с другими решениями в этой теме, которые я пробовал:
- Выбор новой даты в устройстве выбора даты также приведет к изменению (внутренней) даты других средств выбора даты, поэтому при повторном открытии других (или попытке получить их дату) они будут иметь другую дату, чем та, которая отображается в назначенном им входе. -field.
- DatePicker не будет «помнить» дату при повторном открытии.
- Код для манипулирования датами использовал подстроку, поэтому он не был совместим со всеми форматами.
- «Мой ежемесячник» изменял поле ввода только при его закрытии, а не всякий раз, когда значения менялись.
- Поле ввода не обновляется правильно, если вы введете неправильно отформатированную строку ввода для даты, а затем нажмете «Закрыть» в средстве выбора даты.
- Я не могу иметь обычные средства выбора даты, которые показывают дни, на той же странице, что и средства выбора месяца, которые не показывают дни.
Я наконец-то нашел способ исправить все эти проблемы . Первые четыре можно исправить, просто следя за тем, как вы ссылаетесь на сборщиков дат и месяцев в их внутреннем коде, и, конечно, проводите ручное обновление ваших сборщиков. Это вы можете увидеть в примерах реализации в нижней части. Пятой проблеме можно помочь, добавив некоторый пользовательский код в функции DatePicker.
НОТА: Вам НЕ нужно использовать следующие сценарии выбора месяца, чтобы исправить первые три проблемы обычного средства выбора даты. Просто используйте скрипт создания даты в нижней части этого поста.
Теперь, чтобы использовать сборщики месяцев и исправить последнюю проблему, нам нужно разделить сборщики данных и сборщики месяцев. Мы могли бы получить одно из немногих аддонов для ежемесячного выбора jQuery-UI, но некоторым не хватает гибкости / способности локализации, некоторым не хватает поддержки анимации ... так что же делать? Бросьте свой "собственный" из кода datepicker! Это дает вам полностью функционирующее средство выбора месяца со всеми функциями средства выбора даты, без отображения дней.
Я поставил js-скрипт для месячного выбора и соответствующий CSS-скрипт , используя метод, описанный ниже, с кодом jQuery-UI v1.11.1. Просто скопируйте эти фрагменты кода в два новых файла, monthpicker.js и monthpicker.css соответственно.
Если вы хотите прочитать о довольно простом процессе, с помощью которого я преобразовал средство выбора даты в средство выбора месяца, прокрутите вниз до последнего раздела.
Теперь, чтобы добавить даты и месяцы на страницу!
Эти следующие фрагменты кода javascript работают с несколькими сборщиками дат и / или сборщиками месяцев на странице без вышеупомянутых проблем! Исправлено, как правило, с помощью '$ (this).' много :)
Первый скрипт предназначен для обычного средства выбора даты, а второй - для «нового» средства выбора месяца.
Вне прокомментировал .after , который позволяет создавать какой - то элемент , чтобы очистить поле ввода-, украден от ответа Пол Ричардс.
Я использую формат «MM yy» в моем месячном средстве выбора и формат «yy-mm-dd» в моем указателе даты, но он полностью совместим со всеми форматами , поэтому вы можете использовать любой, какой захотите. Просто измените параметр dateFormat. Стандартные параметры 'showButtonPanel', 'showAnim' и 'yearRange', конечно, являются необязательными и настраиваются в соответствии с вашими пожеланиями.
Добавление указателя даты
Datepicker экземпляр.
Этот идет от 90 лет назад и до наших дней. Это поможет вам сохранить правильность поля ввода, особенно если вы установите параметры defaultDate, minDate и maxDate, но может справиться с этим, если вы этого не сделаете. Он будет работать с любым форматом даты, который вы выберете.
$('#MyDateTextBox').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showMonthAfterYear: true,
showWeek: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-90:",
minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()),
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
onClose: function (dateText, inst) {
// When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically
// updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI.
// This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field,
// and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the default date, because the date seems valid.
// We do not need to manually update the input-field, as datepicker has already done this automatically.
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
console.log("onClose: " + err);
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// Instead, we set the current date, as well as the value of the input-field, to the last selected (and
// accepted/validated) date from the datepicker, by getting its default date. This only works, because
// we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow'
// and 'onClose'.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
},
beforeShow: function (input, inst) {
// beforeShow is particularly irritating when initializing the input-field with a date-string.
// The date-string will be parsed, and used to set the currently selected date in the datepicker.
// BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not
// automatically updated, only the internal selected date, until you choose a new date (or, because
// of our onClose function, whenever you click close or click outside the datepicker).
// We want the input-field to always show the date that is currently chosen in our datepicker,
// so we do some checks to see if it needs updating. This may not catch ALL cases, but these are
// the primary ones: invalid date-format; date is too early; date is too late.
try {
// If datepicker can parse the date using our formatstring, the instance will automatically parse
// and apply it for us (after the onClose is done).
// If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch.
// If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null!
var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val());
// typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to
// reset to the last set default date.
// You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;'
if (typedDate == null)throw "No date selected";
// We do a manual check to see if the date is within minDate and maxDate, if they are defined.
// If all goes well, the default date is set to the new date, and datepicker will apply the date for us.
var minDate = $(this).datepicker("option", "minDate");
var maxDate = $(this).datepicker("option", "maxDate");
if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!";
if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!";
// We update the input-field, and the default date, because the date seems valid.
// We also manually update the input-field, as datepicker does not automatically do this when opened.
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate));
$(this).datepicker('option', 'defaultDate', typedDate);
}
catch (err) {
// Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose
// a new valid date, by clicking on a day.
// We want the same behavior when opening the datepicker, so we set the current date, as well as the value
// of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting
// its default date. This only works, because we manually change the default date of the datepicker whenever
// a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options.
var date = $(this).datepicker('option', 'defaultDate');
$(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date));
$(this).datepicker('setDate', date);
}
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
Добавление месяца
Включите файл monthpicker.js и файл monthpicker.css на страницу, которую вы хотите использовать.
Создание экземпляра Monthpicker
Значение, полученное из этого месяца, всегда является ПЕРВЫМ днем выбранного месяца. Начинается с текущего месяца и варьируется от 100 лет назад до 10 лет в будущем.
$('#MyMonthTextBox').monthpicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showMonthAfterYear: true,
showAnim: "drop",
constrainInput: true,
yearRange: "-100Y:+10Y",
minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1),
maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1),
defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
// Monthpicker functions
onClose: function (dateText, inst) {
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
},
beforeShow: function (input, inst) {
if ($(this).monthpicker("getDate") !== null) {
// Making sure that the date set is the first of the month.
if($(this).monthpicker("getDate").getDate() !== 1){
var date = new Date(inst.selectedYear, inst.selectedMonth, 1);
$(this).monthpicker('option', 'defaultDate', date);
$(this).monthpicker('setDate', date);
}
} else {
// If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month!
$(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate'));
}
},
// Special monthpicker function!
onChangeMonthYear: function (year, month, inst) {
$(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1)));
}
})
//.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it
// $("<a href='javascript: void(0);'>clear</a>").click(function() {
// $(this).prev().val('');
// })
//)
;
Это оно!
Это все, что вам нужно, чтобы сделать ежемесячный сборщик.
Я не могу заставить jsfiddle работать с этим, но он работает для меня в моем проекте ASP.NET MVC. Просто сделайте то, что вы обычно делаете, чтобы добавить средство выбора даты на свою страницу и включить вышеупомянутые сценарии, возможно, изменив селектор (то есть $ ("# MyMonthTextBox")) на то, что вам подходит.
Я надеюсь, что это помогает кому-то.
Ссылки на pastebins для некоторых дополнительных настроек даты и месяца:
Monthpicker работает в последний день месяца . Дата, которую вы получаете от этого месяца, всегда будет последним днем месяца.
Два сотрудничающих сборщика месяцев ; «start» работает с первым месяцем, а «end» работает с последним месяцем. Они оба ограничены друг другом, поэтому выбор месяца в конце, предшествующего выбранному месяцу в начале, изменит начало на тот же месяц, что и конец. И наоборот. ДОПОЛНИТЕЛЬНО: При выборе месяца для «начала» значение «minDate» для «конца» устанавливается на этот месяц. Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).
Два сотрудничающих сборщика даты ; Они оба ограничены друг другом, поэтому выбор даты в конце, предшествующей выбранной дате начала, изменит начало на тот же месяц, что и конец. И наоборот. ДОПОЛНИТЕЛЬНО: При выборе даты «начало», «minDate» на «конец» устанавливается на эту дату. Чтобы удалить эту функцию, закомментируйте одну строку в onClose (прочитайте комментарии).
Как я изменил DatePicker, чтобы стать MonthPicker
Я взял весь код javascript из jquery-ui-1.11.1.js, относящийся к их средству выбора даты, вставил его в новый js-файл и заменил следующие строки:
- "datepicker" ==> "monthpicker"
- "Datepicker" ==> "Monthpicker"
- "Выбор даты" ==> "Выбор месяца"
- «Выбор даты» ==> «Выбор месяца»
Затем я удалил часть цикла for, которая создает весь div ui-datepicker-calendar (div, который другие решения скрывают с помощью CSS). Это можно найти в функции _generateHTML: (inst).
Найдите строку, которая говорит:
"</div><table class='ui-datepicker-calendar'><thead>" +
Отметьте все, начиная с закрывающего тега div и вплоть до (и не включая) строки, где написано:
drawMonth++;
Теперь это будет несчастным, потому что нам нужно закрыть некоторые вещи. После этого закрывающего тега div добавьте следующее:
";
Код теперь должен быть красиво соединен вместе. Вот фрагмент кода, показывающий, чем вы должны были закончить:
...other code...
calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
(/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") +
(/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") +
this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate,
row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers
"</div>";
drawMonth++;
if (drawMonth > 11) {
drawMonth = 0;
drawYear++;
}
...other code...
Затем я скопировал / вставил код из jquery-ui.css, относящийся к указателям даты, в новый CSS-файл и заменил следующие строки:
- "datepicker" ==> "monthpicker"
