4

Jquery datepicker は、テスト フィールドの下に表示されます。しばらくすると、テキスト フィールドの上に表示されます。しかし、日付ピッカーを常にテストフィールドの上に表示したいです。どうやってするの？

4

7 に答える 7

9

次のコードは、カレンダーを常に入力フィールドの上に配置します。

$('.txtDate').datepicker({
   beforeShow: function (textbox, instance) {
       var txtBoxOffset = $(this).offset();
       var top = txtBoxOffset.top;
       var left = txtBoxOffset.left;
       var textBoxWidth = $(this).outerWidth();
       console.log('top: ' + top + 'left: ' + left);
               setTimeout(function () {
                   instance.dpDiv.css({
                       top: top-190, //you can adjust this value accordingly
                       left: left + textBoxWidth//show at the end of textBox
               });
           }, 0);

   }});
于 2015-11-13T11:43:27.357 に答える
1

自己責任...

.ui-datepicker {
    position: relative !important;
    top: -290px !important;
    left: 0 !important;
}

http://jsfiddle.net/mXnjS/1/

ベースのフォントサイズに依存するため、top px を更新する必要がある場合があります。

于 2013-03-27T12:10:15.063 に答える
1 
     $('#txtDate').datepicker({
    beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
            });
          }
      });

1 つのページに 2 つ以上の日付ピッカーがある場合、このコードはそれらすべての位置を変更します。それぞれを個別に変更する必要がある場合は、このコードを使用する必要があります...

        beforeShow: function (input, inst) {
       setTimeout(function () {
           inst.dpDiv.css({
            top: 100,
                left: 200
        });
      }, 0);
    }
于 2014-02-05T07:37:35.743 に答える
0 
$('#StartDateIssued,#EndDateIssued,#StartDateFulFill,#EndDateFulFill').datepicker({
    beforeShow: function (input, inst) {
        var offset = $(input).offset();
        var height = $(input).height();
        window.setTimeout(function () {
            inst.dpDiv.css({ top: (offset.top + height - 20) + 'px', marginLeft: ( input.offsetWidth) + 'px' })
        })},
    changeMonth: true, changeYear: true, constrainInput: true,
    dateFormat: "dd-mm-yy", onSelect: function (dateText, inst) {
        $('#StartDateIssued').valid();
        $('#StartDateIssued').val(dateText);
    }
});
于 2013-08-02T05:24:58.480 に答える
0 
You can try this :


$('#txtDate').datepicker({
    beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
            });
    }
});
于 2013-03-27T11:51:11.683 に答える
-3

jquery datepicker は、変更を必要としないように設計されています...datepicker の css を変更することによってのみ、左右に移動できます...datepicker は html バージョン 5 をサポートしていないため、html バージョンを確認してください。 html バージョン 4 がサポートされています

于 2014-02-04T12:18:07.047 に答える