Question

In this jQuery date time picker i want to change the slide direction to right side of the textbox.

// Source Page:

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

By default it is showing in bottom of the textbox.

Answer 1

Replace your Script with this,

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