Як і багато інших, я стикався з численними проблемами, намагаючись це зробити, і лише комбінація розміщених рішень, і врешті-решт великий злом, щоб зробити його ідеальним, придумав мені рішення.
Проблеми з іншими рішеннями в цій темі, які я спробував:
- Вибравши нову дату в панелі дат, також буде змінено (внутрішню) дату інших вибирачів дат, тому коли ви знову відкриєте інші (або спробуєте отримати їх дату), вони матимуть іншу дату, ніж та, яка відображається у призначеному введенні. -поле.
- Вибір дат не "запам'ятав" дату, коли її відкрили знову.
- Код жонглювання датами, що використовується підстроковим рядком, таким чином він не був сумісний з усіма форматами
- "Місячний вибір" змінив поле введення лише після його закриття, а не коли змінилися значення.
- Поле введення не оновлюється правильно, якщо ви введете неправильно відформатований рядок введення для дати, а потім натисніть «Закрити» на панелі вибору дати.
- Я не можу мати звичайних вибирачів дат, які показують дні, на тій же сторінці, що й місячні, які не показують дні.
Нарешті я знайшов спосіб виправити всі ці проблеми . Перші чотири можна виправити, обережно ставлячись до того, як ви посилаєтесь на підбирачі дат і місяців у їхньому внутрішньому коді, і, звичайно, роблячи оновлення вибраних вручну. Це ви можете бачити в прикладах інстанцій біля нижньої частини. П’яту проблему можна допомогти, додавши якийсь спеціальний код до функцій вибору дати.
ПРИМІТКА. Вам не потрібно використовувати наступні сценарії вибору місяця, щоб виправити перші три проблеми у вашому звичайному виборі дат. Просто використовуйте скрипт для вибору дати внизу цієї публікації.
Тепер, щоб скористатись місячними виборцями та виправити останню проблему, нам потрібно відокремити збирачів дат та виборів місяців. Ми могли б отримати один з небагатьох доповнень jpiker-інтерфейсу jQuery-інтерфейсу користувача, але деяким не вистачає гнучкості / можливостей локалізації, деяким не вистачає підтримки анімації ... так що робити? Розкачайте свій "власний" з коду дати-вибору! Це дає вам повноцінно функціонуючий місяць, з усіма функціональними можливостями дата-вибору, без відображення днів.
Я надав js-скрипт monthpicker та супровідний CSS-скрипт , використовуючи описаний нижче метод, з кодом jQuery-UI v1.11.1. Просто скопіюйте ці фрагменти коду у два нові файли, monthpicker.js та monthpicker.css відповідно.
Якщо ви хочете почитати про досить простий процес, за допомогою якого я перетворив дату вибору в місяць, перейдіть до останнього розділу.
Тепер додайте на сторінку збирачів дат та вибору місяців!
Ці наступні фрагменти коду JavaScript працюють з декількома вибирачами дат та / або місячними виборцями на сторінці без вищезазначених проблем! Виправлено загалом за допомогою "$ (це)." багато :)
Перший сценарій призначений для звичайного вибору дат, а другий - для "нових" місячних.
Подальше коментар. , Який дає змогу створити якийсь елемент для очищення поля введення, викрадений з відповіді Пола Річардса.
Я використовую формат "MM yy" у своєму місячному виборі та формат "yy-mm-dd" у своєму датчику, але це повністю сумісно з усіма форматами , тому ви можете користуватися будь-яким потрібним. Просто змініть параметр 'dateFormat'. Стандартні параметри "showButtonPanel", "showAnim" та "yearRange", звичайно, необов'язкові та підлаштовуються під ваші побажання.
Додавання вибору дати
Ідентифікатор вибору дат.
Ця іде від 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 на сторінку, яку ви хочете використовувати.
Ініціатива
вибору місяця Значення, отримане з цього місяця, завжди є ПЕРШИМ днем вибраного місяця. Починається в поточному місяці і становить від 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")) на щось, що працює для вас.
Я сподіваюся, що це комусь допоможе.
Посилання на папки для додаткових налаштувань вибору дати та місяця:
Вибір місяця працює в останній день місяця . Дата, яку ви отримаєте від цього місяця, завжди буде останнім днем місяця.
Два співпрацівники, що співпрацюють ; 'start' працює з першого числа місяця, а 'end' працює над останнім місяцем. Вони обидва обмежені один одним, тому вибір місяця на "кінець", який знаходиться до вибраного місяця на "старт", змінить "початок" таким же місяцем, що і "кінець". І навпаки. ОПЦІОНАЛЬНО: Коли вибираєте місяць на "старт", "minDate" on "end" встановлюється на цей місяць. Щоб видалити цю функцію, прокоментуйте один рядок у onClose (прочитайте коментарі).
Два співавтори, які співпрацюють ; Вони обидва обмежені один одним, тому вибір дати "закінчення", що передує вибраній даті "старту", змінить "початок" таким же місяцем, що і "кінець". І навпаки. ОПЦІОНАЛЬНО: Коли ви вибираєте дату на "старт", "minDate" on "end" встановлюється на цю дату. Щоб видалити цю функцію, прокоментуйте один рядок у onClose (прочитайте коментарі).
Як я змінив DatePicker на статус MonthPicker
Я взяв увесь код JavaScript від jquery-ui-1.11.1.js, що стосується їх вибору дат, вставив його в новий js-файл і замінив такі рядки:
- "datepicker" ==> "monthpicker"
- "Datepicker" ==> "Вибір місяця"
- "Вибір дати" ==> "Вибір місяця"
- "Вибір дати" ==> "Вибір місяця"
Потім я видалив частину for-loop, яка створює весь поділ 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"
