Используя bootstrap-datetimepicker, в частности время, обновлять значения нескольких входов при изменении?

Я использую: https://eonasdan.github.io/bootstrap-datetimepicker/#inline

Я пытаюсь «синхронизировать» значение плагина 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#start_time_1sync" name="00:00 AM" />

Это работает довольно хорошо, потому что у меня есть 2 встроенных средства выбора времени, однако здесь есть кое-что, что я пытаюсь понять.

Если я использую только 1 вход, то каждый раз, когда я изменяю значение #start_time_1, часы/минуты/утра/вечера, он будет обновлять #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


html jquery bootstrap-datetimepicker
person Craig van Tonder    schedule 13.11.2015    source источник
comment
Где устанавливаются cleanInputId и cleanDate? показать больше.   -  person BenG    schedule 13.11.2015
comment
@ BG101 Спасибо, обновил. Было ошибкой копировать его и сокращать то, с чем я работаю.   -  person Craig van Tonder    schedule 13.11.2015

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку все используют одну и ту же функцию для инициализации, параметр 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");

Кроме того, стоит обратить внимание на замыкания.

person BenG    schedule 13.11.2015
comment
Теперь это имеет смысл :-) Я действительно новичок в javascript, это основы, которых, я думаю, мне все еще не хватает, поскольку это глупая ошибка, которую я совершал раньше! Присмотревшись к документам, я заметил, что var date = e.date; также работает, однако он дает полную дату, которая не соответствует формату исходного параметра формата, поэтому этот способ лучше всего, поскольку требует меньше изменений для вывода. Бесконечно благодарен! На самом деле, это большая помощь, так как я сражаюсь целую вечность -.- - person Craig van Tonder; 13.11.2015
comment
О да, вы действительно правы. В моем примере я забыл поставить перед идентификатором префикс # при запуске функции. - person Craig van Tonder; 13.11.2015