다른 많은 사람들과 마찬가지로이 작업을 수행하는 데 많은 문제가 발생했으며 솔루션의 조합 만 게시하고 궁극적으로 완벽하게 해킹하여 솔루션을 얻었습니다 .
내가 시도한이 스레드의 다른 솔루션 관련 문제 :
- 날짜 선택기에서 새 날짜를 선택하면 다른 날짜 선택기의 (내부) 날짜도 변경되므로 다른 날짜 선택기를 다시 열거 나 날짜를 가져 오려고하면 지정된 입력에 표시된 날짜와 다른 날짜가됩니다. -들.
- 날짜 선택기는 다시 열 때 날짜를 "기억"하지 않습니다.
- 날짜를 저글링하는 코드는 하위 문자열을 사용하므로 모든 형식과 호환되지 않았습니다.
- "나의 monthpicker"는 값을 변경할 때가 아니라 입력 필드를 닫을 때만 입력 필드를 변경했습니다.
- 날짜 형식이 잘못된 입력 문자열을 입력 한 후 날짜 선택기에서 '닫기'를 클릭하면 입력 필드가 올바르게 업데이트되지 않습니다.
- 일자를 표시하지 않는 monthpickers와 동일한 페이지에 일자를 표시하는 일반적인 날짜 선택기를 사용할 수 없습니다.
마침내이 모든 문제 를 해결 하는 방법을 찾았습니다 . 처음 네 개는 날짜 및 월 선택기를 내부 코드에서 참조하는 방법에주의하고 선택기를 수동으로 업데이트하여 간단히 수정할 수 있습니다. 이것은 하단 근처의 인스턴스화 예제에서 볼 수 있습니다. 다섯 번째 문제는 datepicker 함수에 사용자 정의 코드를 추가하여 도움이 될 수 있습니다.
참고 : 일반적인 날짜 선택 도구에서 처음 세 가지 문제를 해결하기 위해 다음 달 선택 도구를 사용할 필요는 없습니다. 이 게시물의 하단 근처에 날짜 선택기 인스턴스화 스크립트를 사용하십시오.
이제 월별 선택기를 사용하고 마지막 문제를 해결하려면 날짜 선택기와 월 선택기를 분리해야합니다. 우리는 몇 가지 jQuery-UI 월별 선택기 애드온 중 하나를 얻을 수 있지만 일부는 현지화 유연성 / 기능이 부족하고 일부는 애니메이션 지원이 부족합니다 ... 그래서 어떻게해야합니까? 날짜 선택기 코드에서 "자신의"롤을 만드십시오! 그러면 날짜 표시없이 날짜 선택기의 모든 기능을 갖춘 완전한 기능의 월별 선택기를 사용할 수 있습니다.
I는 공급하고 monthpicker의 JS 스크립트 및 첨부 CSS 스크립트를 상기 방법은 - JQuery와 UI의 v1.11.1 코드 후술 사용. 이 코드 스 니펫을 각각 monthpicker.js와 monthpicker.css라는 두 개의 새 파일로 복사하십시오.
datepicker를 monthpicker로 변환 한 다소 간단한 프로세스에 대해 읽으려면 마지막 섹션으로 스크롤하십시오.
이제 날짜 선택기 및 월 선택기를 페이지에 추가하십시오!
다음 자바 스크립트 코드 조각 은 위에서 언급 한 문제없이 페이지에서 여러 날짜 선택기 및 / 또는 월 선택기와 함께 작동 합니다! 일반적으로 '$ (this)'를 사용하여 수정했습니다. 많이 :)
첫 번째 스크립트는 일반적인 날짜 선택 도구이고 두 번째 스크립트는 "새"월 선택 도구입니다.
입력 필드를 지우는 요소를 만들 수있는 주석 처리되지 않은 .after 는 Paul Richards의 답변에서 도난되었습니다.
monthpicker에서 "MM yy"형식을 사용하고 datepicker에서 'yy-mm-dd'형식을 사용하고 있지만 모든 형식과 완벽하게 호환 되므로 원하는 형식 을 자유롭게 사용할 수 있습니다. 'dateFormat'옵션을 변경하십시오. 표준 옵션 'showButtonPanel', 'showAnim'및 'yearRange'는 물론 선택 사항이며 원하는대로 사용자 정의 할 수 있습니다.
날짜 선택기 추가
날짜 선택기 인스턴스화.
이것은 90 년 전부터 현재까지 진행됩니다. 특히 defaultDate, minDate 및 maxDate 옵션을 설정 한 경우 입력 필드를 올바르게 유지하는 데 도움이되지만 그렇지 않으면 처리 할 수 있습니다. 선택한 모든 dateFormat과 함께 작동합니다.
$('#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 파일을 monthpickers를 사용하려는 페이지에 포함하십시오.
Monthpicker 인스턴스화이 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")를 의미)를 변경하여 위 스크립트를 통합하십시오.
나는 이것이 누군가를 돕기를 바랍니다.
추가 날짜 및 월 선택기 설정을위한 페이스트 빈 링크 :
매월 마지막 날에 작업하는 Monthpicker . 이 월 선택 도구에서받은 날짜는 항상 해당 월의 마지막 날입니다.
두 개의 협업 월 선택기 ; 'start'는 매월 1 일에 작동하며 'end'는 마지막 달에 작동합니다. 둘 다 서로 제한되어 있으므로 '시작'에서 선택한 달 이전의 '끝'에서 한 달을 선택하면 '시작'이 '끝'과 같은 달로 변경됩니다. 그 반대. 선택 사항 : 'start'에서 월을 선택하면 'end'의 'minDate'가 해당 월로 설정됩니다. 이 기능을 제거하려면 onClose에서 한 줄을 주석 처리하십시오 (주석 읽기).
두 개의 협업 날짜 선택기 ; 둘 다 서로 제한되어 있으므로 '시작'에서 선택한 날짜 이전의 '끝'에서 날짜를 선택하면 '시작'이 '끝'과 같은 달로 변경됩니다. 그 반대. 선택 사항 : 'start'에서 날짜를 선택하면 'end'의 'minDate'가 해당 날짜로 설정됩니다. 이 기능을 제거하려면 onClose에서 한 줄을 주석 처리하십시오 (주석 읽기).
DatePicker를 MonthPicker로 변경 한 방법
날짜 선택기와 관련된 jquery-ui-1.11.1.js에서 모든 자바 스크립트 코드를 가져 와서 새 js 파일에 붙여 넣고 다음 문자열을 바꿨습니다.
- "datepicker"==> "월 피커"
- "Datepicker"==> "Monthpicker"
- "날짜 선택기"==> "월 선택기"
- "날짜 선택기"==> "월 선택기"
그런 다음 for-loop의 일부를 제거하여 전체 ui-datepicker-calendar div (다른 솔루션이 CSS를 사용하여 숨기는 div)를 만듭니다. 이것은 _generateHTML : 함수 (inst)에서 찾을 수 있습니다.
다음과 같은 줄을 찾으십시오.
"</div><table class='ui-datepicker-calendar'><thead>" +
에서 마크 모든 닫는 DIV 태그 후 (그리고에 아래 되지 는 말한다 어디 라인을 포함)
drawMonth++;
이제 몇 가지를 닫아야하기 때문에 불행합니다. 전에 div-tag를 닫은 후 다음을 추가하십시오.
";
코드는 이제 잘 정리되어 있어야합니다. 다음은 당신이 끝내야 할 것을 보여주는 코드 스 니펫입니다.
...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 파일로 복사 / 붙여 넣기하고 다음 문자열을 바꿨습니다.
