面对日历图像的问题

Question

I am using Juery Datepicker when user clicked on the image next to input textbox.

I tried with the below code snippet to show button image and not sure image is not loading.

<input id="timeFrom" type="text" class="form-control" name="timeFrom">
 timeFrom.datepicker({
                 showOn: 'button',
            buttonImage: "~/Content/images/calendar.gif",
            buttonImageOnly: true 
        });

I have placed calendar image in the same path and in UI the calendar image is not showing

Can some one please let me know how to show calendar.j

Answer 1

I think the path to your buttonImage is not good, check it.

 $('#timeFrom').datepicker({ showOn: "both", buttonImage: "https://findicons.com/files/icons/99/office/128/calendar.png", buttonImageOnly: true });

 .ui-datepicker-trigger { max-width: 24px; max-height: 24px; position: relative; top: 6px; left: 6px; }

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css " /> <script src="http://code.jquery.com/jquery-2.1.3.js"></script> <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <input id="timeFrom" type="text" class="form-control" name="timeFrom">

Answer 2

I am able to see image with the change in url and I am able to see the image

 timeFrom.datepicker({
                 showOn: 'button',
            buttonImage: "../Content/images/calendar.gif",
            buttonImageOnly: true 
        });