How to use jquery Datepicker in web control in asp.net?

Question

i am creating a web-control and i want to use jquery date-picker on this control, i have tried the below things: 1). apply all the required jquery code in web-control(but it does not work for me.) 2). apply all the required jquery code in page where i am calling that web-control(but it does not work for me.)

Please help me,

Actually what is my purpose to do it is: i want to create a generic module for search, to which i will just pass the name of table it would be work automatically, what i have completed up to now is:

1). bind all the columns in a dropdown list now what i want to do is: if the column type is DateTime then it will show a textbox with jquery calendar.

Please help me to resolve this problem, My code is:

<table>
<tr>
    <td>
        <asp:DropDownList ID="drpColumnName" Width="150px" runat="server" AutoPostBack="true"
            OnSelectedIndexChanged="drpColumnName_SelectedIndexChanged">
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList ID="drpOperation" Width="150px" runat="server">
        </asp:DropDownList>
    </td>
    <td>
        <asp:DropDownList ID="drpCondition" Width="150px" runat="server">
            <asp:ListItem Text="Or" Selected="True" Value="0"></asp:ListItem>
            <asp:ListItem Text="And" Value="1"></asp:ListItem>
        </asp:DropDownList>
    </td>
    <td>
        <asp:TextBox ID="txtSearchText" runat="server" Width="150px"></asp:TextBox>
        <asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox>
    </td>
    <td>
        <asp:Button ID="btnAddConditionToSearch" runat="server" Text="AddToSearch" OnClick="btnAddConditionToSearch_Click" />
    </td>
</tr>
<tr>
    <td colspan="5">
        &nbsp;
    </td>
</tr>
</table>

Page's code is :

  <form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
    <Search:ctrlSearch ID="cntrlSearch" runat="server" />
</div>
</form>

Jquery code is:

     <script type="text/javascript">
$(document).ready(function () {


    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);
    // Place here the first init of the DatePicker   

    $('.myclass').datepicker();


});

function InitializeRequest(sender, args) { }
function EndRequest(sender, args) {
    // after update occur on UpdatePanel re-init the DatePicker 

    $('.myclass').datepicker();


}

Please help me,

abidmix · Accepted Answer · 2013-05-08 09:21:49Z

2

Locate your date picker by a class selector.This is much easier than trying to locate ids.In case you have your controls sandwiched in an update panel you have two initialize the datepicker twice.Do this

  <script type="text/javascript">
  $(document).ready(function () {


        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);
        // Place here the first init of the DatePicker   

        $('.myclass').datepicker();


    });

    function InitializeRequest(sender, args) { }
    function EndRequest(sender, args) {
        // after update occur on UpdatePanel re-init the DatePicker 

        $('.myclass').datepicker();


             }
</script>

Markup`

  <asp:TextBox ID="txtDateSearch" CssClass="myClass" runat="server" Width="150px"></asp:TextBox>

See demo files here

edited May 8, 2013 at 9:21

answered Mar 5, 2013 at 9:20

abidmix

1,7481 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abidmix Over a year ago

Where are your query scripts located.They should be on the master page.And indicate if you are using update panels.

Ram Singh Over a year ago

i have updated the code, now i can view the div in html rendered using firebug but still not able to display the datepicker

abidmix Over a year ago

Can you please show me the js files you are using.Put this code on the main aspx page.

abidmix Over a year ago

I have updated my answer with a dropbox of demo files.I can't see why it should not work.

Dinesh Haraveer · Accepted Answer · 2013-03-05 09:21:21Z

1

Check like this

$("#<%=txtSearchText.ClientID%>").datepicker();

answered Mar 5, 2013 at 9:21

Dinesh Haraveer

1,8043 gold badges33 silver badges55 bronze badges

Comments

Jim · Accepted Answer · 2013-03-05 09:20:40Z

0

I think your problem will be because asp.net changes the names and the ID's of elements which are nested in Controls & master pages etc.

Open the source of your page, find the control and double check the ID.

Or as an alternative add a css class to the element and look for that instead of the ID with jQuery.

JA

answered Mar 5, 2013 at 9:20

Jim

7333 gold badges12 silver badges28 bronze badges

Comments

Batuhan Karaduman · Accepted Answer · 2013-07-11 08:01:17Z

0

visit this page jquery-ui-datepicker -> It is ui code. Save this code block as a js file. then source it on your aspx page.

<script src="js/jquery.ui.datepicker-tr.js" type="text/javascript"></script> like this.

$(document).ready(function () {

$('#<%=txtBirthday.ClientID%>').datepicker({
                changeMonth: true,
                changeYear: true,
                yearRange: "-100:-17",
                defaultDate: new Date(1980, 01, 01)
            });

});

and here is the sample code.

answered Jul 11, 2013 at 8:01

Batuhan Karaduman

11 bronze badge

Comments

strivedi183 · Accepted Answer · 2013-12-19 05:18:59Z

0

<asp:Label ID="Label1" runat="server" Text="From"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Label ID="Label2" runat="server" Text="To"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
  $(function() {
    $( "#TextBox1" ).datepicker();
  });
  $(function() {
    $( "#TextBox2" ).datepicker();
  });
</script>

edited Dec 19, 2013 at 5:18

strivedi183

4,8373 gold badges33 silver badges41 bronze badges

answered Dec 19, 2013 at 4:54

user3117795

1

Collectives™ on Stack Overflow

How to use jquery Datepicker in web control in asp.net?

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related