Mettre à jour datetimepicker avec une nouvelle date

Question

J'utilise fullcalendar pour gérer mes événements et bootstrap modal pour mettre à jour mon événement. Mon problème est lorsque je clique sur un nouvel événement, il ne met pas à jour mon champ datetimepicker, il conserve l'ancienne date mais pour tout autre champ tout est mis à jour.

est le script J'utilise ici:

$(document).ready(function() { 

    $('#datetimepicker2').datetimepicker({ 
     locale: 'fr' 
    }); 

    $('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,basicDay,listWeek' 
     }, 
     defaultDate: '2017-05-12', 
     navLinks: true, // can click day/week names to navigate views 
     editable: true, 
     eventLimit: true, // allow "more" link when too many events 
     events: <?= $data_json ?>, 
     eventClick: function(calEvent, jsEvent, view) { 
      //moment.locale('fr'); 

      $('#modalTitle').html(calEvent.title); 
      $('#titre_court').val(calEvent.title); 
      tinyMCE.activeEditor.setContent(calEvent.description); 

      $('.date_plannification').empty(); 

      console.log('start >> '+calEvent.start); 
      $('.date_plannification').datetimepicker({ 
       format : "DD/MM/YYYY HH:mm", 
       date : calEvent.start 
      }); 

      $('#fullCalModal').modal(); 

     } 
    }); 
}); 

Answer 1

Vous devez utiliser la méthode date() pour définir la valeur à datetimepicker existante, alors que vous pouvez utiliser l'option defaultDate pour prérégler une valeur lors de l'initialisation d'un DateTimePicker.

Votre code pourrait être comme les suivants:

eventClick: function(calEvent, jsEvent, view) { 
    $('#modalTitle').html(calEvent.title); 
    $('#titre_court').val(calEvent.title); 
    tinyMCE.activeEditor.setContent(calEvent.description); 

    $('.date_plannification').empty(); 

    console.log('start >> '+calEvent.start); 
    $('.date_plannification').datetimepicker({ 
    format : "DD/MM/YYYY HH:mm", 
    defaultDate : calEvent.start 
    }); 

    $('#fullCalModal').modal(); 

}