Partage
  • Partager sur Facebook
  • Partager sur Twitter

bootstrap datePicker - en français

    14 avril 2017 à 22:39:20

    Bonjour,

    j'utilise Bootstrap datepicker afin d'afficher un calendrier dans ma page:

    l'inclusion:

    <!-- Bootstrap Date-Picker Plugin -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

    le HTML:

    <input class="form-control" id="dateDebut" name="dateDebut" placeholder="Date de début" type="text"/>

    et le JS:

    <script>
        $(document).ready(function(){
          var date_input=$('input[name="dateDebut"]'); //our date input has the name "date"
          var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
          var options={
        	format: 'yyyy/mm/dd',
            container: container,
            todayHighlight: true,
            autoclose: true,
          };
          date_input.datepicker(options);
        })
    </script>

    J'ai tenté, par plusieurs moyen, de le mettre en français, mais cela ne fonctionne pas, est-ce que qlq pourrait m'aider?

    J'aimerais également que le 1er jour de la semaine soit le lundi et non le dimanche :)

    J'ai inclus également:

    <script type="text/javascript" src="datePicker/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="datePicker/moment/min/moment-with-locales.min.js"></script>


    Mais cela ne change rien...

    Merci d'avance !!




    • Partager sur Facebook
    • Partager sur Twitter
      19 avril 2017 à 15:11:20

      Bonjour g3k0,

      Je suis dans la même situation que toi, j'ai été cherché du coté d'un fichier "datepicker-fr.js" trouvable sur le gitHub de bootstrap-datepicker.
      pour l'instant ca ne veut pas, je reviendrais une fois la solution trouvée.

      Néanmoins  pour le commencement au lundi, tu ajoute dans tes options : weekStart

      var options={
              format: 'dd/mm/yyyy',
              container: container,
              todayHighlight: true,
              autoclose: true,
      	weekStart: 1,
      	orientation: "top"
      
            };



      • Partager sur Facebook
      • Partager sur Twitter
        19 avril 2017 à 15:14:13

        Salut,

        Ca ne répond pas vraiment à votre question mais pourquoi ne pas utiliser un input html5 ?

        https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_date



        • Partager sur Facebook
        • Partager sur Twitter
          19 avril 2017 à 17:03:05

          Salut ! 

          Pour mettre le tout en français perso j'ai fais un copier-coller du fichier :

          https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.js

          Ensuite vers la ligne 1528 tu devrais trouver un tableau 'dates'. Il te suffit ensuite de changer les valeurs du tableau en anglais par les valeurs en français.

          Ce n'est pas extrêmement propre mais ça fonctionne ! ;)

          Par contre perso ça ne fonctionne pas  le weekStart: 1,


          EDIT : Au final ça fonctionne le weekStart, petite faute d’inattention qui m'a coûté 1h xD 

          -
          Edité par KholdG 19 avril 2017 à 17:17:36

          • Partager sur Facebook
          • Partager sur Twitter
            19 avril 2017 à 17:46:29

            <!DOCTYPE html>
            <html>
            
              <head>
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
                
              </head>
            
              <body>
                
                <input type="text" class="form-control datepicker" value="14/09/1989">
                
            
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
                <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
                
                <script src="bootstrap-datepicker.fr.min.js"></script>
                <!--
                  @ https://github.com/uxsolutions/bootstrap-datepicker/blob/master/dist/locales/bootstrap-datepicker.fr.min.js
                  !function(a){a.fn.datepicker.dates.fr={days:["dimanche","lundi","mardi","mercredi","jeudi","vendredi","samedi"],daysShort:["dim.","lun.","mar.","mer.","jeu.","ven.","sam."],daysMin:["d","l","ma","me","j","v","s"],months:["janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","décembre"],monthsShort:["janv.","févr.","mars","avril","mai","juin","juil.","août","sept.","oct.","nov.","déc."],today:"Aujourd'hui",monthsTitle:"Mois",clear:"Effacer",weekStart:1,format:"dd/mm/yyyy"}}(jQuery);
                --> 
                <script>
                  $('.datepicker').datepicker({
                    language: 'fr'
                  })
                </script>
               
                
              </body>
            
            </html>
            
            Voila comment faire :)

            -
            Edité par GannoN 19 avril 2017 à 17:47:26

            • Partager sur Facebook
            • Partager sur Twitter

            bootstrap datePicker - en français

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown