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?


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 .


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

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


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


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>

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");

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.