Ggtcf

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>

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.com/ui/1.12.1/jquery-ui.js

https://code.jquery.com/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