CODEWITHSUNDEEP
javascript
user2574957
user2574957

Reputation: 39

How to Show jQuery DatePicker on button click?

Hi I saw a tutorial about creating a datepicker using an image. Ive copied and pasted the exact codes (except for the image path) but the calendar image does not show., can anyone help me please .. :D

here is the code

   <HTML>
<HEAD>

<style type="text/css">
body
{
    font-size: 10pt;
}

</style>


<script type="text/javascript"> 

$(document).ready(function() {

    $("#txtDate").datepicker({
        showOn: 'button',
        buttonText: 'Show Date',
        buttonImageOnly: true,
        buttonImage: 'calendar.jpg',
        dateFormat: 'dd/mm/yy',
        constrainInput: true
    });

    $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
    });

});

</script>


</HEAD>
<BODY>
<input type='text' id='txtDate' />

</BODY>
</HTML>

Upvotes: 1

Views: 18321

Answers (3)

ramesh
ramesh

Reputation: 4082

You must include jQuery UI path

Complete working code here

<HTML>
<HEAD>

<style type="text/css">
body
{
    font-size: 10pt;
}

</style>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"> 

$(document).ready(function() {

    $("#txtDate").datepicker({
        showOn: 'button',
        buttonText: 'Show Date',
        buttonImageOnly: true,
        buttonImage: 'calendar.jpg',
        dateFormat: 'dd/mm/yy',
        constrainInput: true
    });

    $(".ui-datepicker-trigger").mouseover(function() {
        $(this).css('cursor', 'pointer');
    });

});

</script>
<head>
<body>

<input type="text" id="txtDate"  />

</body>

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to include both jQuery and jQuery UI libraries for this to work

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Ex:

<HTML>
    <HEAD>
        <style type="text/css">
            body {
                font-size: 10pt;
            }
        </style>
        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>        

        <script type="text/javascript"> 

            $(document).ready(function() {

                $("#txtDate").datepicker({
                    showOn: 'button',
                    buttonText: 'Show Date',
                    buttonImageOnly: true,
                    buttonImage: 'calendar.jpg',
                    dateFormat: 'dd/mm/yy',
                    constrainInput: true
                });

                $(".ui-datepicker-trigger").mouseover(function() {
                    $(this).css('cursor', 'pointer');
                });

            });

        </script>


    </HEAD>
    <BODY>
        <input type='text' id='txtDate' />

    </BODY>
<HTML>

Demo: Plunker

Upvotes: 4

Alex
Alex

Reputation: 11579

Add JQuery library and ui like this:

<script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/scripts/jquery-ui-1.10.3.custom.min.js"></script>

Upvotes: 0

Related Questions