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?

ceinture noire
la source
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 .

Iswanto San
la source
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"
});
Tanya
la source
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

Sheharyar
la source
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()
        });
vishal kumar Saxena
la source
1

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

Nisarg Bhavsar
la source
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>
Marco Puenayan
la source
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");

Kiel
la source