how to put the calendar icon of a datepicker inside a div or table
I would like to put the "calendar.png" icon of a datepicker inside a div, or even a table. The objective is to be able to position it wherever I want. With this I have managed to place it where I want:
.ui-datepicker-trigger { position: absolute; left: 260px; top: 200px; } but I wanted to put it in a div or a table. Only the calendar icon not the entire calendar.
$(document).ready(function() { $('#demoDate').datepicker({ showOn: "both", buttonImage: "calendar.png", buttonImageOnly: true }); });#container * { vertical-align: middle } body .fondo { /*: 100px;*/ margin-left: auto; margin-right: auto; position: absolute; } .widget { top: 50px; margin-left: auto; margin-right: auto; position: absolute; }<!DOCTYPE html> <html> <head> <title>jQuery UI Date Picker : buttonImage and buttonImageOnly </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" /> <script src="https://code.jquery.com/jquery-2.1.3.js"></script> <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <style> </style> </head> <body> <div id="container" class="widget"> <input id="demoDate" class="fondo" /> </div> </body> </html>
