Wednesday, June 13, 2012

How to add DatePicker jquery functionnality to a page using Master Page File

Hi all


If you try to add a DatePicker JQuery Control in a page that uses a Master Page file the same way you do in a normal aspx page , It won't work!


What's the problem ?? 
In fact , remember that jquery uses javascript for event driven on HTML control, so in order for jquery to effective asp.net control simply define your asp.net text control as a client side control in

<script type="text/javascript">
    $(function() {
        $('#txtDate').datepicker({
            changeMonth: true,
            changeYear: true
        });
    });
    </script>

<div class="demo">

<p>Date: <asp:TextBox ID="txtDate" runat="server"></asp:TextBox></p>

</div>

instead define it as this


<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('#<%= txtDate.ClientID %>').datepicker({changeMonth: true,
            changeYear: true});
    });
    </script>
<div class="demo">
    <asp:TextBox ID="txtDate" runat="server" >click to select date</asp:TextBox><asp:ImageButton
        ID="datepicker" runat="server" />
    </div>

which make the server (asp.net control) control to regenerate as a client control when executed. I've also tried in creating it as a user control and believe me it works perfectly
For those who are intersted, I can prepare a template project as a live Demo, just drop me an email!
Good programming


Ibtissam

1 comment:

  1. I am using Datapicker on content page of master page. I am using the code what you have dsacribed above. But it is not working for me. I am using your code.

    ReplyDelete