I just started using jQuery Datepicker and have a problem. I got the calendar icon showing but it's being shown below the input box instead of to the right. Since the calendar icon is called by the jQuery code, what option do I use to get it to display inline? Here's my relevant code. Thanks.
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "calendar_icon.gif",
buttonImageOnly: true,
buttonText: "Open calendar"
});
});
</script>
Date: <input type="text" id="datepicker" />
Since you don't mention anything about your css, I'm guessing that's where your problem is. You need to add a ui-datepicker-trigger class to your css file. This will automatically get assigned by the function so you don't need to change the input to include class="ui-datepicker-trigger". I just copy and pasted what I'm using in one of my css files. The part you need is the display: inline part but I figure you might get some use out of the whole thing.
.ui-datepicker-trigger {
display: inline;
padding:0px;
padding-left:3px;
vertical-align:baseline;
position:relative;
}
To expand on this a bit further, this would be necessary if you have some generic css behavior causing it to show up below the input box.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments