วิธีการเปลี่ยนตำแหน่งป๊อปอัปของตัวควบคุม jQuery DatePicker

มีความคิดอย่างไรที่จะทำให้ DatePicker ปรากฏที่ส่วนท้ายของกล่องข้อความที่เกี่ยวข้องแทนที่จะอยู่ด้านล่างโดยตรง สิ่งที่มีแนวโน้มที่จะเกิดขึ้นคือกล่องข้อความจะอยู่ที่ด้านล่างของหน้าและ DatePicker จะเลื่อนขึ้นเพื่อพิจารณาและครอบคลุมกล่องข้อความทั้งหมด หากผู้ใช้ต้องการพิมพ์วันที่แทนที่จะเลือกก็ทำไม่ได้ ฉันอยากให้มันปรากฏหลังกล่องข้อความดังนั้นมันไม่สำคัญว่ามันจะปรับแนวตั้งอย่างไร

มีความคิดอย่างไรในการควบคุมตำแหน่ง? ฉันไม่เห็นการตั้งค่าใด ๆ สำหรับวิดเจ็ตและฉันไม่มีโชคในการปรับแต่งการตั้งค่า CSS แต่ฉันอาจพลาดบางอย่างได้อย่างง่ายดาย

The accepted answer for this question is actually not for the jQuery UI Datepicker. To change the position of the jQuery UI Datepicker just modify .ui-datepicker in the css file. The size of the Datepicker can also be changed in this way, just adjust the font size.

นี่คือสิ่งที่ฉันใช้:

$('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);

ก่อนอื่นฉันคิดว่าควรมีafterShowingวิธีการในวัตถุ datepicker ซึ่งคุณสามารถเปลี่ยนตำแหน่งได้หลังจาก jquery ทำวูดูทั้งหมดใน_showDatepickerเมธอด นอกจากนี้พารามิเตอร์ที่เรียกว่า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
    }
});

แต่ระวังการอัปเดต Jquery-ui เนื่องจากการเปลี่ยนแปลงในการใช้งานภายในของ_showDatepickerโค้ดอาจทำให้โค้ดของคุณเสียหาย

ฉันต้องการวางตำแหน่ง datepicker ตาม div พาเรนต์ที่ตัวควบคุมอินพุตไร้ขอบของฉันอาศัยอยู่ ในการทำเช่นนั้นฉันใช้ยูทิลิตี้ "ตำแหน่ง" ที่รวมอยู่ใน jquery UI core ฉันทำสิ่งนี้ในงาน beforeShow ตามที่คนอื่น ๆ แสดงความคิดเห็นไว้ข้างต้นคุณไม่สามารถกำหนดตำแหน่งได้โดยตรงใน beforeShow เนื่องจากรหัส datepicker จะรีเซ็ตตำแหน่งหลังจากเสร็จสิ้นฟังก์ชัน beforeShow หากต้องการหลีกเลี่ยงสิ่งนั้นเพียงตั้งตำแหน่งโดยใช้ setInterval สคริปต์ปัจจุบันจะเสร็จสมบูรณ์โดยแสดง datepicker จากนั้นรหัสการเปลี่ยนตำแหน่งจะทำงานทันทีหลังจากมองเห็น datepicker แม้ว่าจะไม่ควรเกิดขึ้น แต่หากไม่สามารถมองเห็น datepicker ได้หลังจากผ่านไป 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);
        }

ผูก focusin หลังจากใช้ datepicker เปลี่ยน css ของวิดเจ็ต datepicker ต้องการความช่วยเหลือ

$('input.date').datepicker();
$('input.date').focusin(function(){
    $('input.date').datepicker('widget').css({left:"-=127"});
});

ฉันแก้ไขด้วยรหัส jquery ที่กำหนดเองของฉัน

1. ให้ฟิลด์ป้อน datepicker ของฉันเป็นคลาส " .datepicker2 "

2. ค้นหาตำแหน่งปัจจุบันจากด้านบนและ

3. วางตำแหน่งของกล่องป๊อปอัปซึ่งชื่อคลาสคือ " .ui-datepicker "

นี่คือรหัสของฉัน

$('.datepicker2').click(function(){
    var popup =$(this).offset();
    var popupTop = popup.top - 40;
    $('.ui-datepicker').css({
      'top' : popupTop
     });
});

ที่นี่ "40" คือพิกเซลที่ฉันคาดไว้คุณอาจเปลี่ยนด้วยของคุณ

ฟังก์ชั่น jquery ที่เรียบง่ายมาก

$(".datepicker").focus(function(event){
                var dim = $(this).offset();
                $("#ui-datepicker-div").offset({
                    top     :   dim.top - 180,
                    left    :   dim.left + 150
                });
            });

ฉันใช้เวลาอย่างไร้สาระในการพยายามหาปัญหานี้ในหลาย ๆ หน้าของไซต์ใหม่ที่ฉันกำลังพัฒนาและดูเหมือนจะไม่มีอะไรทำงาน (รวมถึงวิธีแก้ปัญหาต่างๆที่นำเสนอข้างต้นที่ฉันใช้ฉันเดาว่า jQuery เพิ่งเปลี่ยนไป สิ่งต่างๆเพียงพอแล้วเนื่องจากพวกเขาได้รับการแนะนำว่าโซลูชันไม่สามารถใช้งานได้อีกต่อไปฉันไม่รู้จริงๆแล้วฉันไม่เข้าใจว่าทำไมไม่มีสิ่งง่ายๆที่นำมาใช้ใน jQuery ui เพื่อกำหนดค่าสิ่งนี้เนื่องจากดูเหมือนว่าจะเป็น ปัญหาที่ค่อนข้างใหญ่เกี่ยวกับปฏิทินมักจะโผล่ขึ้นมาที่ตำแหน่งใดตำแหน่งหนึ่งซึ่งอยู่ห่างจากข้อมูลที่ป้อนเข้ามามากพอสมควร

อย่างไรก็ตามฉันต้องการโซลูชันสุดท้ายที่ใช้งานได้ทั่วไปเพียงพอที่ฉันจะใช้มันได้ทุกที่และมันก็ใช้ได้ ในที่สุดฉันก็ได้ข้อสรุปที่หลีกเลี่ยงคำตอบที่ซับซ้อนและเฉพาะรหัส 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());
});

โดยพื้นฐานแล้วฉันแนบแท็กสไตล์ใหม่ไว้ที่ส่วนหัวก่อนเหตุการณ์ "show" ของ datepicker ทุกครั้ง (ลบรายการก่อนหน้าหากมี) วิธีการทำสิ่งต่างๆนี้ได้รับปัญหาส่วนใหญ่ที่ฉันพบในระหว่างการพัฒนา

ทดสอบบน Chrome, Firefox, Safari และ IE> 8 (เนื่องจาก IE8 ทำงานได้ไม่ดีกับ jsFiddle และฉันสูญเสียความเอร็ดอร่อยในการดูแล

ฉันรู้ว่านี่เป็นการผสมผสานระหว่างบริบท jQuery และ javascript แต่ ณ จุดนี้ฉันไม่ต้องการใช้ความพยายามในการแปลงเป็น 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 
    } 
});

มันได้ผล !!!

แก้ไขปัญหาตำแหน่งการแสดง daterangepicker.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;
}

นอกจากนี้ยังเป็นที่น่าสังเกตว่าหาก IE ตกอยู่ในโหมด quirks คอมโพเนนต์ jQuery UI ของคุณและองค์ประกอบอื่น ๆ จะวางตำแหน่งไม่ถูกต้อง

เพื่อให้แน่ใจว่าคุณจะไม่ตกอยู่ในโหมดนิสัยแปลกตรวจสอบให้แน่ใจว่าคุณตั้งค่าประเภทหลักของคุณอย่างถูกต้องเป็น HTML5 ล่าสุด

<!DOCTYPE html>

การใช้การเปลี่ยนผ่านทำให้เกิดความยุ่งเหยิง หวังว่าสิ่งนี้จะช่วยใครบางคนในอนาคตได้บ้าง

สิ่งนี้ทำให้ฟังก์ชันการทำงานเป็นฟังก์ชันที่มีชื่อว่า method ซึ่งอนุญาตให้โค้ดของคุณห่อหุ้มมันหรือสำหรับวิธีการสร้างส่วนขยาย 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);
}

ภายใน Jquery.UI เพียงอัปเดตฟังก์ชัน _checkOffset เพื่อให้ viewHeight ถูกเพิ่มใน 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',          
            });