Software Technology Tips

Datepicker is a rich widget of jQuery library . It exposes a lot of properties and methods to make it customizable . Once, while working with it , we needed to popup the datepicker just at side of the textbox . But the default popup position is just below the text box so we had to work around to make it appear at the side..
 
The following code block in document.ready method demonstrates the hack:
$('#txtDateTo,#txtDateFrom').datepicker({
    changeYear: true,
    beforeShow: function (textbox, instance) {
            instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
            });
    }
});
In the same way we can set the position of the popup where ever needed just by setting "marginTop" and "marginLeft" attributes.
 
Here beforeShow() is the method exposed by datepicker widget. We can get more from
For demo you can copy paste the folowing code in a file and save it with .html extension . Run in browser (Allow block content for IE) :

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title>jQuery Datepicker Demo</title>
    <style type="text/css">
        div.ui-datepicker   
        {
            font-size: 10px;
        }
    </style>   
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/start/jquery-ui.css" type="text/css" media="all" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">   
        $(document).ready(function () {
            $('#txtDateFrom,#txtDateTo').datepicker({
                changeYear: true,
                beforeShow: function (textbox, instance) {   
                instance.dpDiv.css({
                    marginTop: (-textbox.offsetHeight) + 'px',
                    marginLeft: textbox.offsetWidth + 'px'
                });
                }
            });
        });
    </script>
    </head>
    <body>
     <form id="testForm" runat="server">
        <div>
            <input type="text" id="txtDateFrom" /><br />
            <input type="text" id="txtDateTo" />
        </div>
     </form>
    </body>
</html>
 


Related Tags:

Javascript, jQuery, Popup

Author: Sachin Kumar

JavaScript

Let us Connect!

Awards and Achievements

Red Herringcolor DeloitteFast50 DB ZInnov1   Nascome  DB Stpi

This site uses cookies. We respect your privacy.copyright (c) Mindfire Solutions 2007-2015. Login