Trigger jQuery DatePicker with Image Button example




In the below code snippet in the document ready event handler of jQuery simple datepicker has been applied to HTML input textbox txtDate. In the jQuery UI Datepicker function the below three properties have been specified.
  • showOn – The trigger type here button as we want to display Image Icon
  • buttonImageOnly – Since we want to display image icon, this property needs to be set to true
  • buttonImage - URL of the image icon

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type = "text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type = "text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel = "Stylesheet" type="text/css" /> 
<script type = "text/javascript">
    $(function () {
        $("#txtDate").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif'
        });
    });
</script>
<input type = "text" id = "txtDate" />



Related Post


Latest Post


Recent Posts Widget

Make sure to never miss a thing...

Get the latest news from the creative industry along with other creative goodies, conveniently delivered to social media.