Jquery UI Datepicker Right

Jquery UI Datepicker Right Align with input Field

by Vijay Dhanvai

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css">
<form id="testForm" runat="server">
    <div>
        <input type="text" id="txtDateFrom" style="width:300px;" />
        <br />
        <input type="text" id="txtDateTo" style="width:400px;" />
    </div>
</form>

CSS

div.ui-datepicker {
    font-size: 10px;
    display:none;
}

JavaScript

$(document).ready(function () {

            $('#txtDateFrom,#txtDateTo').datepicker({
                changeYear: true,
                beforeShow: function (textbox, instance) {
                    instance.dpDiv.css({
                     marginLeft: textbox.offsetWidth + (-176) + 'px'
                    //Here -176 is the width of my datepicker div, you can change according to your need.
                    });
                }
            });
        });