CODEWITHSUNDEEP
javascriptjqueryasp.netdatepicker
pvaju896
pvaju896

Reputation: 1417

Jquery Datepicker is not populated on Button click?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
   <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>
<body>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            var textBox = $('#mdatepicker');
            var icon = $('#myButton');
            var mydatepicker = textBox.datepicker();

            icon.click(function () {
                mydatepicker.datepicker("show");
            });

        });
    </script>;

    <form id="form1" runat="server">
            <input type="text" id="mdatepicker"  value="date" />
            <input type="button" id="myButton"   value="PopUp"/>
    </form>
</body>
</html>

Is there anything missing in this html snippet .??

datepicker is not getting populated, ErrorConsole showing error that- 

'textBox.datepicker is not a function'

in below code;

var mydatepicker = var mydatepicker = textBox.datepicker();

Can someone help please.?

Upvotes: 1

Views: 2594

Answers (4)

Tim B James
Tim B James

Reputation: 20364

Is datepicker not a function from the jQuery-UI library?

If so, then you need to include a script reference to the jQuery-UI Library.

EDITS

No You need to add a script reference to the jQuery-UI library and jQuery-UI Css file

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="src of desired theme" />

Upvotes: 2

phnkha
phnkha

Reputation: 7882

if you use jquery datepicker, the 'myButton' object is not necessary, datepicker will handle it for use, see the code:

<html>
<head><title>jQuery Open on button</title>
<link rel="stylesheet" href="ui.all.css" type="text/css" media="screen" />

</head>
<body>
<form>
    <input id="date" type="textbox"/>
</form>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                $("#date").datepicker({ showOn: 'button', buttonText: "select" });
        });
    </script>

</body>
</html>

Upvotes: 1

Fabian
Fabian

Reputation: 392

Thats my working copy of your code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link type="text/css" href="Styles/Site.css" rel="Stylesheet" ></link >
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

</head>
<body>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        var textBox = $('#mdatepicker');
        var icon = $('#myButton');
        var mydatepicker = textBox.datepicker();

        icon.click(function () {
            mydatepicker.datepicker("show");
        });

    });
</script>;

<form id="form1" runat="server">
        <input type="text" id="mdatepicker"  value="date" />
        <input type="button" id="myButton"   value="PopUp"/>
</form>

Upvotes: 3

talha2k
talha2k

Reputation: 1

Are you giving full refrences to js files. Including jquery and datepicker's .js files.

The issue is in this:

   <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
   <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>

I can not see any js files regarding datepicker in your head tag where you've included all js refrences.

There must be some file like:

<script type="text/javascript" src="Scripts/datepicker.js"></script>

or something like that, which you are missing to include.

Hope this helps.

Upvotes: 1

Related Questions