Menu ▼



Posted By :
avatarmrkraju
Total Views : 2093

jQuery datepicker show on button or icon click

Show datepicker on button click
To show datepicker on button click we need to set the property showOn value to "button" and set buttonText value to "Select date".

Example
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate").datepicker({
            showOn: "button",
            buttonText: "Select date"
        });
    });
</script>

Show datepicker on image / icon click
To show datepicker on image or icon along with the above two properties we need to set the property buttonImage value to "Image URL" and set buttonImageOnly value to true.

Example
Date :

<script language="javascript">
    $(document).ready(function () {
        $("#txtdate1").datepicker({
            showOn: "button",
            buttonImage: "/images/favicon.ico",
            buttonImageOnly: true,
            buttonText: "Select date"
        });
    });
</script>

Source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet"
        type="text/css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script language="javascript">
        $(document).ready(function () {
            $("#txtdate").datepicker({
                showOn: "button",
                buttonText: "Select date"
            });
            $("#txtdate1").datepicker({
                showOn: "button",
                buttonImage: "/images/favicon.ico",
                buttonImageOnly: true,
                buttonText: "Select date"
            });
        });
    </script>
</head>
<body>
    Date :
    <input id="txtdate" type="text">
    <br />
    <br />
    Date :
    <input id="txtdate1" type="text">
</body>
</html>






comments powered by Disqus


Search dotnetlearners.com