How to Show jQuery DatePicker on button click?

Question

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>

Go through the tutorial...try to write your own program

Jayram
– Jayram

2013-07-12 03:41:41 +00:00
Commented Jul 12, 2013 at 3:41 — Jayram
– Jayram, Commented Jul 12, 2013 at 3:41
yup., got it., Im new to this :)

user2574957
– user2574957

2013-07-12 03:52:29 +00:00
Commented Jul 12, 2013 at 3:52 — user2574957
– user2574957, Commented Jul 12, 2013 at 3:52

Arun P Johny · Accepted Answer · 2013-07-12 03:33:38Z

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

Alex · Accepted Answer · 2013-07-12 03:24:50Z

0

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>

answered Jul 12, 2013 at 3:24

Alex

11.6k7 gold badges39 silver badges52 bronze badges

Comments

ramesh · Accepted Answer · 2013-07-12 03:42:45Z

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>

Collectives™ on Stack Overflow

How to Show jQuery DatePicker on button click?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related