CODEWITHSUNDEEP
jqueryasp.netvb.netjquery-uivisual-studio-2008
Abie Giordano
Abie Giordano

Reputation: 371

Using Datepicker in Textbox using JQuery

Here I am trying to create a page with a textbox where I've an idea to show a CalendarExtender (like in AJAXToolkit) but now I'm trying to get it by using JQuery, the problem is, I can't make the Calendar UI to pop out when I clicked the textbox, my upper aspx page is looking like this:

<link href="../Support/StyleSheet/PageStyle.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#TbOutboundOn").datepicker({
    });
</script>

and the textbox that I'm trying to use is:

  <tr>
                    <td align="left" width="120px" height="25px">
                        <asp:CheckBox ID="CbOutboundOn" Text=" Outbound On" runat="server" />
                    </td>
                    <td align="center" class="style1">
                        <asp:Label ID="Label1" runat="server" Text=":"></asp:Label>
                    </td>
                    <td align="left" width="200px">
                        <asp:TextBox ID="TbOutboundOn" runat="server" Width="194px" placeholder="dd/mm/yyyy"></asp:TextBox>
                    </td>
                    <td width="645px">
                    </td>
                </tr>

I think it's good enough, but it isn't, I can't get the calendar to show when I click the textbox in "TbOutboundOn", a friend suggested the stylesheet is the issue, but I don't quite understand, can anyone help with my problem? Btw, I used http://jqueryui.com/datepicker/#default as my reference.

I already tried to copy all the stylesheet referenced by jqueryui's datepicker sites, and combine it with my own stylesheet, but it still not working. I try to use only the stylesheet provided in jqueryui datepicker too, but still no luck.

Thank you for the help.

Upvotes: 0

Views: 20464

Answers (4)

Deepak Kumar
Deepak Kumar

Reputation: 92

Update following code : Your Code :

<script type="text/javascript">
    $(function () {
        $("#TbOutboundOn").datepicker({
    });
</script>

Update using following : 

<script type="text/javascript">
    $("#TbOutboundOn").datepicker();    
</script>

Ajax response and Date piker code : 

<tr>
                    <td align="left" width="120px" height="25px">
                        <asp:CheckBox ID="CbOutboundOn" Text=" Outbound On" runat="server" />
                    </td>
                    <td align="center" class="style1">
                        <asp:Label ID="Label1" runat="server" Text=":"></asp:Label>
                    </td>
                    <td align="left" width="200px">
                        <asp:TextBox ID="TbOutboundOn" runat="server" Width="194px" placeholder="dd/mm/yyyy"></asp:TextBox>
                    </td>
                    <td width="645px">
                    </td>
                </tr>
<script type="text/javascript">
    $("#TbOutboundOn").datepicker();    
</script>

Upvotes: 1

abidmix
abidmix

Reputation: 1748

Your id is being mangled.Use a css class selector. See how I helped another user here and you can use the demo which takes care of update panels.

<script type="text/javascript">
  $(function () {
$(".clDate").datepicker(); 
         }   
</script>


  <asp:TextBox ID="TbOutboundOn" runat="server" CssClass="clDate" </asp:TextBox>

See demo here

Website demo version here

Upvotes: 2

Vond Ritz
Vond Ritz

Reputation: 2012

$(document).ready(function () {

$('#TbOutboundOn').datepicker();

//or

$('#TbOutboundOn').datepicker({ dateFormat: "dd-M-yy" });

});

u can find other parameter to modify ur datepicker here : http://api.jqueryui.com/datepicker/

Upvotes: 8

Jai
Jai

Reputation: 74738

See you have to use the css file for calendar too, you are missing the default closing of the calendar ();:

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
 rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript">
</script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript">
</script>
<script type="text/javascript">
  $(function () {
      $("#TbOutboundOn").datepicker();  //<-- missing default closing this way.
  });
</script>

Upvotes: 1

Related Questions