월별 만 표시하는 jQuery UI DatePicker
jQuery 날짜 선택기를 사용하여 내 앱 전체에 캘린더를 표시하고 있습니다. 달력을 사용하지 않고 월과 연도 (2010 년 5 월)를 표시하는 데 사용할 수 있는지 알고 싶습니다.
다음은 해킹입니다 (전체 .html 파일로 업데이트 됨).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
위 예제에서 jsfiddle을 편집 하십시오. http://jsfiddle.net/DBpJe/7755/
편집 2 완료 버튼을 클릭 할 때만 월 년 값을 입력 상자에 추가합니다. 또한 위의 필드 http://jsfiddle.net/DBpJe/5103/ 에서 불가능한 입력 상자 값을 삭제할 수 있습니다.
EDIT 3 은 rexwolf의 솔루션 다운을 기반으로 더 나은 솔루션을 업데이트했습니다.
http://jsfiddle.net/DBpJe/5106
이 코드 는 나에게 완벽하게 작동합니다.
<script type="text/javascript">
$(document).ready(function()
{
$(".monthPicker").datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
}
});
$(".monthPicker").focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
});
</script>
<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />
출력은 다음과 같습니다
@ Ben Koehler , 그거 지사입니다! 날짜 선택기의 단일 인스턴스를 두 번 이상 사용하면 예상대로 작동하도록 약간 수정했습니다. 이 수정이 없으면 날짜가 잘못 구문 분석되고 이전에 선택한 날짜가 강조 표시되지 않습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
var datestr;
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
위의 답변은 꽤 좋습니다. 내 유일한 불만은 일단 설정되면 값을 지울 수 없다는 것입니다. 또한 extend-jquery-like-a-plugin 접근 방식을 선호합니다.
이것은 나에게 완벽하게 작동합니다.
$.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "MM yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: ""
}, options);
function hideDaysFromCalendar() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
$('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
}
$(this).datepicker(options).focus(hideDaysFromCalendar);
}
그런 다음 다음과 같이 호출하십시오.
$('input.monthYearPicker').monthYearPicker();
<style>
.ui-datepicker table{
display: none;
}
<script type="text/javascript">
$(function() {
$( "#manad" ).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'yy-mm',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
actDate = datestr.split('-');
year = actDate[0];
month = actDate[1]-1;
$(this).datepicker('option', 'defaultDate', new Date(year, month));
$(this).datepicker('setDate', new Date(year, month));
}
}
});
});
이것은 문제를 해결할 것입니다 =) 그러나 timeFormat yyyy-mm을 원했습니다.
그래도 FF4에서만 시도했습니다.
나는 오늘도 같은 요구가 있었고 이것을 github에서 찾았고 jQueryUI와 함께 작동하며 달력에서 일 대신 월 선택기가 있습니다.
https://github.com/thebrowser/jquery.ui.monthpicker
여기에 내가 생각해 낸 것이 있습니다. 추가 스타일 블록이 필요없이 달력을 숨기고 입력을 클릭하면 값을 지우지 못하는 문제를 처리하기 위해 지우기 단추를 추가합니다. 같은 페이지의 여러 달 선택 도구와도 잘 작동합니다.
HTML :
<input type='text' class='monthpicker'>
자바 스크립트 :
$(".monthpicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm",
showButtonPanel: true,
currentText: "This Month",
onChangeMonthYear: function (year, month, inst) {
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1)));
},
onClose: function(dateText, inst) {
var month = $(".ui-datepicker-month :selected").val();
var year = $(".ui-datepicker-year :selected").val();
$(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1)));
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
}).after(
$("<a href='javascript: void(0);'>clear</a>").click(function() {
$(this).prev().val('');
})
);
두 필드 (From & To)에 대해 월 / 년 피커가 필요했고 하나를 선택했을 때 Max / Min이 다른 하나에 선택되었습니다. 최대 및 최소 설정 문제가 발생했습니다 ... 다른 필드의 날짜가 지워집니다. 위의 여러 게시물 덕분에 ... 나는 마침내 알아 냈습니다. 옵션과 날짜를 매우 특정한 순서로 설정해야합니다.
전체 솔루션은 다음 바이올린을 참조하십시오 .JSFiddle @ Month / Year Picker
암호:
var searchMinDate = "-2y";
var searchMaxDate = "-1m";
if ((new Date()).getDate() <= 5) {
searchMaxDate = "-2m";
}
$("#txtFrom").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtFrom").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
}
},
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtFrom").datepicker('setDate', new Date(year, month, 1));
var to = $("#txtTo").val();
$("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1));
if (to.length > 0) {
var toyear = to.substring(to.length - 4, to.length);
var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1));
$("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1));
}
}
});
$("#txtTo").datepicker({
dateFormat: "M yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
minDate: searchMinDate,
maxDate: searchMaxDate,
showButtonPanel: true,
beforeShow: function (input, inst) {
if ((datestr = $("#txtTo").val()).length > 0) {
var year = datestr.substring(datestr.length - 4, datestr.length);
var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort'));
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
}
},
onClose: function (input, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1));
$("#txtTo").datepicker('setDate', new Date(year, month, 1));
var from = $("#txtFrom").val();
$("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1));
if (from.length > 0) {
var fryear = from.substring(from.length - 4, from.length);
var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort'));
$("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1));
$("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1));
}
}
});
위에서 언급 한대로 스타일 블록에 추가하십시오.
.ui-datepicker-calendar { display: none !important; }
나는 위의 좋은 답변을 많이 결합하여 이에 도달했습니다.
$('#payCardExpireDate').datepicker(
{
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
},
beforeShow : function(input, inst) {
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
}
}
}).focus(function () {
$(".ui-datepicker-calendar").hide();
$("#ui-datepicker-div").position({
my: "center top",
at: "center bottom",
of: $(this)
});
});
이것은 작동하는 것으로 입증되었지만 많은 버그에 직면하여 datepicker의 여러 곳에서 패치해야했습니다.
if($.datepicker._get(inst, "dateFormat") === "mm/yy")
{
$(".ui-datepicker-calendar").hide();
}
patch1 : in _showDatepicker : 숨기기를 부드럽게하기 위해;
patch2 : in _checkOffset : 월 선택기 위치를 수정합니다 (그렇지 않으면 필드가 브라우저의 맨 아래에 있으면 오프셋 확인이 해제 됨).
patch3 : _hideDatepicker의 onClose에 : 그렇지 않으면 날짜 필드를 닫을 때 매우 짧은 기간 동안 깜박이는 것은 매우 성가시다.
내 수정이 그리 좋지는 않았지만 지금은 작동하고 있습니다. 도움이 되길 바랍니다.
하나 더 간단한 솔루션 추가
$(function() {
$('.monthYearPicker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'M yy'
}).focus(function() {
var thisCalendar = $(this);
$('.ui-datepicker-calendar').detach();
$('.ui-datepicker-close').click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
});
});
});
http://jsfiddle.net/tmnasim/JLydp/
특징 :
- 월 / 년만 표시
- 완료 버튼을 클릭 할 때만 월 년 값을 입력 상자에 추가합니다
- "완료"를 클릭하면 "다시 열기"동작이 없음
------------------------------------
작동하는 다른 솔루션 같은 페이지의 datepicker 및 monthpicker의 경우 : (또한 IE에서 이전 버튼을 여러 번 클릭하는 버그를 피하십시오 (초점 기능을 사용하면 발생할 수 있음))
JS 바이올린 링크
IE (8)에서와 같이 저에게만 작동합니까, 아니면 작동하지 않습니까? 클릭하면 날짜가 변경되지만 실제로 페이지의 아무 곳이나 클릭하여 입력 필드에 초점을 잃을 때까지 날짜 선택기가 다시 열립니다 ...
이 문제를 해결하려고합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
</head>
<body>
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
</body>
</html>
datepicker에 대해 jQueryUI.com을 파고 내 질문에 대한 결론과 대답은 다음과 같습니다.
먼저, 나는 당신의 질문에 아니오 라고 말할 것 입니다. 월과 연도 선택에만 jQueryUI 날짜 선택기를 사용할 수 없습니다. 지원되지 않습니다. 콜백 기능이 없습니다.
그러나 CSS를 사용하여 요일 등을 숨겨서 월과 연도 만 표시 하도록 해킹 할 수 있습니다 . 그리고 날짜를 선택하려면 클릭 해야하는 날짜가 여전히 의미가 없다고 생각합니다.
다른 날짜 선택기를 사용해야한다고 말할 수 있습니다. Roger가 제안한 것과 같습니다.
날짜 선택 도구와 월 선택 도구의 문제가있었습니다. 나는 그것을 그렇게 해결했다.
$('.monthpicker').focus(function()
{
$(".ui-datepicker-calendar").show();
}).datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM/yy',
create: function (input, inst) {
},
onClose: function(dateText, inst) {
var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val());
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
}
});
누구나 여러 캘린더에 대해 원하는 경우이 기능을 jquery ui에 추가하는 것이 어렵지 않습니다. 축소 된 검색 :
x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/all|left/.test(t)&&C==0?c?f:n:"")+(
x 앞에 이것을 추가하십시오
var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';}
검색
<table class="ui-datepicker-calendar
그것을
<table class="ui-datepicker-calendar'+accl+'
또한 검색
this._defaults={
그것을 대체
this._defaults={justMonth:false,
CSS의 경우 다음을 사용해야합니다.
.ui-datepicker table.ui-datepicker-just_month{
display: none;
}
그 후에 모든 것이 끝나면 원하는 datepicker init 함수로 이동하여 설정 var를 제공하십시오.
$('#txt_month_chart_view').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
justMonth: true,
create: function(input, inst) {
$(".ui-datepicker table").addClass("badbad");
},
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
justMonth: true 여기에 열쇠가 있습니다 :)
다른 많은 사람들과 마찬가지로이 작업을 수행하는 데 많은 문제가 발생했으며 솔루션의 조합 만 게시하고 궁극적으로 완벽하게 해킹하여 해결책을 얻었습니다 .
이 스레드에서 시도한 다른 솔루션의 문제 :
- 날짜 선택기에서 새 날짜를 선택하면 다른 날짜 선택기의 (내부) 날짜도 변경되므로 다른 날짜 선택기를 다시 열거 나 날짜를 가져 오려고하면 지정된 입력에 표시된 날짜와 다른 날짜가됩니다. -들.
- 날짜 선택기는 다시 열 때 날짜를 "기억"하지 않습니다.
- 날짜를 저글링하는 코드는 하위 문자열을 사용하므로 모든 형식과 호환되지 않았습니다.
- "나의 monthpicker"는 값을 변경할 때가 아니라 입력 필드를 닫을 때만 입력 필드를 변경했습니다.
- 날짜 형식이 잘못된 입력 문자열을 입력 한 후 날짜 선택기에서 '닫기'를 클릭하면 입력 필드가 올바르게 업데이트되지 않습니다.
- 일자를 표시하지 않는 monthpickers와 동일한 페이지에 일자를 표시하는 일반적인 날짜 선택기를 사용할 수 없습니다.
마침내이 모든 문제 를 해결 하는 방법을 찾았습니다 . 처음 4 개는 내부 코드에서 날짜 및 월 선택기를 참조하는 방법에주의하고 선택기를 수동으로 업데이트하여 간단히 수정할 수 있습니다. 이것은 하단 근처의 인스턴스화 예제에서 볼 수 있습니다. 다섯 번째 문제는 datepicker 함수에 사용자 정의 코드를 추가하여 도움이 될 수 있습니다.
참고 : 일반적인 날짜 선택 도구에서 처음 세 가지 문제를 해결하기 위해 다음 달 선택 도구를 사용할 필요는 없습니다. 이 게시물 맨 아래에 날짜 선택기 인스턴스화 스크립트를 사용하십시오.
이제 월별 선택기를 사용하고 마지막 문제를 해결하려면 날짜 선택기와 월 선택기를 분리해야합니다. 우리는 몇 가지 jQuery-UI 월별 선택기 애드온 중 하나를 얻을 수 있지만 일부는 현지화 유연성 / 기능이 부족하고 일부는 애니메이션 지원이 부족합니다 ... 그래서 어떻게해야합니까? 날짜 선택기 코드에서 "자신의"롤을 만드십시오! 그러면 날짜 표시없이 날짜 선택기의 모든 기능을 갖춘 완전한 기능의 월별 선택기를 사용할 수 있습니다.
I는 공급하고 monthpicker의 JS 스크립트 및 첨부 CSS 스크립트를 상기 방법은 - JQuery와 UI의 v1.11.1 코드 후술 사용. 이 코드 스 니펫을 각각 monthpicker.js와 monthpicker.css라는 두 개의 새로운 파일로 복사하십시오.
다음은 원래 날짜 선택기를 복제하여 월 선택기로 만드는 과정입니다.
내가 어떻게 만들지 신경 쓰지 않으면이 섹션을 지나서 "지금 날짜 선택기와 월 선택을 페이지에 추가하십시오!"행으로 스크롤하십시오.
날짜 선택기와 관련된 jquery-ui-1.11.1.js에서 모든 자바 스크립트 코드를 가져 와서 새 js 파일에 붙여 넣고 다음 문자열을 바꿨습니다.
- "datepicker"==> "월 피커"
- "Datepicker"==> "Monthpicker"
- "날짜 선택기"==> "월 선택기"
- "날짜 선택기"==> "월 선택기"
그런 다음 for-loop의 일부를 제거하여 전체 ui-datepicker-calendar div (CSS를 사용하여 숨기는 다른 솔루션)를 만듭니다. 이것은 _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 파일로 복사 / 붙여 넣기하고 다음 문자열을 바꿨습니다.
- "datepicker"==> "월 피커"
이제 날짜 선택기 및 월 선택기를 페이지에 추가하십시오!
다음 자바 스크립트 코드 조각 은 위에서 언급 한 문제없이 페이지에서 여러 날짜 선택기 및 / 또는 월 선택기와 함께 작동 합니다! 일반적으로 '$ (this)'를 사용하여 수정했습니다. 많이 :)
첫 번째 스크립트는 일반적인 날짜 선택 도구이고 두 번째 스크립트는 "새"월 선택 도구입니다.
입력 필드를 지우는 요소를 만들 수있는 주석 처리되지 않은 .after 는 Paul Richards의 답변에서 도난되었습니다.
monthpicker에서 "MM yy"형식을 사용하고 datepicker에서 '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 파일을 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에서 한 줄을 주석 처리하십시오 (주석 읽기).
월 선택기를 찾고 있다면이 jquery.mtz.monthpicker를 사용해보십시오.
이것은 나를 위해 잘 작동했습니다.
options = {
pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
selectedYear: 2010,
startYear: 2008,
finalYear: 2012,
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
$('#custom_widget').monthpicker(options);
약점 : http://www.mattkruse.com/javascript/calendarpopup/
월 선택 예를 선택하십시오
BrianS의 거의 완벽한 반응을 몇 가지 개선했습니다.
이 경우 실제로 약간 더 읽기 쉬운 것으로 생각하기 때문에 show에 설정된 값을 정규화했습니다 (약간 다른 형식을 사용하고 있음에도 불구하고)
내 고객은 캘린더를 원하지 않았기 때문에 다른 날짜 선택 도구에 영향을주지 않고 on show / hide 클래스 추가를 추가했습니다. 클래스 선택 제거는 datepicker가 사라질 때 테이블이 다시 깜박이는 것을 피하기 위해 타이머에 있습니다 .IE에서 매우 눈에.니다.
편집 :이 문제를 해결하기 위해 남겨진 한 가지 문제는 날짜 선택기를 비울 수있는 방법이 없다는 것입니다. 필드를 지우고 클릭하면 선택한 날짜로 다시 채워집니다.
EDIT2 :이 문제를 잘 해결하지 못했습니다 (즉, 입력 옆에 별도의 지우기 버튼을 추가하지 않음).이를 사용하여 끝났습니다 : https://github.com/thebrowser/jquery.ui.monthpicker- 누구나 할 수 있다면 표준 UI를 사용하여 놀라운 작업을 수행하십시오.
$('.typeof__monthpicker').datepicker({
dateFormat: 'mm/yy',
showButtonPanel:true,
beforeShow:
function(input, dpicker)
{
if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val()))
{
var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1);
$(this).datepicker('option', 'defaultDate', d);
$(this).datepicker('setDate', d);
}
$('#ui-datepicker-div').addClass('month_only');
},
onClose:
function(dt, dpicker)
{
setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250);
var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(y, m, 1));
}
});
이 스타일 규칙도 필요합니다.
#ui-datepicker-div.month_only .ui-datepicker-calendar {
display:none
}
@ user1857829 답변과 "extend-jquery-like-a-plugin approach"가 마음에 들었습니다. 방금 월 또는 연도를 변경할 때 피커가 실제로 필드에 날짜를 쓰도록 약간 수정했습니다. 나는 그것을 조금 사용한 후에 그 행동을 원한다는 것을 알았습니다.
jQuery.fn.monthYearPicker = function(options) {
options = $.extend({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showAnim: "",
onChangeMonthYear: writeSelectedDate
}, options);
function writeSelectedDate(year, month, inst ){
var thisFormat = jQuery(this).datepicker("option", "dateFormat");
var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1));
inst.input.val(d);
}
function hideDaysFromCalendar() {
var thisCalendar = $(this);
jQuery('.ui-datepicker-calendar').detach();
// Also fix the click event on the Done button.
jQuery('.ui-datepicker-close').unbind("click").click(function() {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
thisCalendar.datepicker('setDate', new Date(year, month, 1));
thisCalendar.datepicker("hide");
});
}
jQuery(this).datepicker(options).focus(hideDaysFromCalendar);
}
나는 받아 들여진 대답에 어려움이 있었고 다른 사람은 최소한의 노력으로 기본으로 사용할 수 없었습니다. 따라서 최소 JS 코딩 / 재사용 가능성 표준을 충족 할 때까지 허용 된 답변의 최신 버전을 조정하기로 결정했습니다.
여기에 방법입니다 많은 청소기 솔루션 댄 3 (최신) 버전 의 벤 쾰러 의 허용 대답은. 또한, 그것은 :
mm/yy형식뿐만 아니라 OP를 포함한 다른 모든 형식에서도 작동MM yy합니다.- 페이지에서 다른 날짜 선택기의 캘린더를 숨기지 마십시오.
- 내재적으로 전역 JS 객체를 더럽 히지
datestr,month,year등의 변수.
확인 해봐:
$('.date-picker').datepicker({
dateFormat: 'MM yy',
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover');
if (!isDonePressed)
return;
var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(),
year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val();
$(this).datepicker('setDate', new Date(year, month, 1)).change();
$('.date-picker').focusout();
},
beforeShow: function (input, inst) {
var $this = $(this),
// For the simplicity we suppose the dateFormat will be always without the day part, so we
// manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part
dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'),
date;
try {
date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val());
} catch (ex) {
return;
}
$this.datepicker('option', 'defaultDate', date);
$this.datepicker('setDate', date);
inst.dpDiv.addClass('datepicker-month-year');
}
});
그리고 다른 필요한 것은 다음 CSS입니다.
.datepicker-month-year .ui-datepicker-calendar {
display: none;
}
그게 다야. 위의 내용이 추가 독자를 위해 시간을 절약 할 수 있기를 바랍니다.
나는 그것이 약간 늦게 반응한다는 것을 알고 있지만, 며칠 전에 같은 문제가 있었고 좋은 & 부드러운 해결책을 찾았습니다. 먼저이 위대한 데이트 피커를 찾았 습니다.
그런 다음 예제와 함께 제공되는 CSS 클래스 (jquery.calendarPicker.css)를 방금 업데이트했습니다.
.calMonth {
/*border-bottom: 1px dashed #666;
padding-bottom: 5px;
margin-bottom: 5px;*/
}
.calDay
{
display:none;
}
플러그인은 변경 할 때 DateChanged 이벤트를 시작하므로 하루를 클릭하지 않아도 중요합니다 (연도 및 월 선택기로 적합합니다)
그것이 도움이되기를 바랍니다!
나는 또한 월 선택기가 필요했습니다. 나는 헤더와 연도 4 개월의 3 행으로 간단한 것을 만들었습니다. 그것을 확인하십시오 : jQuery와 함께 간단한 월별 선택기 .
나는 여기에 제공된 다양한 솔루션을 시도했지만 단순히 두 개의 드롭 다운을 원한다면 제대로 작동했습니다.
여기에 제안 된 최고의 (외관 등) 'picker'( https://github.com/thebrowser/jquery.ui.monthpicker )는 기본적으로 _generateHTML이 다시 작성된 jquery-ui datepicker의 이전 버전 사본입니다. 그러나 현재 jquery-ui (1.10.2)에서 더 이상 잘 작동하지 않으며 다른 문제가 있습니다 (esc에서 닫히지 않고 다른 위젯 열기에서 닫히지 않으며 스타일이 하드 코딩되어 있음).
해당 월 선택기를 수정하려고 시도하지 않고 최신 날짜 선택기로 동일한 프로세스를 다시 시도하지 않고 기존 날짜 선택기의 관련 부분에 연결했습니다.
재정의와 관련이 있습니다.
- _generateHTML (월 선택기 마크 업 작성)
- parseDate (날짜 구성 요소가 없을 때 마음에 들지 않기 때문에),
- _selectDay (datepicker가 .html ()을 사용하여 일 값을 가져 오기 때문에)
이 질문은 약간 오래되었고 이미 잘 대답 했으므로 여기에 _selectDay 재정의 만 표시되어 있습니다.
jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate;
jQuery.datepicker.parseDate = function (format, value, settings) {
if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings);
// "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component
return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings);
};
언급했듯이 이것은 오래된 질문이지만 유용하므로 대체 솔루션으로 피드백을 추가하고 싶었습니다.
JQuery v 1.7.2를 사용하는 monthpicker의 경우 다음과 같은 자바 스크립트가 있습니다.
$l("[id$=txtDtPicker]").monthpicker({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});
Ben Koehler의 솔루션에 감사드립니다.
그러나 여러 날짜 선택기 인스턴스에 문제가 있었고 그 중 일부는 요일 선택에 필요했습니다. Ben Koehler의 솔루션 (편집 3)은 작동하지만 모든 경우에서 요일 선택을 숨 깁니다. 이 문제를 해결하는 업데이트는 다음과 같습니다.
$('.date-picker').datepicker({
dateFormat: "mm/yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function(dateText, inst) {
if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) {
$(this).datepicker(
'setDate',
new Date(
$("#ui-datepicker-div .ui-datepicker-year :selected").val(),
$("#ui-datepicker-div .ui-datepicker-month :selected").val(),
1
)
).trigger('change');
$('.date-picker').focusout();
}
$("#ui-datepicker-div").removeClass("month_year_datepicker");
},
beforeShow : function(input, inst) {
if((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = datestr.substring(0, 2);
$(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
$(this).datepicker('setDate', new Date(year, month-1, 1));
$("#ui-datepicker-div").addClass("month_year_datepicker");
}
}
});
onSelect콜백을 사용 하고 연도 부분을 수동으로 제거하고 필드에 텍스트를 수동으로 설정하십시오.
참고 URL : https://stackoverflow.com/questions/2208480/jquery-ui-datepicker-to-show-month-year-only
'Programing' 카테고리의 다른 글
| Java에서 동기화되지 않습니까? (0) | 2020.02.28 |
|---|---|
| 유효성 검증 실패를 위해 REST API 서비스에서 리턴 할 적절한 HTTP 상태 코드는 무엇입니까? (0) | 2020.02.28 |
| 열거 형 클래스가 일반 열거 형보다 선호되는 이유는 무엇입니까? (0) | 2020.02.28 |
| std :: promise 란 무엇입니까? (0) | 2020.02.28 |
| 배열을 JSON으로 변환 (0) | 2020.02.28 |