JQuery date time picker layout format issue

Question

I am jquery for date time picker. Its working fine but , previous month or next month icon is not displying as shown in image.. but its also working when i click on the pictureless area.

I need to show the image at the corners as shown in image . please suggest where the problem is..

I downloaded from http://trentrichardson.com/examples/timepicker/

My Code :

          <link rel="stylesheet" href="css/jquery-ui.css">
   <style>
   /* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px; }
   </style>

    <script src="js/jquery-1.9.1.js"></script>
            <script src="js/1.10.3/jquery-ui.js"></script>
        <script src="js/jquery-ui-timepicker-addon.js"></script>           
            <script>

 $(function() {


    $( "#datepicker" ).datetimepicker({dateFormat: "yy-mm-dd"});
  });

  </script>

Answer 1

Chances are you forgot to include the jQuery UI image resources. Open up your browsers dev tools, go to the console, and (at least in Chrome) you should see 404 error messages about missing resources.

You should download the full jQuery UI package from here: http://jqueryui.com/download/

Note also that besides the icons, you're not seeing the gradient backgrounds on the individual dates or in the header.

Answer 2

In my case, the problem was because of wrong font Awesome classes. As I checked the .js files related to my datepicker, I found the arrows like:

<i class="icon-circle-arrow-left"></i>

and

<i class="icon-circle-arrow-right"></i>

They should be changed to:

<i class="fa fa-arrow-circle-left" aria-hidden="true"></i>

and

<i class="fa fa-arrow-circle-right" aria-hidden="true"></i>

So, just find them and replace all of them to the correct ones. Wish it works for you too.