Utilisation du bootstrap datepicker par étapes: année -> mois -> jour

J'utilise le sélecteur de date bootstrap pour un champ Date de naissance. Mais apparemment les utilisateurs n'utilisent pas le champ déroulant de l'année correctement.Utilisation du bootstrap datepicker par étapes: année -> mois -> jour

Ce que je voudrais faire est d'avoir une configuration par étapes, où avec 3 clics ils vont de choisir l'année, puis le mois, puis le jour. Je pense que ce serait beaucoup plus convivial. Voilà comment je vois fonctionner:

étape 1: sélectionnez l'année

Étape 2: Sélectionnez un mois

Etape 3: jour

Est-ce que quelqu'un sait si c'est possible?

Source

2017-05-14 kneidels

Quelle datepicker utilisez-vous? Pouvez-vous le lier? – VincenzoC

J'utilise actuellement l'interface utilisateur de jQuery [https://jqueryui.com/datepicker], mais je suis content d'utiliser le bootstrap aussi (photo ci-dessus) [https://eonasdan.github.io/bootstrap-datetimepicker/] – kneidels

Maintenant, je vois que la version bootstrap a quelque chose qui s'appelle «mode vue», qui, une fois réglé sur des années, semble être ce que je cherche. Merci ;-) – kneidels

S'il vous plaît vérifier ce https://eonasdan.github.io/bootstrap-datetimepicker/

vous pouvez changer de mode comme ci-dessous,

jQuery(function() { 
 
       $('#datetimepicker').datetimepicker({ 
 
       viewMode: 'years' 
 
      }); 
 
});

<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" /> 
 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
 
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class='col-sm-6'> 
 
      <div class="form-group"> 
 
       <div class='input-group date' id='datetimepicker'> 
 
        <input type='text' class="form-control" /> 
 
        <span class="input-group-addon"> 
 
         <span class="glyphicon glyphicon-calendar"></span> 
 
        </span> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script> 
 
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

Source

2017-05-17 07:45:49

Utilisation du bootstrap datepicker par étapes: année -> mois -> jour

Répondre

Questions connexes