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!

iso 9001 QA25 Red Herring STPI D&B Fastest Growing SME 2013 Award zinnov Nasscom

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