I have a datepicker associated with the input field in HTML, which is working fine. On clicking the triangles it is generating this HTML:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="">
    <span class="ui-icon ui-icon-circle-triangle-e"></span>
</a>

in my .ctp (html file) i am initializing like this.

<input name="properties[date_accepted_c]" class="form-control datepicker" data-dateformat="yy-mm-dd">

Now on the other side I am creating some dynamic fields which are obviously date fields but there are no arrow icons for the date change. I am initializing it in the JS file.

$(document).ready(function() {
    $(document).on('focus', ".datepicker", function () {
        if( $(this).hasClass('hasDatepicker') === false )  {
            $(this).datepicker({
                dateFormat : 'yy-mm-dd',
                autoSize: true,
            });
        }
    });
});

Instead it is creating this HTML:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
    <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>

I have a datepicker associated with the input field in HTML, which is working fine. On clicking the triangles it is generating this HTML:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="">
    <span class="ui-icon ui-icon-circle-triangle-e"></span>
</a>

in my .ctp (html file) i am initializing like this.

<input name="properties[date_accepted_c]" class="form-control datepicker" data-dateformat="yy-mm-dd">

Now on the other side I am creating some dynamic fields which are obviously date fields but there are no arrow icons for the date change. I am initializing it in the JS file.

$(document).ready(function() {
    $(document).on('focus', ".datepicker", function () {
        if( $(this).hasClass('hasDatepicker') === false )  {
            $(this).datepicker({
                dateFormat : 'yy-mm-dd',
                autoSize: true,
            });
        }
    });
});

Instead it is creating this HTML:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
    <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>

• javascript
• jquery-ui
• jquery-ui-datepicker

• Which datepicker version are you using? – diogenesgg Commented Mar 8, 2019 at 17:26
• I tried your code and it works for me. But you've left a lot of info out - you didn't show us your initial HTML, how you initialise the first datepicker, or how you add new datepicker inputs. Also, if you check the docs, the default jQuery UI datepicker HTML looks like the second example you show, and icons work. Are your jQuery UI CSS and images OK? – Don't Panic Commented Mar 9, 2019 at 9:05
• @Don'tPanic In inital html i am not initializing it is being initilized automatcally by just putting datepicker class in html. let me add the html – tech_geek Commented Mar 11, 2019 at 13:28
• I have the same problem when I try to do it on locally. There must be some icons we need to download. Same problem happens when you download a webpage locally too. – Sol Commented Sep 19, 2019 at 21:58

4 Answers 4

I know this is an old thread but this happened to me. I'm adding the reason and how I solved it in case someone else may e up with this issue.

In stead of downloading all the pack from jquery UI I downloaded only CSS and JS files for jquery UI. But I found out images folder and images are missing. When calling from jquery CDN issue will not appear since CDN has image folder near. So you have to download image folder and change these lines in jquery ui CSS (Add images folder location).

.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
    background-image: url("images/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
    background-image: url("images/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
    background-image: url("images/ui-icons_777777_256x240.png");
}

If it's not showing the arrows, it's more likely to be a css loading problem. Inspect chrome to look for any exception.

I couldn't reproduce your error. Take a look at this jsfiddle

It successfully initialise the datepicker. If you inspect the next arrow, you can see the following html:

<a class="ui-datepicker-next ui-corner-all" data-handler="next" data-event="click" title="Next">
    <span class="ui-icon ui-icon-circle-triangle-e">Next</span>
</a>

The only way I could reproduce your error, actually, was by removing the datepicker css.

DatePicker Details:

https://code.jquery./ui/1.12.1/jquery-ui.js

https://code.jquery./ui/1.12.1/themes/base/jquery-ui.css

javascript:

$(document).on('focus', ".datepicker", function () {
  if( $(this).hasClass('hasDatepicker') === false )  {
    $(this).datepicker({
      dateFormat : 'yy-mm-dd',
      autoSize: true,
    });
  }
});

html:

<p>Date: <input type="text" class="datepicker"></p>

JQuery: 2.1.3

jQuery-ui.css and jQuery-ui.js must be included to the page. Initially, it might not be obvious, as when one wants datepicker he usually includes just datepicker.css and datepicker.jss, but those are dependant on those jquery-ui files.

The other way this can happen is if CSP is invoked with:

header("Content-Security-Policy: default-src 'self'; img-src 'self';    

and so on.

In the above case, the arrow images are not allowed to load. It is fixed by additionally accepting images from jquery:

header("Content-Security-Policy: default-src 'self'; img-src 'self' https://code.jquery.;  

and so on.