DateTimePicker & FancySelect

Amstramgram
Javascript

Hello,

je ne sais pas si je vais avoir beaucoup de réponse car c'est un peu un cas particulié.
J'utilise :

  • timepicker un addon pour ajouter l'heure au datepicker classique de jQuery UI
  • FancySelect qui permet d'appliquer un style aux selects.

Le probléme : lorsque je selectionne une heure avec les selects stylé avec fancyselect, les "selects" n'actualisent pas les vrais selects de datetimepicker et du coup le onSelect de datetimepicker n'est pas activé et tout ce que je fais dans ce onSelect n'est pas pris en compte.

Par contre quan je clic sur le bouton "Now" tout fonctionnne correctement car datetimepicker fait ce qu'il doit faire et active les bonnes fonctions.

Enfin bref, je vous laisse un lien pour voir le problème.
LE LIEN

Merci, des bisous

2 réponses

betaWeb

Salut,

Il nous faudrait un peu de code pour pouvoir t'aider ;)

Amstramgram
Auteur

Ah oui effectivement :)
Le js

$('#theCalendar').datetimepicker({
  controlType: 'select',
    timeFormat: 'HH:mm:ss',
  dateFormat: "DD dd M",
  maxDate: new Date(),
  firstDay: 1,
  showOtherMonths: false,
  dayNamesMin: ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam'],
  dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
  monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avr.', 'Mai', 'Juin', 'Juill.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
  prevText: '<i class="icon-arrow-left"></i>',
  nextText: '<i class="icon-arrow-right"></i>',
  onSelect: function(dateText, inst){
    var datetext, timetext;
    if(inst["id"] == "theCalendar"){
      datetext = inst.settings.timepicker.formattedDate;
      timetext = (inst.settings.timepicker.formattedTime);
    }else{
      datetext = inst.formattedDate;
      timetext = (inst.formattedTime);
    }
    timetext = timetext.slice(0, -3);
    var timestamp = $(this).datetimepicker("getDate").getTime() / 1000;
    $('#theTextDate').val(timetext+', '+datetext);
    $('#theTimestampDate').val(timestamp);

    setTimeout(function(){
      $('.select-basic').fancySelect();
    }, 10);
  }

});

$(document).ready(function(){
  $('.select-basic').fancySelect();
});