Bagaimana mengubah posisi pop-up dari jQuery DatePicker control

Adakah ide bagaimana agar DatePicker muncul di akhir kotak teks terkait alih-alih langsung di bawahnya? Apa yang cenderung terjadi adalah bahwa kotak teks berada di bagian bawah halaman dan DatePicker bergeser untuk memperhitungkannya dan menutupi kotak teks sepenuhnya. Jika pengguna ingin mengetik tanggal alih-alih memilihnya, mereka tidak bisa. Saya lebih suka menampilkannya tepat setelah kotak teks jadi tidak masalah bagaimana itu menyesuaikan secara vertikal.

Ada ide bagaimana mengontrol pemosisian? Saya tidak melihat pengaturan apa pun untuk widget, dan saya belum beruntung mengubah pengaturan CSS, tetapi saya dapat dengan mudah melewatkan sesuatu.

Jawaban yang diterima untuk pertanyaan ini sebenarnya bukan untuk jQuery UI Datepicker. Untuk mengubah posisi jQuery UI Datepicker cukup modifikasi .ui-datepicker di file css. Ukuran Datepicker juga dapat diubah dengan cara ini, cukup sesuaikan ukuran font.

Inilah yang saya gunakan:

$('input.date').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({marginTop: -input.offsetHeight + 'px', marginLeft: input.offsetWidth + 'px'});
    }
});

Anda mungkin juga ingin menambahkan sedikit lebih banyak ke margin kiri sehingga tidak tepat terhadap bidang input.

Saya melakukannya langsung di CSS:

.ui-datepicker { 
  margin-left: 100px;
  z-index: 1000;
}

Semua bidang masukan tanggal saya lebarnya 100 piksel. Saya juga menambahkan z-index sehingga kalender juga muncul di atas popup AJAX.

Saya tidak mengubah file CSS jquery-ui; Saya membebani kelas di file CSS utama saya, jadi saya dapat mengubah tema atau memperbarui widget tanpa harus memasukkan kembali mod spesifik saya.

Berikut adalah variasi penyelarasan kalender Datepicker saya.

Saya pikir itu cukup bagus, karena Anda dapat mengontrol pemosisian melalui jQuery UI Position util.

Satu batasan: jquery.ui.position.js diperlukan.

Kode:

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

Berikut adalah variasi lain yang bekerja dengan baik untuk saya, sesuaikan rect.top + 40, rect.left + 0 agar sesuai dengan kebutuhan Anda:

$(".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>

Ini bekerja untuk saya:

 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);

Pertama saya pikir harus ada afterShowingmetode di objek datepicker, di mana Anda dapat mengubah posisi setelah jquery melakukan semua voodoo dalam _showDatepickermetode tersebut. Selain itu, parameter yang dipanggil preferedPositionjuga diinginkan, sehingga Anda dapat menyetelnya dan jquery memodifikasinya jika dialog ditampilkan di luar viewport.

Ada "trik" untuk melakukan hal terakhir ini. Jika Anda mempelajari _showDatepickermetode ini, Anda akan melihat penggunaan variabel privat $.datepikcer._pos. Variabel itu akan diatur jika tidak ada yang mengaturnya sebelumnya. Jika Anda memodifikasi variabel itu sebelum menampilkan dialog, Jquery akan mengambilnya dan akan mencoba untuk mengalokasikan dialog di posisi itu, dan jika itu merender keluar dari layar, itu akan menyesuaikannya untuk memastikan itu terlihat. Kedengarannya bagus, ya?

Masalahnya adalah; _posbersifat pribadi, tetapi jika Anda tidak keberatan. Kamu bisa:

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

Tapi hati-hati dengan update Jquery-ui, karena perubahan dalam implementasi internal _showDatepickerdapat merusak kode Anda.

Saya perlu memposisikan datepicker menurut div induk di mana kontrol input tanpa batas saya berada. Untuk melakukannya, saya menggunakan utilitas "posisi" yang termasuk dalam inti UI jquery. Saya melakukan ini di acara beforeShow. Seperti yang dikomentari orang lain di atas, Anda tidak dapat mengatur posisi secara langsung di beforeShow, karena kode pemilih data akan mengatur ulang lokasi setelah menyelesaikan fungsi beforeShow. Untuk menyiasatinya, cukup atur posisinya menggunakan setInterval. Skrip saat ini akan selesai, menampilkan datepicker, dan kemudian kode reposisi akan berjalan segera setelah datepicker terlihat. Meskipun itu seharusnya tidak pernah terjadi, jika datepicker tidak terlihat setelah 0,5 detik, kode tersebut memiliki fail-safe untuk menyerah dan menghapus interval.

        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);
        }

mengikat focusin setelah menggunakan css perubahan datepicker dari widget datepicker`s ingin bantuan

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

saya memperbaikinya dengan kode jquery kustom saya.

1. memberi saya input field datepicker kelas " .datepicker2 "

2. temukan posisinya saat ini dari atas dan

3. menempatkan kotak popup, yang nama kelasnya adalah " .ui-datepicker "

ini kode saya.

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

di sini "40" adalah piksel yang saya harapkan, Anda dapat mengubahnya dengan piksel Anda.

memperbaiki masalah tampilkan posisi 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();
        }
    }

Fungsi jquery yang sangat sederhana.

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

Saya menghabiskan banyak waktu untuk mencoba mencari tahu masalah ini untuk beberapa halaman situs baru yang saya kembangkan dan sepertinya tidak ada yang berhasil (termasuk salah satu dari berbagai solusi yang disajikan di atas yang saya terapkan. Saya menduga jQuery baru saja berubah semuanya cukup karena mereka disarankan bahwa solusi tidak berfungsi lagi. Saya tidak tahu. Sejujurnya, saya tidak mengerti mengapa tidak ada sesuatu yang sederhana yang diimplementasikan ke dalam jQuery ui untuk mengonfigurasi ini, karena tampaknya masalah yang cukup besar dengan kalender selalu muncul di beberapa posisi jauh di bawah halaman dari masukan yang dilampirkan.

Bagaimanapun, saya menginginkan solusi akhir yang cukup umum sehingga saya dapat menggunakannya di mana saja dan itu akan berhasil. Sepertinya saya akhirnya sampai pada kesimpulan yang menghindari beberapa jawaban yang lebih rumit dan spesifik kode jQuery di atas:

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());
});

Pada dasarnya saya melampirkan tag gaya baru ke kepala sebelum setiap acara "show" datepicker (menghapus yang sebelumnya, jika ada). Metode melakukan sesuatu ini mengatasi sebagian besar masalah yang saya hadapi selama pengembangan.

Diuji di Chrome, Firefox, Safari, dan IE> 8 (karena IE8 tidak bekerja dengan baik dengan jsFiddle dan saya kehilangan semangat untuk memperhatikan

Saya tahu bahwa ini adalah campuran konteks jQuery dan javascript, tetapi pada titik ini saya hanya tidak ingin berusaha mengubahnya menjadi jQuery. Akan sederhana, saya tahu. Aku sudah selesai dengan hal ini sekarang. Semoga orang lain bisa mendapatkan manfaat dari solusi ini.

Mereka mengubah nama kelas menjadi ui-datepicker-trigger

Jadi ini berhasil jquery 1.11.x

.ui-datepicker-trigger { 
margin-top:7px;
  margin-left: -30px;
  margin-bottom:0px;
  position:absolute;
  z-index:1000;
}

Saya mengambilnya dari (( Cara mengontrol pemosisian jQueryUI datepicker ))

$ .extend ($. datepicker, {_checkOffset: function (inst, offset, isFixed) {return offset}});

berhasil !!!

Atau Anda dapat menggunakan acara fokus pada objek dateSelect Anda dan api posisi bersama-sama. Anda dapat menukar atas dan bawah dan kiri ke kanan atau tengah (atau apa pun yang Anda inginkan dari api posisi). Dengan cara ini Anda tidak memerlukan interval atau solusi yang sangat rumit dan Anda dapat mengonfigurasi tata letak agar sesuai dengan kebutuhan Anda tergantung di mana masukannya.

dateSelect.focus(function () {
    $("#ui-datepicker-div").position({
        my: "left top",
        at: "left bottom",
        of: $(this)
    });
});

Perlu juga dicatat bahwa jika IE masuk ke mode quirks, komponen jQuery UI Anda, dan elemen lainnya, akan ditempatkan secara tidak benar.

Untuk memastikan Anda tidak masuk ke mode quirks, pastikan Anda menyetel doctype dengan benar ke HTML5 terbaru.

<!DOCTYPE html>

Menggunakan transisi membuat banyak hal menjadi berantakan. Semoga ini akan menghemat waktu seseorang di masa depan.

Ini menempatkan fungsionalitas ke dalam metode bernama fungsi, memungkinkan kode Anda untuk merangkumnya atau metode yang akan dibuat ekstensi jquery. Baru saja digunakan pada kode saya, berfungsi dengan sempurna

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);
}

Di dalam Jquery.UI, perbarui saja fungsi _checkOffset, sehingga viewHeight ditambahkan ke offset.top, sebelum offset dikembalikan.

_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',          
            });