Bootstrap Datepicker - Chỉ tháng và năm


122

Tôi đang sử dụng bootstrap datepicker và mã của tôi giống như sau, Bản trình diễn của mã trên 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'
    });

Đoạn mã trên đang hoạt động tốt, nhưng những gì tôi đang cố gắng làm là chỉ cho phép người dùng chọn tháng và năm.

Bạn có thể vui lòng cho tôi biết làm thế nào để làm điều đó?


Tôi chỉ sử dụng hai hộp chọn ... nó sẽ có ý nghĩa hơn nhiều so với việc sử dụng tiện ích lịch và cố gắng ẩn lịch thực.

6
Bạn có vẫn sử dụng hai hộp chọn ngay cả khi bạn có tùy chọn như jsfiddle.net/Kz2sW/1 này không? :)
black_belt

Câu trả lời:


272

Còn cái này thì sao :

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

Tham khảo: Datepicker cho Bootstrap


Đối với phiên bản 1.2.0 và mới hơn, viewModeđã thay đổi thành startView, vì vậy hãy sử dụng:

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

Cũng xem tài liệu .


1
Cảm ơn nhưng tôi đã phải thay thế format: " mm"bằng format: "mm-yyyy". Nó hiện đang hoạt động :)
black_belt

1
Nó không hiển thị -giữa tháng và năm nếu bạn giữ một không gian trước khi mm-yyyyvào format: " mm-yyyy",, bạn có thể hài lòng chỉnh sửa câu trả lời của bạn một lần nữa?
black_belt

Hoàn hảo. Cảm ơn rât nhiều.
Tigin

Tôi không nghĩ rằng viewMode là một tùy chọn hợp lệ theo tài liệu. Nhưng các tùy chọn khác cho phép màn hình được yêu cầu hoạt động.
Prathamesh Datar

Có tùy chọn nào cho tự động đóng không?
Alauddin Ahmed


4

Tôi đang sử dụng phiên bản 2 (hỗ trợ cả bootstrap v2 và v3) và đối với tôi, điều này hoạt động:

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

đổi minViewthànhminViewMode
Raghavendra N

3

Đối với phiên bản mới nhất bootstrap-datepicker(1.4.0 tại thời điểm viết bài), bạn cần sử dụng điều này:

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

Nguồn: Bootstrap Datepicker Options


trên nhấp chuột của tháng trong bootstrap, nó được hiển thị ngày và sau đó nhập văn bản bằng mm / yy định dạng
Shiva Saurabh

1

Tôi đang sử dụng lịch bootstrap cho ngày trong tương lai không được phép với chỉ cho phép thay đổi theo tháng và năm ..

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

1

Bạn chỉ nên thêm minViewMode: "months"vào chức năng chọn ngày của mình.


0

Para visualiar los meses del año thực tế, 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
Cảm ơn bạn vì đoạn mã này, đoạn mã này có thể cung cấp một số trợ giúp hạn chế, tức thì. Một lời giải thích phù hợp sẽ cải thiện đáng kể giá trị lâu dài của nó bằng cách chỉ ra lý do tại sao đây là một giải pháp tốt cho vấn đề và sẽ hữu ích hơn cho những độc giả trong tương lai với những câu hỏi tương tự khác. Vui lòng chỉnh sửa câu trả lời của bạn để thêm một số giải thích, bao gồm cả những giả định bạn đã đưa ra.
Ismael Padilla

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

-1

Tại sao không gọi $('.input-group.date').datepicker("remove");khi câu lệnh select được thay đổi, sau đó đặt chế độ xem datepicker của bạn rồi gọi$('.input-group.date').datepicker("update");

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.