Using Datepicker in Textbox using JQuery

Question

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.

$("#TbOutboundOn").datepicker({ missing some params another suggestion is use this way: $("#TbOutboundOn").datepicker(); — Jai
– Jai, Commented May 8, 2013 at 6:38
you are missing the jquery ui css file ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/redmond/… — Arun P Johny
– Arun P Johny, Commented May 8, 2013 at 6:40
@vimalnath I didn't use datepicker.js because the example in jqueryui.com/datepicker/#default doesn't include it, do I have to? — Abie Giordano
– Abie Giordano, Commented May 8, 2013 at 6:42

Vond Ritz · Accepted Answer · 2013-05-08 07:09:04Z

8

$(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/

edited May 8, 2013 at 7:09

answered May 8, 2013 at 6:41

Vond Ritz

2,01215 silver badges15 bronze badges

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

7 Comments

Abie Giordano Over a year ago

Sorry mr @vond ritz I still can't get the datepicker to show, with or without the parameter

Abie Giordano Over a year ago

still no luck sir, maybe it has something to do with the stylesheet/css?

Vond Ritz Over a year ago

can you debug it in firebug? and tell me what exception it will throw.

Abie Giordano Over a year ago

it runs fine, no anything weird whatsoever, it just won't show the datepicker UI when I click the textbox

Vond Ritz Over a year ago

so weird behaviour... ok let me think of it again.

|

Community · Accepted Answer · 2017-05-23 11:52:05Z

2

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

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered May 8, 2013 at 8:08

abidmix

1,7481 gold badge16 silver badges26 bronze badges

6 Comments

Abie Giordano Over a year ago

what do you mean by css selector? can you make an example using my code? sorry I'm a newbie in jquery

abidmix Over a year ago

Did you follow the hyperlink in the answer I gave. Download the demo files.Are you using update panels.Oh, I meant a class selector.$(".clDate") is a class selector which will attach itself to textboxes with a css class called clDate.

ajakblackgoat Over a year ago

Have you tried using the class selector as @AbideMasaraure suggested above? or change your $("#TbOutboundOn").datepicker() to $("#<%= TbOutboundOn.ClientID%>").datepicker()

Abie Giordano Over a year ago

@AbideMasaraure I can't open the solution for the WebApplication 3 and I'm currently not using updatepanel, but I plan to.

Abie Giordano Over a year ago

@ajakblackgoat I tried changing the script as you told me, still not working :(

|

Jai · Accepted Answer · 2013-05-08 06:42:06Z

1

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>

answered May 8, 2013 at 6:42

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Abie Giordano Over a year ago

but I have a stylesheet too, I already tried to mix both but it still didn't work :(

Bill the Lizard · Accepted Answer · 2013-05-08 12:24:22Z

1

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>

edited May 8, 2013 at 12:24

Bill the Lizard

407k213 gold badges579 silver badges892 bronze badges

answered May 8, 2013 at 6:41

Deepak Kumar

921 silver badge17 bronze badges

5 Comments

Deepak Kumar Over a year ago

Is Your html coming from Ajax request and code you have added in header part of page? If yes please add code in your ajax response page in below, it will resolve your problem. If it is working please mark accepted please.

Deepak Kumar Over a year ago

Also you should add style sheet as you can see in your reference, for calendar object jqueryui.com/datepicker/#default <link rel="stylesheet" href="/resources/demos/style.css" /> <link href="code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />

Deepak Kumar Over a year ago

Remove cookies and cache of browser.

Abie Giordano Over a year ago

removed the cookies and cache, still no luck :(

Deepak Kumar Over a year ago

Write the step how your process running, possibly I can resolve.

Collectives™ on Stack Overflow

Using Datepicker in Textbox using JQuery

4 Answers 4

7 Comments

6 Comments

1 Comment

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

6 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related