jquery datepicker not working on dynamically created html

You can simply use this.

$('body').on('focus',".date-picker", function(){
  $(this).datepicker();
});

The easiest way I found to add datepicker for dynamically added multiple input field:

    $('body').on('focus',".datepicker", function(){
        $(this).datepicker();
    });

When you write

$(document).ready(function () {
    $(".datepicker").datepicker({...});
});

This fragment is getting executed right after the page has loaded. Therefore, your dynamic datepickers are not there yet. You need to call $(aSuitableSelector).datepicker(...) on each newly-inserted element. First, use a var to hold your options:

var datePickerOptions = {
    dateFormat: 'yy/m/d',
    firstDay: 1,
    changeMonth: true,
    changeYear: true,
    // ...
}

This allows you to write

 $(document).ready(function () {
    $(".datepicker").datepicker(datePickerOptions);
 });

and to write

 // right after appending dateFrom to the document ...
 $(dateFrom).datepicker(datePickerOptions);

 //...

 // right after appending dateTo ...
 $(dateTo).datepicker(datePickerOptions);

You can also use JQuery's ability to listen to DOM changes to avoid having to apply JS magic to newly-inserted elements -- but I do not think it is worth it.