Question

在这个jQuery日期时间选择器中，我想将幻灯片方向更改为文本框的右侧。

//源页面：

<script type="text/javascript">
        $(function () {
            $(".datepicker").datepicker({ dateFormat: 'dd-mm-yy', minDate: 0,
                changeMonth: true,
                changeYear: true
            }).attr('readonly', 'true');
        });
</script>


<asp:TextBox ID="txtDtVisit" runat="server" CssClass="datepicker" Style="background-image: url('Calendar_Control/images/calendar.gif'); background-repeat: no-repeat; background-position: right;" Width="178px"></asp:TextBox>

默认情况下，它显示在文本框的底部。

Answer 1

用这个替换你的脚本，

$(function () {
               $('.datepicker').datepicker({
                   changeYear: true,
                   dateFormat: 'dd/mm/yy',
                   showOn: 'button',
                   showmonth: true,
                   buttonText: "",
                   showAnim: 'slideDown',
                   duration: 'fast',
                   buttonImageOnly: true,
                   buttonImage: "Calendar_Control/images/calendar.gif",
                   beforeShow: function (textbox, instance) {
                       instance.dpDiv.css({
                           marginTop: (-textbox.offsetHeight) + 'px',
                           marginLeft: textbox.offsetWidth + 'px'
                       });
                   }
               }).attr('readonly', 'true');
               $(".ui-datepicker-trigger").mouseover(function () {
                   $(this).css('cursor', 'pointer');
               });
           });

Answer 2

试试这个

$( ".selector" ).css('margin-left', $(input).outerWidth() - widget.outerWidth());

如何更改jQuery datepicker幻灯片方向？

2 个答案: