Question

我有一个页面会动态插入新的html表格行。

表格上的每一行包含2个输入（左和右）。需要使用Bootstrap-datetimepicker将每两个输入链接在一起以形成范围选择器。

我创建了一个函数，它应该将datetimepicker插件挂钩到每个输入，但由于某种原因无效。

每次动态地将新行添加到DOM时，都会触发此函数。

function initilizeRangePicker(index) {

    var from = $('#NewMultipleEvent_' + index + '__StartsAt');
    var to = $('#NewMultipleEvent_' + index + '__EndsAt');

    from.datetimepicker({
        format: DateTimeFormat,
        useCurrent: false
    });

    to.datetimepicker({
        format: DateTimeFormat,
        useCurrent: false
    });

    from.on("dp.change", function (e) {
        to.data("DateTimePicker").minDate(e.date);
    });

    to.on("dp.change", function (e) {
        from.data("DateTimePicker").maxDate(e.date);
    });
}

我也尝试将该功能更改为以下

function initilizeRangePicker(index) {

    var from = $('#NewMultipleEvent_' + index + '__StartsAt');
    var to = $('#NewMultipleEvent_' + index + '__EndsAt');

    $(document).on('datetimepicker', from, function (e) {
        $(this).datetimepicker({
            format: DateTimeFormat,
            useCurrent: false
        });
    });

    $(document).on('datetimepicker', to, function (e) {
        $(this).datetimepicker({
            format: DateTimeFormat,
            useCurrent: false
        });
    });


    from.on("dp.change", function (e) {
        to.data("DateTimePicker").minDate(e.date);
    });

    to.on("dp.change", function (e) {
        from.data("DateTimePicker").maxDate(e.date);
    });
}

但它不起作用。

from和to元素确实存在并正确添加。我还通过记录以下console.log(from.length, to.length);

来验证

如何正确创建范围选择器？

Answer 1

你的代码中必定存在一些错误，因为@getanoM已经在评论

中指出了一切

＆＃13;

function initilizeRangePicker(index) {

    var from = $('#NewMultipleEvent_' + index + '__StartsAt');
    var to = $('#NewMultipleEvent_' + index + '__EndsAt');

    from.datetimepicker();
    to.datetimepicker();

    from.on("dp.change", function (e) {
        to.data("DateTimePicker").minDate(e.date);
    });

    to.on("dp.change", function (e) {
        from.data("DateTimePicker").maxDate(e.date);
    });
}

function appendRow() {
  var index = $('.row').length;
	var idFrg = 'NewMultipleEvent_' + index;
  var row = $('<div class="row"></div>');
  ["__StartsAt", "__EndsAt"].forEach(function(side) {
	  row.append('<div class="col-sm-6"><div class="form-group"><div class="input-group date" id="' + idFrg + side + '"><input type="text" class="form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div>');
  });
  $("#wrapper").append(row);
  initilizeRangePicker(index)
  
}


$(document).ready(function() {
	initilizeRangePicker(0);
});

＆＃13;

body {
  padding: 50px 15px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div class="container" id="wrapper">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='NewMultipleEvent_0__StartsAt'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date dpck' id='NewMultipleEvent_0__EndsAt'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
<button type="button" class="btn btn-default" onclick="appendRow()">Append Datepicker</button>

＆＃13;

如何为动态创建的DOM元素初始化dattimepicker插件？

1 个答案: