banniere

Tag-Archives pour « responsive »

mardi 26 avril 2016 | Auteur :

Marre de devoir toujours installer des plugins supplémentaires pour rendre vos datepicker de jQuery UI responsives (compatibles avec les mobiles) ? Voici une solution peu coûteuse en code qui a le mérite de bien fonctionner avec Bootstrap.

Le principe est de simplement ajouter un DIV contenant un datepicker au format calendrier caché pour les PC mais visible pour les mobiles.

Ajouter simplement ce code à la fin de votre page :

// Rend les datepicker compatibles avec les mobiles
jQuery(function($){
  $('.hasDatepicker').each(function(i,e){
    $(e).addClass('hidden-xs').after('<div class="div-datepicker visible-xs"></div>');
    $(e).datepicker('option',{ yearRange:"-1:+3", showOn:"focus" });
    var val = $(e).val();
    $('.div-datepicker', e.parentNode).datepicker({altField:e, inline:true});
    $('.div-datepicker', e.parentNode).datepicker('setDate', val);
  });
});

Et le CSS qui va bien :

.div-datepicker .ui-datepicker {
  width: 90%;
}
.div-datepicker .ui-datepicker td span,
.div-datepicker .ui-datepicker td a {
  padding:1em;
  color:black!important;
  text-align:center;
  font-size:1.2em;
}

A noter que hidden-xs et visible-xs sont des classes issues de Bootstrap permettant de montrer/cacher les <div> selon l’affichage (xs = petit écran). Plus d’infos ici : http://getbootstrap.com/css/#responsive-utilities