从 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 正常显示，但输入字段不是 daterangefield。

如有任何建议，我们将不胜感激。

Answer 1

添加 html 后，您需要重新运行日期范围选择器。理想情况下，您应该向新输入添加一个 id，并且运行 daterangepicker 仅针对那个

例如

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"
    });
}

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

Daterange picker when the html is added from javascript

javascript

daterangepicker