Question

我正在尝试使用innerHTML插入html代码，该代码将插入具有.flatpickr-date类的输入。

var html = '<input type="text" class="flatpickr-date">'

document.getElementById('id').innerHTML = html;

在一个javascript文件中，我具有以下内容，该内容适用于.flatpickr-date类，并使用“ flatpickr”插件方法：

$ (".flatpickr-date").flatpickr(

    {
        dateFormat: "d / m / Y",
        maxDate: new Date (), // 30 days from now
        "locale": "in"
    }

);

先前的代码所做的是在具有flatpickr-date类的输入中生成日历。问题是他没有出现，好像他没有在上课一样。

Answer 1

如果将来要动态创建元素，建议您创建一个可重用的方法。

function initializeFlatPicker (context) {
  $(".flatpickr-date", context || document).flatpickr({
    dateFormat: "d / m / Y",
    maxDate: new Date (), // 30 days from now
    "locale": "in"
  });
}

initializeFlatPicker();

这将与您现在进行的第一次初始化相同。然后，当您制作一个新的...

var html = '<input type="text" class="flatpickr-date">'
var parent = document.getElementById('id');

parent.innerHTML = html;

initializeFlatPicker(parent);

这将再次执行初始化，但仅用于新元素。

Answer 2

好吧，您首先需要使用js创建输入，然后启动插件。这是代码

<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.1/flatpickr.css">
</head>
    <body>
        <div id="form">
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.1/flatpickr.js"></script>
    <script>
        $(document).ready(function(){
            var html = '<input type="text" class="flatpickr-date">'
            document.getElementById('form').innerHTML = html;   
            $ (".flatpickr-date").flatpickr(
                {
                    dateFormat: "d / m / Y",
                    maxDate: new Date (), // 30 days from now
                    "locale": "in"
                }
            );          
        });
    </script>
    </body>
</html>

实时工作示例

https://codepen.io/rollrodrig/pen/KjJGyy

Answer 3

如果您坚持动态创建将包含日历的div，则可以在创建div时实例化日历插件。

例如：

var calendar={
    createCal:function(id){
        var html = '<input type="text" class="flatpickr-date">'
        document.getElementById(id).innerHTML = html;    
        this.init(id);
    },

    init:function(id){  
        $ ("#' + id  + '.flatpickr-date").flatpickr(
            {
                dateFormat: "d / m / Y",
                maxDate: new Date (), // 30 days from now
                "locale": "in"
            }
        );
    }
}

运行JS函数的类不适用于innerHTML

3 个答案: