Bootstrap Datepicker - Mois et années seulement


122

J'utilise bootstrap datepicker et mon code est comme suit, Démo du code sur jsfiddle

<div class="input-append date" id="datepicker" data-date="02-2012" 
     data-date-format="mm-yyyy">

 <input  type="text" readonly="readonly" name="date" >    
 <span class="add-on"><i class="icon-th"></i></span>      
</div>      


$("#datepicker").datepicker({
        viewMode: 'years',
         format: 'mm-yyyy'
    });

Le code ci-dessus fonctionne bien, mais ce que j'essaie de faire, c'est de permettre aux utilisateurs de choisir des mois et des années uniquement.

Pouvez-vous me dire comment procéder?


J'utiliserais simplement deux boîtes de sélection ... cela aurait beaucoup plus de sens que d'utiliser un widget de calendrier et d'essayer de masquer le calendrier réel.

6
Utiliseriez-vous toujours deux boîtes de sélection même si vous aviez une option comme celle-ci jsfiddle.net/Kz2sW/1 ? :)
black_belt

Réponses:


272

Que dis-tu de ça :

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});

Référence: Datepicker for Bootstrap


Pour la version 1.2.0 et plus récente, viewModea changé en startView, utilisez donc:

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
});

Consultez également la documentation .


1
Merci mais j'ai dû remplacer format: " mm"par format: "mm-yyyy".
Ça

1
Il ne montre pas -entre les mois et les années si vous gardez un espace avant mm-yyyyde format: " mm-yyyy",, pourriez - vous modifier votre réponse à nouveau?
black_belt

Parfait. Merci beaucoup.
Tigin le

Je ne pense pas que viewMode soit une option valide selon la documentation. Mais les autres options permettaient à l'affichage requis de fonctionner.
Prathamesh Datar

Existe-t-il une option pour la fermeture automatique?
Alauddin Ahmed


4

J'utilise la version 2 (prend en charge à la fois bootstrap v2 et v3) et pour moi cela fonctionne:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});

changer minViewpourminViewMode
Raghavendra N

3

Pour la dernière version bootstrap-datepicker(1.4.0 au moment de la rédaction), vous devez utiliser ceci:

$('#myDatepicker').datepicker({
    format: "mm/yyyy",
    startView: "year", 
    minViewMode: "months"
})

Source: Options du sélecteur de date Bootstrap


sur clic du mois dans le bootstrap, il affiche la date puis saisit le texte au format mm / aa
Shiva Saurabh

1

J'utilise le calendrier bootstrap pour une date future non autorisée avec autorisation de changement en mois et en année uniquement.

var j = jQuery.noConflict();
        j(function () {
            j(".datepicker").datepicker({ dateFormat: "dd-M-yy" }).val()
        });

        j(function () {
            j(".Futuredatenotallowed").datepicker({
                changeMonth: true,
                maxDate: 0,
                changeYear: true,
                dateFormat: 'dd-M-yy',
                language: "tr"
            }).on('changeDate', function (ev) {
                $(this).blur();
                $(this).datepicker('hide');
            }).val()
        });

1

Vous ne devriez avoir à ajouter que minViewMode: "months"dans votre fonction datepicker.


0

Para visualiar los meses del año actual, visualiza solo los meses, y con el formato solo toma los meses de ese año. tambien se puede confirurar para que se visualice una cierta cantidad de meses

<script>
('#txtDateMMyyyy').datetimepicker({
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
}).datetimepicker("setDate", new Date());
</script>

5
Merci pour cet extrait de code, qui pourrait fournir une aide limitée et immédiate. Une explication appropriée améliorerait considérablement sa valeur à long terme en montrant pourquoi c'est une bonne solution au problème et la rendrait plus utile aux futurs lecteurs avec d'autres questions similaires. Veuillez modifier votre réponse pour ajouter des explications, y compris les hypothèses que vous avez formulées.
Ismael Padilla le

Se agrego una pequeña descripcion de lo que hace el codigo
Marco Puenayan

-1

Pourquoi ne pas appeler le $('.input-group.date').datepicker("remove");lorsque l'instruction de sélection est modifiée, puis définir votre vue de sélection de date, puis appeler le$('.input-group.date').datepicker("update");

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.