[javascript] jQuery DatePicker 컨트롤의 팝업 위치를 변경하는 방법

Program / 글쓴이

DatePicker가 연결된 텍스트 상자 바로 아래 대신 끝에 표시되도록하는 방법을 알고 계십니까? 발생하는 경향은 텍스트 상자가 페이지 하단에 있고 DatePicker가이를 설명하기 위해 위로 이동하고 텍스트 상자를 완전히 덮는 것입니다. 사용자가 날짜를 선택하는 대신 입력하려는 경우 입력 할 수 없습니다. 차라리 텍스트 상자 바로 뒤에 나타나도록하여 세로로 조정하는 방법은 중요하지 않습니다.

위치를 제어하는 ​​방법을 아십니까? 위젯에 대한 설정이 표시되지 않았고 CSS 설정을 조정하지도 못했지만 쉽게 뭔가를 놓칠 수있었습니다.

답변

이 질문에 대한 대답은 실제로 jQuery UI Datepicker가 아닙니다. jQuery UI Datepicker의 위치를 ​​변경하려면 css 파일에서 .ui-datepicker를 수정하면됩니다. Datepicker의 크기도 이러한 방식으로 변경할 수 있으며 글꼴 크기 만 조정하면됩니다.

답변

내가 사용하는 것은 다음과 같습니다.

$('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입니다. 또한 Z- 색인을 추가하여 캘린더도 AJAX 팝업 위에 표시됩니다.

jquery-ui CSS 파일을 수정하지 않습니다. 기본 CSS 파일에서 클래스를 오버로드하므로 특정 모드를 다시 입력하지 않고도 테마를 변경하거나 위젯을 업데이트 할 수 있습니다.

답변

다음은 Datepicker 달력 정렬의 변형입니다.

jQuery UI Position util을 통해 위치를 제어 할 수 있기 때문에 꽤 좋다고 생각합니다.

한 가지 제한 사항 : 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>

스 니펫 확장

답변

이것은 나를 위해 작동합니다.

 beforeShow: function(input, inst) {
     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);

답변

먼저 afterShowingjquery가 _showDatepicker메서드 에서 모든 부두를 수행 한 후에 위치를 변경할 수있는 datepicker 개체에 메서드 가 있어야한다고 생각합니다 . 또한라는 매개 변수 preferedPosition도 바람직하므로 대화 상자가 뷰포트 외부에서 렌더링되는 경우이를 설정하고 jquery 수정할 수 있습니다.

이 마지막 일을하는 “속임수”가 있습니다. _showDatepicker방법 을 연구하면 개인 변수 사용을 볼 수 있습니다 $.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
    }
});

그러나의 내부 구현이 변경되면 _showDatepicker코드가 손상 될 수 있으므로 Jquery-ui 업데이트에주의 하십시오.