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

Question

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

我正在尝试 "sync" 带有隐藏输入的 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 值时，hour/minute/am/pm 然后它将使用时间值更新 #start_time_1_sync，例如00:00上午。

当我使用 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事件接收的参数。

尝试在 change 中使用 this:-

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，特别是时间，在更改时更新多个输入的值？

Using bootstrap-datetimepicker, specifically time, update values of multiple inputs on change?

html

jquery

bootstrap-datetimepicker