Bootstrap Datepicker - Hanya Bulan dan Tahun

122

Saya menggunakan datepicker bootstrap dan kode saya seperti berikut, Demo kode di 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'
    });

Kode di atas berfungsi dengan baik, tetapi yang saya coba lakukan adalah mengizinkan pengguna memilih bulan dan tahun saja.

Bisakah Anda memberi tahu saya bagaimana melakukan itu?

sabuk hitam
sumber
Saya hanya menggunakan dua kotak pilih ... itu akan jauh lebih masuk akal daripada menggunakan widget kalender, dan mencoba menyembunyikan kalender yang sebenarnya.
6
Apakah Anda masih akan menggunakan dua kotak pilih meskipun Anda memiliki opsi seperti ini jsfiddle.net/Kz2sW/1 ? :)
black_belt

Jawaban:

272

Bagaimana dengan ini :

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

Referensi: Datepicker untuk Bootstrap


Untuk versi 1.2.0 dan yang lebih baru, viewModetelah berubah menjadi startView, jadi gunakan:

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

Lihat juga dokumentasinya .

Iswanto San
sumber
1
Terima kasih, tetapi saya harus mengganti format: " mm"dengan format: "mm-yyyy". Ini bekerja sekarang :)
black_belt
1
Ini tidak menunjukkan -antara bulan dan tahun jika Anda terus spasi sebelum mm-yyyydi format: " mm-yyyy",, bisa tolong mengedit jawaban Anda lagi?
black_belt
Sempurna. Terima kasih banyak.
Tigin
Saya tidak berpikir viewMode adalah opsi yang valid sesuai dokumentasinya. Tetapi opsi lain memungkinkan tampilan yang diperlukan berfungsi.
Prathamesh Datar
Apakah ada opsi untuk menutup otomatis?
Alauddin Ahmed
4

Saya menggunakan versi 2 (mendukung bootstrap v2 dan v3) dan bagi saya ini berfungsi:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});
Tanya
sumber
ubah minViewkeminViewMode
Raghavendra N
3

Untuk yang terbaru bootstrap-datepicker(1.4.0 pada saat penulisan), Anda perlu menggunakan ini:

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

Sumber: Opsi Bootstrap Datepicker

Sheharyar
sumber
pada klik bulan di bootstrap, itu menunjukkan tanggal dan kemudian memasukkan teks dalam format mm / yy
Shiva Saurabh
1

Saya menggunakan kalender bootstrap untuk tanggal yang akan datang tidak memungkinkan dengan memungkinkan perubahan hanya dalam bulan & tahun ..

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
sumber
1

Anda harus menambahkan hanya minViewMode: "months"dalam fungsi datepicker Anda.

Nisarg Bhavsar
sumber
0

Para visualiar los meses del año aktual, 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
sumber
5
Terima kasih atas cuplikan kode ini, yang mungkin memberikan bantuan terbatas dan langsung. Sebuah penjelasan yang tepat akan sangat meningkatkan nilai jangka panjang dengan menunjukkan mengapa ini adalah solusi yang baik untuk masalah ini dan akan membuatnya lebih bermanfaat untuk pembaca masa depan dengan lainnya, pertanyaan-pertanyaan serupa. Mohon edit jawaban Anda untuk menambahkan penjelasan, termasuk asumsi yang Anda buat.
Ismael Padilla
Deskripsi se agrego una pequeña de lo que hace el codigo
Marco Puenayan
-1

Mengapa tidak memanggil $('.input-group.date').datepicker("remove");ketika pernyataan pilih diubah kemudian setel tampilan pemilih data Anda kemudian panggil$('.input-group.date').datepicker("update");

Kiel
sumber