CODEWITHSUNDEEP
c#jqueryasp.netdatepicker
yongie
yongie

Reputation: 1

Jquery Datepicker with TextBox in ASP.NET

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

Upvotes: 0

Views: 9079

Answers (6)

Ebrima Sidibeh
Ebrima Sidibeh

Reputation: 1

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>

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 1

/* 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>

Upvotes: 0

Kaushal Khamar
Kaushal Khamar

Reputation: 2125

write your code in pageload() of javascript.

function pageLoad(){
   $('input[id*=txtReleaseDate]').datepicker();
}

Upvotes: 2

Micka&#235;l Derriey
Micka&#235;l Derriey

Reputation: 13704

// 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.

Upvotes: 0

ewitkows
ewitkows

Reputation: 3618

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?

Upvotes: 1

Amen Ayach
Amen Ayach

Reputation: 4348

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();
        })();
});

Upvotes: 0

Related Questions