Question

37

How to Show jQuery DatePicker on button click?

rated 0 times [ 44] [ 7] / answers: 1 / hits: 18278 / 11 Years ago, fri, july 12, 2013, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalli

Add To Favorites

Follow

Total Points: 589

Total Questions: 105

Total Answers: 97

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

kalli questions

1 How can I get old value in input's onChange event?

Mon, Aug 23, 21, 00:00, 3 Years ago

1 How do I change @keyframes using JS?

Thu, Dec 3, 20, 00:00, 4 Years ago

1 How to set the width of Material UI drawer

Tue, Sep 22, 20, 00:00, 4 Years ago

1 Save As Video but how to do it with javascript and html instead?

Wed, May 27, 20, 00:00, 4 Years ago

1 How to render variable in string in < Text> JSX tag in React Native

Tue, Apr 21, 20, 00:00, 4 Years ago

View All

answered 11 Years ago jackeline · Accepted Answer

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