Bootstrap Datepicker - tylko miesiące i lata


122

Używam bootstrap datepicker, a mój kod jest podobny do następującego, Demo kodu na 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'
    });

Powyższy kod działa dobrze, ale próbuję pozwolić użytkownikom wybierać tylko miesiące i lata.

Czy mógłbyś mi powiedzieć, jak to zrobić?


Po prostu użyłbym dwóch pól wyboru ... miałoby to o wiele większy sens niż użycie widżetu kalendarza i próba ukrycia rzeczywistego kalendarza.

6
Czy nadal używałbyś dwóch pól wyboru, nawet gdybyś miał opcję taką jak ta jsfiddle.net/Kz2sW/1 ? :)
black_belt

Odpowiedzi:


272

Co powiesz na to :

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

Odniesienie: Datepicker for Bootstrap


Dla wersji 1.2.0 i nowszych viewModezmienił się na startView, więc użyj:

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

Zobacz także dokumentację .


1
Dzięki ale musiałem wymienić format: " mm"z format: "mm-yyyy".
Działa

1
To nie pokazują -między miesiącach i latach, jeśli trzymać spację przed mm-yyyyw format: " mm-yyyy",, można ponownie Edytuj odpowiedź?
black_belt

Idealny. Dziękuję Ci bardzo.
Tigin,

Nie sądzę, aby ViewMode był prawidłową opcją zgodnie z dokumentacją. Ale inne opcje pozwalały na działanie wymaganego wyświetlacza.
Prathamesh Datar

Czy istnieje opcja automatycznego zamykania?
Alauddin Ahmed


4

Używam wersji 2 (obsługuje zarówno bootstrap v2, jak i v3) i dla mnie to działa:

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

zmiana minViewnaminViewMode
Raghavendra N

3

Aby uzyskać najnowszą bootstrap-datepickerwersję (1.4.0 w momencie pisania), musisz użyć tego:

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

Źródło: Bootstrap Datepicker Options


po kliknięciu miesiąca w bootstrapie pokazuje datę, a następnie wpisuje tekst w formacie mm / rr
Shiva Saurabh

1

Używam kalendarza bootstrap dla przyszłej daty, nie zezwalam na zmianę tylko w miesiącach i roku.

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()
        });


0

Para visualiar los meses del año real, visualiza solo los meses, y con el formato solo toma los meses de ese año. tambien se puede confirmurar 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
Dziękujemy za ten fragment kodu, który może zapewnić ograniczoną, natychmiastową pomoc. Właściwe wyjaśnienie byłoby znacznie poprawić swoją długoterminową wartość pokazując dlaczego jest to dobre rozwiązanie problemu i byłoby bardziej użyteczne dla czytelników przyszłości z innymi, podobnymi pytaniami. Proszę edytować swoją odpowiedź dodać kilka wyjaśnień, w tym założeń już wykonanych.
Ismael Padilla

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

-1

Dlaczego nie wywołać metody, $('.input-group.date').datepicker("remove");gdy instrukcja select zostanie zmieniona, a następnie ustawić widok Datepicker, a następnie wywołać$('.input-group.date').datepicker("update");

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.