0

I have the problem for jquery datepicker with textbox in asp.net but i don't have the resolve it. Please help me! . Sorry, my grammar is not good. :D

<link rel="Stylesheet" type="text/css" href="styles/jquery.datepick.css"/>
<script type="text/javascript" src="scripts/jquery.datepick.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(function () {

            $("#" + '<%=txtReleaseDate.ClientID%>').datepicker();
    });
});
</script>

enter image description here

My textbox:

<asp:TextBox ID="txtReleaseDate" runat="server" CssClass="js-date-picker">  </asp:TextBox>

My textbox doesn't show datepicker

7
  • and what is this problem? Commented May 14, 2014 at 13:48
  • Try the following line $('input[id$=txtReleaseDate]').datepicker(); This will take all input elements where the id ends with txtReleaseDate. Commented May 14, 2014 at 13:51
  • You can also use only 1 set of quotes: $('#<%=txtReleaseDate.ClientID%>').datepicker(); Commented May 14, 2014 at 14:00
  • my problem is textbox don't show datepicker Commented May 14, 2014 at 14:02
  • it doesn't work. please help me Commented May 14, 2014 at 14:05

6 Answers 6

2

write your code in pageload() of javascript.

function pageLoad(){
   $('input[id*=txtReleaseDate]').datepicker();
}
Sign up to request clarification or add additional context in comments.

1 Comment

I had to do this. My date picker was inside an UpdatePanel and it gets clobbered every time the UpdatePanel gets updated (so have to re-apply the jquery datepicker() after every update, which you can do in pageLoad.
1

Try adding ClientIDMode="Static" to your textbox, and then updating your script to reference $('#txtReleaseDate')... It's possible using the "<%" code is messing up your script.

If it doesn't work, what do your browser debugger tools show (F12 in IE\Chrome, Firebug in Firefox) ? Are you getting an error?

3 Comments

I tried add ClientIDMode="Static", it still doesn't work
@yongie and you updated your script to not use .ClientID? What aobut the browser debugging tools? do they show an error?
@yongie check out msdn.microsoft.com/en-us/library/gg699336(v=vs.85).aspx, if youre going to dabble in scripting, it's good to know how to debug such things..
0

You defined a function without calling it. Just remove $(function () {

$(document).ready(function () {
    $("#" + '<%=txtReleaseDate.ClientID%>').datepicker();
});

Or execute it(not recommended):

$(document).ready(function () {
        $(function () {
                $("#" + '<%=txtReleaseDate.ClientID%>').datepicker();
        })();
});

5 Comments

i have edited but textbox don't show datepicker! do you have other resolve?
Im not sure about the script that you had used, usually i use jQuery.ui.js.. just using this focus the textbox will popup the datepicker.. one more thing u should use a good browser like chrome firefox or IE9 .. (not sure about IE)
I used jquery date picker in here keith-wood.name/datepick.html and i use chrome browser. But it does not work. :(
You need to include jquery and other js files too : <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.11.0/…> <link rel="stylesheet" type="text/css" href="css/jquery.datepick.css"> <script type="text/javascript" src="js/jquery.plugin.js"></script> <script type="text/javascript" src="js/jquery.datepick.js"></script>
Thanks for help me, i don't know why it still wrong
0
// First notation
$(function() {
    // Code here
});

// Second notation
$(document).ready(function() {
    // Code here
});

These 2 code blocks are equivalent, my first advice is just pick one, the one you're more comfortable with, and stick with it.

Second advice, regarding the jQuery UI's datepicker: instead of relying on controls ids, which forces you to introduce server tags in you JS code, just choose a CSS class you'll use to tag the controls you want to apply jQuery UI datepicker to.

This way, you will keep your JS code DRY, and you can include the initialization code in the master page and not modify it.

Imagine you would choose the js-date-picker class as you tagging class, here's the JS you'll have to write. Note I prefer the short notation, but once again, it's up to you:

$(function() {
    $(".js-date-picker").datepicker({
        // Options go here   
    });
});

You can find the list of options here. I've always found good to go have a look at the options, so you're aware of the defaults, and you don't get surprised with some behavior that you might not have wanted.

EDIT: OK, after a second look, it's normal you don't see anything. I guess you also have a JS error when you run it. The screenshot shows you have jquery.datepick.js, which is different than jQuery UI's datepicker. I think I found the homepage of this plugin here.

As you can see, it shows the plugin can be invoked by calling .datepick() and not .datepicker(). Maybe you could try that.

1 Comment

Thank for your comment but i don't find the result
0
/* Paste your link file here */

    <link href="../assets/bootstrap-datepicker/css/datepicker.css" rel="stylesheet" />
    <script src="../assets/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>   

 /* This only work with asp.net tag */
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=textbox.ClientID %>").datepicker();//paste textbox id here
        });
        </script>

    /* This work with html tag */
    <script type="text/javascript">
        $(document).ready(function () {
            $("#textbox").datepicker();//paste textbox id here
        });
        </script>

Comments

0

Problem is your text box. In html input if you type - type="text" will work but in asp.net text box it does not. Rather capture the change event of your text box in jquery and change the format to "dd/mm/yy".

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(function () {
        $("#<%=datepicker.ClientID%>").datepicker();
        $("#<%=datepicker.ClientID%>").on("change", function () {
            $("#<%=datepicker.ClientID%>").datepicker("option", "dateFormat", "dd/mm/yy");
        });
    });
</script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.