从javascript添加html时的日期选择器

Question

我正在使用daterangepicker（http://www.daterangepicker.com/），当我将它应用于'.dates'时工作正常。

<input class="ff-text dates" type="text">

以下用于将所有日期类设为daterangepicker。

$('.dates').daterangepicker({
  "startDate": "02/15/2019",
  "endDate": "02/21/2019"
});

通过javascript添加HTML时会出现问题。

<input class='ff-text dates' type='text'>

按下按钮时会添加HTML，HTML会按原样显示，但输入字段不是日期范围。

任何建议将不胜感激。

Answer 1

添加html时需要重新运行daterangepicker。理想情况下，您应该为新输入添加一个id，并对此运行daterangepicker

EG

var someCounterForYourInputs = 0;
functionThatAddsYourHTML() {
    someCounterForYourInputs++;
    $('wherever-youre-adding').append($('<input id="sweet_dates_'+someCounterForYourInputs+'" class="ff-text dates" type="text"/>'));
    $('#sweet_dates_'+someCounterForYourInputs).daterangepicker({
        "startDate": "02/15/2019",
        "endDate": "02/21/2019"
    });
}

或者，不需要柜台：

functionThatAddsYourHTML() {
    var newInput = $('<input class="ff-text dates" type="text"/>');
    $('wherever-youre-adding').append(newInput);
    newInput.daterangepicker({
        "startDate": "02/15/2019",
        "endDate": "02/21/2019"
    });
}