Bootstrap Datepicker - Yalnızca Aylar ve Yıllar


122

Bootstrap datepicker kullanıyorum ve kodum aşağıdaki gibi, jsfiddle'daki kodun demosu

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

Yukarıdaki kod iyi çalışıyor, ancak yapmaya çalıştığım şey, kullanıcıların yalnızca ayları ve yılları seçmelerine izin vermek.

Lütfen bana bunu nasıl yapacağımı söyler misin?


Sadece iki seçim kutusu kullanırdım ... bir takvim widget'ı kullanmaktan ve gerçek takvimi gizlemeye çalışmaktan çok daha anlamlı olurdu.

6
Bu jsfiddle.net/Kz2sW/1 gibi bir seçeneğiniz olsa bile yine de iki seçim kutusunu kullanır mıydınız ? :)
black_belt

Yanıtlar:


272

Buna ne dersin :

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

Referans: Bootstrap için Datepicker


1.2.0 ve daha yeni sürümler için olarak viewModedeğiştirilmiştir startView, bu nedenle şunu kullanın:

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

Ayrıca belgelere bakın .


1
Teşekkürler ama değiştirmek zorunda format: " mm"olan format: "mm-yyyy". Şimdi çalışıyor :)
black_belt

1
Bu göstermiyor -önce bir boşluk tutarsanız aylar ve yıllar arasında mm-yyyyyer format: " mm-yyyy",tekrar düzenlemek cevap memnun olabilir?
black_belt

Mükemmel. Çok teşekkür ederim.
Tigin

ViewMode'un belgelere göre geçerli bir seçenek olduğunu düşünmüyorum. Ancak diğer seçenekler, gerekli ekranın çalışmasına izin verdi.
Prathamesh Datar

Otomatik kapama için herhangi bir seçenek var mı?
Alauddin Ahmed


4

Sürüm 2 kullanıyorum (hem bootstrap v2 hem de v3'ü destekliyor) ve benim için bu çalışıyor:

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

değiştirmek minViewiçinminViewMode
Raghavendra N

3

En son bootstrap-datepickersürüm için (yazarken 1.4.0), bunu kullanmanız gerekir:

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

Kaynak: Bootstrap Datepicker Seçenekleri


önyüklemede ayın tıklandığında, tarihi gösteriyor ve ardından aa / yy formatında metin giriliyor
Shiva Saurabh

1

Gelecekteki bir tarih için önyükleme takvimi kullanıyorum, yalnızca aylar ve yıl içinde değişiklik yapılmasına izin verilmiyor ..

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 gerçek, visualiza solo los meses, y con el forma 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
Sınırlı ve anında yardım sağlayabilecek bu kod parçacığı için teşekkür ederiz. Bir Doğru bir açıklama ölçüde bu soruna iyi bir çözüm olmasının nedeni göstererek uzun vadeli değerini artıracak ve diğer benzer sorularla gelecek okuyucularına daha kullanışlı bir hale getirecektir. Yaptığınız varsayımlar da dahil olmak üzere bazı açıklamalar eklemek için lütfen cevabınızı düzenleyin .
Ismael Padilla

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

-1

$('.input-group.date').datepicker("remove");Select ifadesi değiştiğinde neden çağırıp ardından tarih seçici görünümünü ayarlayıp ardından$('.input-group.date').datepicker("update");

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.