I know the lack of including any Fiddle won't go down well around here, but I thought I'd bring this strange issue to your attention.
I am generating this datepicker dynamically using the code:
$('<input>')
.attr({
'type': 'text',
'id': id,
'name': id,
'placeholder': 'DDMMYYYY',
'data-inline': 'false',
'data-role': 'date'
})
.on('input', update_form) // refreshes various elements on my page after the user changes date
.date({
firstDay: 1,
dateFormat: 'ddmmyy'
})
I am making this call many times because my app requires the user to enter a date on many occasions. Unfortunately this call must be made dynamically because it isn't possible to hard-code when it is used (AJAX/JSON requests to our server determine when the date picker is required).
I have noticed that when the user has clicked the input box (which brings up the date picker) the performance of my app slows dramatically. Further clicks of the input box slows the app further until the point where it becomes unusable. It seems that it is when the datepicker is shown to the user that the performance is affected, not when the element is created using the above code.
The performance impact on desktop browsers is generally unnoticeable, however on mobile devices, such as my Lumia 1020 and iPhone 4s, it is noticeable within a couple of datepicker operations.
I tried using the following call to clear the element from the DOM, after the user has finished selecting dates to no avail:
$('.ui-datepicker').remove();
Sorry again for lack of fiddle, but any ideas?
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent