jqueryperformanceoptimizationsmalot-datetimepicker

Is it possible to defer initialisation of a datepicker/datetimepicker until focus of an input?

I have a screen with a fairly large number of date/time pickers which is struggling with performance (client side) on lower power machines. I'm wondering if there is a way to defer loading of a date picker until the point at which a user focuses a text input?

I'm using this date/time picker: https://github.com/smalot/bootstrap-datetimepicker/

At present on page load I initialise the datetimepciker on every input with a class of 'datetimepicker' but this of course results in a significant DOM modification which I believe is causing lower power machines to 'freeze' which rendering the page.

UPDATE

Here's what I used in the end to resolve this issue:

$('input.datepicker').focus(function(){
    $(this).datetimepicker(pickerOptsGeneral);
    $(this).datetimepicker('show');
    $(this).on('changeDate', function(ev){
        // Do stuff
    }).on('hide', function(){
        $(this).datetimepicker('remove');
    });
});
Solution

  • You can init the datepicker when the text input has focus.

    $('input').focus(function(){
    // init datepicker
    })