jQuery DatePicker 컨트롤의 팝업 위치를 변경하는 방법
날짜 선택기를 바로 아래가 아니라 관련 텍스트 상자 끝에 표시하는 방법을 알고 계십니까?텍스트 상자가 페이지 아래쪽으로 이동하고 날짜 선택기가 이를 설명하기 위해 위로 이동하여 텍스트 상자를 완전히 덮는 경향이 있습니다.사용자가 날짜를 선택하는 대신 입력하려는 경우 선택할 수 없습니다.텍스트 상자 바로 뒤에 표시하여 수직으로 조정하는 방식이 중요하지 않도록 하고 싶습니다.
위치를 조절하는 방법은?위젯에 대한 설정을 보지 못했고, CSS 설정을 조정하는 행운을 누리지 못했지만, 무언가를 쉽게 놓칠 수 있습니다.
제가 사용하는 것은 다음과 같습니다.
$('input.date').datepicker({
beforeShow: function(input, inst) {
inst.dpDiv.css({
marginTop: -input.offsetHeight + 'px',
marginLeft: input.offsetWidth + 'px'
});
}
});
또한 입력 필드에 바로 닿지 않도록 왼쪽 여백에 조금 더 추가할 수도 있습니다.
CSS에서 직접 수행합니다.
.ui-datepicker {
margin-left: 100px;
z-index: 1000;
}
제 날짜 입력 필드는 모두 100px 너비입니다.저는 또한 달력이 AJAX 팝업 위에도 나타나도록 z-index를 추가했습니다.
저는 jquery-ui CSS 파일을 수정하지 않고, 메인 CSS 파일의 클래스를 오버로드하여 특정 모드를 다시 입력하지 않고도 테마를 변경하거나 위젯을 업데이트할 수 있습니다.
날짜 선택기 달력 정렬의 변형입니다.
jQuery UI Position 유틸리티를 통해 포지셔닝을 제어할 수 있기 때문에 매우 좋다고 생각합니다.
한 가지 제한 사항: jquery.ui.position.js가 필요합니다.
코드:
$('input[name=date]').datepicker({
beforeShow: function(input, inst) {
// Handle calendar position before showing it.
// It's not supported by Datepicker itself (for now) so we need to use its internal variables.
var calendar = inst.dpDiv;
// Dirty hack, but we can't do anything without it (for now, in jQuery UI 1.8.20)
setTimeout(function() {
calendar.position({
my: 'right top',
at: 'right bottom',
collision: 'none',
of: input
});
}, 1);
}
})
다음은 필요에 따라 rect.top + 40, rect.left + 0을 조정하는 데 적합한 변형입니다.
$(".datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
beforeShow: function (input, inst) {
var rect = input.getBoundingClientRect();
setTimeout(function () {
inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 });
}, 0);
}
});<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<form>
<input class="datepicker" name="date1" type="text">
<input class="datepicker" name="date2" type="text">
</form>이 질문에 대한 허용된 답변은 사실 jQuery UI Datepicker에 해당되지 않습니다.jQuery UI Datepicker의 위치를 변경하려면 css 파일에서 .ui-date picker를 수정하면 됩니다.이 방법으로 날짜 선택기의 크기를 변경할 수도 있습니다. 글꼴 크기를 조정하기만 하면 됩니다.
이것은 나에게 도움이 됩니다.
beforeShow: function(input, inst) {
var $this = $(this);
var cal = inst.dpDiv;
var top = $this.offset().top + $this.outerHeight();
var left = $this.offset().left;
setTimeout(function() {
cal.css({
'top': top,
'left': left
});
}, 10);
}
우선, 나는 그것이 있어야 한다고 생각합니다.afterShowing. 후 할 수 입니다._showDatepicker방법.추가로, 다음과 같은 매개 변수가 있습니다.preferedPosition대화 상자가 뷰포트 외부에 렌더링되는 경우 설정하고 jquery를 통해 수정할 수도 있습니다.
마지막으로 할 수 있는 "꼼수"가 있습니다.만약 당신이 공부한다면,_showDatepicker variable인 방법변사확인수있할습다니용을 을 볼 수 .$.datepikcer._pos해당 변수는 이전에 설정한 적이 없는 경우 설정됩니다.대화 상자를 표시하기 전에 해당 변수를 수정하면 Jquery가 해당 변수를 가져가서 해당 위치에 대화 상자를 할당하려고 하고, 대화 상자가 화면 밖으로 렌더링되면 변수가 표시되도록 조정합니다.좋아요, 그렇죠?
문는제;_pos사적인 일이지만 괜찮으시다면요할 수 있는 일:
$('input.date').datepicker({
beforeShow: function(input, inst)
{
$.datepicker._pos = $.datepicker._findPos(input); //this is the default position
$.datepicker._pos[0] = whatever; //left
$.datepicker._pos[1] = whatever; //top
}
});
업데이트에 하십시오. Jquery-ui의 입니다. 왜냐하면 내부 구현의 변화가 있기 때문입니다._showDatepicker암호를 해독할 수 있습니다.
국경 없는 입력 컨트롤이 상주하는 상위 디비에 따라 날짜 선택기를 배치해야 했습니다.그러기 위해 저는 jquery UI core에 포함된 "position" 유틸리티를 사용했습니다.비포쇼 이벤트 때 했던 거예요.다른 사람들이 위에서 언급했듯이, 날짜 선택 코드는 비보쇼 기능을 마친 후 위치를 재설정하기 때문에 당신은 비보쇼에서 직접 위치를 설정할 수 없습니다.이 문제를 해결하려면 setInterval을 사용하여 위치를 설정하기만 하면 됩니다.현재 스크립트가 완료되어 날짜 선택기가 표시되고 날짜 선택기가 표시된 후 즉시 위치 변경 코드가 실행됩니다.날짜 선택기가 0.5초 후에 보이지 않으면 코드는 중단하고 간격을 지울 수 있는 페일 세이프 기능을 가지고 있습니다.
beforeShow: function(a, b) {
var cnt = 0;
var interval = setInterval(function() {
cnt++;
if (b.dpDiv.is(":visible")) {
var parent = b.input.closest("div");
b.dpDiv.position({ my: "left top", at: "left bottom", of: parent });
clearInterval(interval);
} else if (cnt > 50) {
clearInterval(interval);
}
}, 10);
}
datepicker 위젯 wish 도움말의 datepicker 변경 css를 사용한 후 포커스 바인딩
$('input.date').datepicker();
$('input.date').focusin(function(){
$('input.date').datepicker('widget').css({left:"-=127"});
});
매우 간단한 jquery 함수입니다.
$(".datepicker").focus(function(event){
var dim = $(this).offset();
$("#ui-datepicker-div").offset({
top : dim.top - 180,
left : dim.left + 150
});
});
나는 나의 맞춤형 jquery 코드로 그것을 고쳤습니다.
날짜 선택기 입력 필드에 클래스 ".datepicker2"를 지정했습니다.
위에서 현재 위치를 찾고,
클래스 이름이 ".ui-datepicker"인 팝업 상자를 배치합니다.
여기 제 코드가 있습니다.
$('.datepicker2').click(function(){
var popup =$(this).offset();
var popupTop = popup.top - 40;
$('.ui-datepicker').css({
'top' : popupTop
});
});
여기서 "40"은 제 예상 픽셀입니다. 당신은 당신의 픽셀에 따라 바뀔 수 있습니다.
저는 제가 개발 중인 새로운 사이트의 몇 페이지에 걸쳐 이 문제를 해결하기 위해 터무니없이 많은 시간을 보냈지만 아무 것도 작동하지 않는 것 같았습니다(위에서 구현한 다양한 솔루션 중 하나 포함).저는 jQuery가 더 이상 해결책이 작동하지 않는다는 제안을 받은 이후로 상황이 충분히 바뀌었다고 생각합니다.몰라.솔직히, 저는 달력이 첨부된 입력에서 상당히 아래 페이지의 어느 위치에 항상 나타나는 것과 관련하여 상당히 큰 문제인 것처럼 보이기 때문에 jQueryui에 이것을 구성하기 위한 간단한 것이 왜 구현되지 않는지 이해할 수 없습니다.
어쨌든, 저는 어디서나 사용할 수 있고 작동할 수 있는 범용 솔루션을 원했습니다.위의 더 복잡하고 jQuery 코드별 답변 중 일부를 피하는 결론에 도달한 것 같습니다.
jsFiddle: http://jsfiddle.net/mu27tLen/
HTML:
<input type="text" class="datePicker" />
JS:
positionDatePicker= function(cssToAdd) {
/* Remove previous positioner */
var oldScript= document.getElementById('datePickerPosition');
if(oldScript) oldScript.parentNode.removeChild(oldScript);
/* Create new positioner */
var newStyle= document.createElement("style");
newStyle.type= 'text/css';
newStyle.setAttribute('id', 'datePickerPostion');
if(newStyle.styleSheet) newStyle.styleSheet.cssText= cssToAdd;
else newStyle.appendChild(document.createTextNode(cssToAdd));
document.getElementsByTagName("head")[0].appendChild(newStyle);
}
jQuery(document).ready(function() {
/* Initialize date picker elements */
var dateInputs= jQuery('input.datePicker');
dateInputs.datepicker();
dateInputs.datepicker('option', {
'dateFormat' : 'mm/dd/yy',
'beforeShow' : function(input, inst) {
var bodyRect= document.body.getBoundingClientRect();
var rect= input.getBoundingClientRect();
positionDatePicker('.page #ui-datepicker-div{z-index:100 !important;top:' + (rect.top - bodyRect.top + input.offsetHeight + 2) + 'px !important;}');
}
}).datepicker('setDate', new Date());
});
기본적으로 모든 날짜 선택 "표시" 이벤트(있는 경우 이전 태그 삭제) 전에 머리에 새 스타일 태그를 부착합니다.이 방법은 제가 개발하는 동안 마주쳤던 문제의 대부분을 해결해 줍니다.
Chrome, Firefox, Safari 및 IE>8에서 테스트됨(IE8이 jsFiddle과 잘 작동하지 않고 신경 쓸 흥미를 잃고 있기 때문입니다.
저는 이것이 jQuery와 javascript context의 혼합이라는 것을 알고 있지만, 현 시점에서는 jQuery로 변환하기 위해 노력하고 싶지 않습니다.간단할 거예요, 알아요.나는 지금 이 일을 완전히 끝냈습니다.다른 사람이 이 솔루션의 혜택을 받을 수 있기를 바랍니다.
또는 날짜에 포커스 이벤트를 사용할 수 있습니다. 객체와 위치 api를 함께 선택하십시오.위쪽과 아래쪽, 왼쪽을 오른쪽 또는 가운데(또는 위치 API에서 원하는 모든 것)로 바꿀 수 있습니다.이렇게 하면 간격이나 엄청나게 복잡한 솔루션이 필요하지 않으며 입력 위치에 따라 필요에 맞게 레이아웃을 구성할 수 있습니다.
dateSelect.focus(function () {
$("#ui-datepicker-div").position({
my: "left top",
at: "left bottom",
of: $(this)
});
});
((jQueryUI datepicker의 포지셔닝 제어 방법)에서 가져왔습니다.
$.extend($.datepicker, {
_checkOffset: function(inst, offset, isFixed) {
return offset
}
});
효과가 있습니다!!!
fix show position 문제 dater range picker.jQuery.js
//Original Code
//show, hide, or toggle rangepicker
function showRP() {
if (rp.data('state') == 'closed') {
rp.data('state', 'open');
rp.fadeIn(300);
options.onOpen();
}
}
//Fixed
//show, hide, or toggle rangepicker
function showRP() {
rp.parent().css('left', rangeInput.offset().left);
rp.parent().css('top', rangeInput.offset().top + rangeInput.outerHeight());
if (rp.data('state') == 'closed') {
rp.data('state', 'open');
rp.fadeIn(300);
options.onOpen();
}
}
그들은 학급 이름을 다음으로 바꿨습니다.ui-datepicker-trigger
그래서 이것은 작동합니다.jquery 1.11.x
.ui-datepicker-trigger {
margin-top:7px;
margin-left: -30px;
margin-bottom:0px;
position:absolute;
z-index:1000;
}
여기서 해결책: https://stackoverflow.com/a/10598178/19074969 은 날짜 입력 필드의 특정 측면에 날짜 선택기를 배치하는 기본적인 문제를 해결했습니다.그러나 날짜 선택기 팝업 상자의 위치를 미세 조정하기 위해 오프셋을 정의해야 하는 문제가 남아 있습니다.이것은 datepicker div에 일부 css 스타일 변환을 적용함으로써 쉽게 달성될 수 있는 것으로 보입니다.
setTimeout(function() {
jQuery("input[name='date']").datepicker({
beforeShow: function(input, inst) {
var calendar = inst.dpDiv;
setTimeout(function () {
calendar.position({
my: 'left bottom',
at: 'left top',
collision: 'none',
of: input
});
jQuery("#ui-datepicker-div").css('transform', 'translate( -40px, -10px )');
}, 0);
},
});
}, 800);
문제는 다른 곳을 클릭하면 date picker 박스가 사라지고 date 입력란을 다시 클릭하면 jQuery가 date picker div를 열기 전에 위치를 다시 계산하여 업데이트하고 css style translate의 효과가 사라집니다.
이 문제를 해결하려면 날짜 선택기 팝업 상자가 닫힐 때마다 css 스타일 변환 변환을 0으로 재설정해야 합니다.다음에서 변환 관찰자가 설정됩니다. 계산된 CSS 속성이 변경될 때 Javascript가 탐지하여 CSS 스타일 속성 "표시"가 "없음"으로 변경되는 동안 날짜 선택기가 닫혔을 때 이벤트를 감시하고 CSS 스타일 변환은 다시 0으로 재설정될 수 있습니다.
if ( !window.document.documentMode ) { // would break IE11
setTimeout(function() { // after page is loaded, otherwise (input.hasDatepicker) would not be available
if ( jQuery("input.hasDatepicker").length > 0 ) {
var $observation_target = document.getElementById('ui-datepicker-div');
let style = window.getComputedStyle($observation_target);
var $mutation_observer = new MutationObserver(function(mutations){ // callback function
mutations.forEach(function(mutation){
if ( style.display === 'none' ) {
$observation_target.style.transform = 'translate( 0px, 0px )';
}
});
});
$mutation_observer.observe( $observation_target , {attributes:true} ); // Start the mutation observer (options: What is observed? CSS style attributes!)
}
}, 800);
}
두 경우 모두 "setTimeout" 함수는 페이지 로드가 완료될 때까지 대기해야 하며, 그렇지 않으면 input.hasDatepicker가 아직 존재하지 않아 찾을 수 없습니다.페이지 로드 속도에 따라 지연 시간(밀리초)을 조정합니다!이제는 매번 작동하며 날짜 선택기 div의 위치는 jQuery에 의해 재계산된 후 조정됩니다.
유일한 제한 사항: 변환 변환 해커는 IE11에서 작동하지 않습니다. (테스트를 거쳐 Edge 및 Firefox와 함께 작동합니다!)
또한 IE가 쿼크 모드로 전환되면 jQuery UI 구성 요소 및 기타 요소가 잘못 배치됩니다.
쿼크 모드에 빠지지 않으려면 최신 HTML5로 올바른 설정을 해야 합니다.
<!DOCTYPE html>
과도기를 사용하는 것은 일을 엉망으로 만듭니다.바라건대 이것이 미래에 누군가의 시간을 절약할 수 있기를 바랍니다.
이렇게 하면 함수라는 이름의 메서드에 기능을 추가하여 코드가 이를 캡슐화하거나 메서드를 jquery 확장자로 만들 수 있습니다.내 코드에서 방금 사용되었고 완벽하게 작동합니다.
var nOffsetTop = /* whatever value, set from wherever */;
var nOffsetLeft = /* whatever value, set from wherever */;
$(input).datepicker
(
beforeShow : function(oInput, oInst)
{
AlterPostion(oInput, oInst, nOffsetTop, nOffsetLeft);
}
);
/* can be converted to extension, or whatever*/
var AlterPosition = function(oInput, oItst, nOffsetTop, nOffsetLeft)
{
var divContainer = oInst.dpDiv;
var oElem = $(this);
oInput = $(oInput);
setTimeout(function()
{
divContainer.css
({
top : (nOffsetTop >= 0 ? "+=" + nOffsetTop : "-=" + (nOffsetTop * -1)),
left : (nOffsetTop >= 0 ? "+=" + nOffsetLeft : "-=" + (nOffsetLeft * -1))
});
}, 10);
}
제이쿼리 내에서.UI, _checkOffset 함수만 업데이트하면 해당 뷰가 표시됩니다.오프셋이 반환되기 전에 높이가 offset.top에 추가됩니다.
_checkOffset: function(inst, offset, isFixed) {
var dpWidth = inst.dpDiv.outerWidth(),
dpHeight = inst.dpDiv.outerHeight(),
inputWidth = inst.input ? inst.input.outerWidth() : 0,
inputHeight = inst.input ? inst.input.outerHeight() : 0,
viewWidth = document.documentElement.clientWidth + (isFixed ? 0 : $(document).scrollLeft()),
viewHeight = document.documentElement.clientHeight + (isFixed ? 0 : ($(document).scrollTop()||document.body.scrollTop));
offset.left -= (this._get(inst, "isRTL") ? (dpWidth - inputWidth) : 0);
offset.left -= (isFixed && offset.left === inst.input.offset().left) ? $(document).scrollLeft() : 0;
offset.top -= (isFixed && offset.top === (inst.input.offset().top + inputHeight)) ? ($(document).scrollTop()||document.body.scrollTop) : 0;
// now check if datepicker is showing outside window viewport - move to a better place if so.
offset.left -= Math.min(offset.left, (offset.left + dpWidth > viewWidth && viewWidth > dpWidth) ?
Math.abs(offset.left + dpWidth - viewWidth) : 0);
offset.top -= Math.min(offset.top, (offset.top + dpHeight > viewHeight && viewHeight > dpHeight) ?
Math.abs(dpHeight + inputHeight) : 0);
**offset.top = offset.top + viewHeight;**
return offset;
},
.ui-datepicker {-ms-transform: translate(100px,100px); -webkit-transform: translate(100px,100px); transform: translate(100px,100px);}
$('.PDatePicker').MdPersianDateTimePicker({
Placement: 'top',
});
여기 또 다른 해결책이 있습니다.
위치를 고정하는 함수 만들기
function setDatepickerPos(input, inst) { var rect = input.getBoundingClientRect(); // use 'setTimeout' to prevent effect overridden by other scripts setTimeout(function () { var scrollTop = $("body").scrollTop(); inst.dpDiv.css({ top: rect.top + input.offsetHeight + scrollTop }); }, 0);}날짜 선택기의 '표시 전' 속성에 기능 추가
$('#MyDatepicker').datepicker({ dateFormat: "yy-mm-dd", changeMonth: true, changeYear: true, defaultDate: +0, inline: true, beforeShow: function (input, inst) { setDatepickerPos(input, inst) },});
참조 링크: 링크입니다.모든 학점은 Aries.me 으로 가야 합니다.
드래그 패널 및 패널의 날짜 선택기에 스크롤이 있는 경우.선택기 위치를 날짜로 지정하여 간격에 따라 모든 스크롤 위치 변경을 계산해야 합니다.
$(function () {
var datePickerInterval;
$("#id").datepicker({
beforeShow: function (input, inst) {
var calendar = inst.dpDiv;
datePickerInterval = setInterval(function () {
calendar.position({
my: 'right top',
at: 'right bottom',
collision: 'none',
of: input
});
}, 10);
},
onClose: function () {
clearInterval(datePickerInterval);
}
});
});
언급URL : https://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control
'programing' 카테고리의 다른 글
| 업데이트 패널 하나와다중 업데이트 패널 (0) | 2023.07.31 |
|---|---|
| 컬 및 PHP - PUT, POST, GET에서 컬을 통해 json을 전달하려면 어떻게 해야 합니까? (0) | 2023.07.31 |
| Nginx가 쿠키를 프록시로 전달하지 않음 (0) | 2023.07.31 |
| UNION과 UNION ALL의 차이점은 무엇입니까? (0) | 2023.04.17 |
| OSX에서 PATH 환경 변수 영구 설정 (0) | 2023.04.17 |