Question

我正在使用：https://eonasdan.github.io/bootstrap-datetimepicker/#inline

我正在努力＆＃34;同步＆＃34;具有隐藏输入的bootstrap-datetimepicker插件的值。

<script>
// Initialise the time pickers, on load update the start_time_x_sync values
function initialiseTimePicker(pickerId) {
  // Initialise time pickers
  $(pickerId).datetimepicker({
    format:'hh:mm A',
    inline: true
  }).on('dp.change', function(e) {
    // Grab the time value
    var date = $(pickerId).data('date');
    // Populate the hidden inputs for php to process them
    var syncId = pickerId+'_sync';
    $(syncId).val(date);
  });
};
// Run it
$(function() {
  initialiseTimePicker("start_time_1");
  initialiseTimePicker("start_time_2");
};
</script>

<label for="start_time_1">START TIME 1</label><br/>
<div id="start_time_1"></div>
<input type="hidden" id="start_time_1_sync" name="00:00 AM" />

<label for="start_time_2">START TIME 2</label><br/>
<div id="start_time_2"></div>
<input type="hidden" id="start_time_2_sync" name="00:00 AM" />

这很好用，因为我有2个内联时间选择器，但是我有一些事情需要在这里理解。

如果我只使用1个输入，则每次更改#start_time_1值，小时/分钟/上午/下午时，它将使用时间值更新#start_time_1_sync，例如00:00 AM。

当我使用2个输入并且我尝试更改#start_time_1值时，在#start_time_1_sync中它显示#start_time_2的值并且似乎卡住了，因为它在此之后永远不会改变。但是，如果此时我更改了#start_time_2的值，则#start_time_2_sync每次按预期进行更改时都会获得#start_time_2的更新值。

因此，在这个例子中，如果只有一个，它适用于1，但如果有2，它只适用于第二个。如果有三个则只适用于第三个。

如何在不丢失头发的情况下让他们全部工作？提前谢谢！

编辑：

以下是dp.change的文档：https://eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange

Answer 1

由于所有人都使用相同的函数进行初始化，因此最后传递的参数pickerId将是所有change事件将接收的参数。

尝试在this中使用change： -

function initialiseTimePicker(pickerId) {
  // Initialise time pickers
  $(pickerId).datetimepicker({
    format:'hh:mm A',
    inline: true
  }).on('dp.change', function(e) {
    // Grab the time value
    var date = $(this).data('date');
    // Populate the hidden inputs for php to process them
    var syncId = '#' + this.id +'_sync';
    $(syncId).val(date);
  });
};

我假设你应该在参数中使用#？

initialiseTimePicker("#start_time_1");
initialiseTimePicker("#start_time_2");

此外，值得研究闭包。

使用bootstrap-datetimepicker，特别是时间，更新多个输入的值？

1 个答案: