Bootstrap Datepicker - เดือนและปีเท่านั้น


122

ฉันใช้ bootstrap datepicker และรหัสของฉันก็เหมือนต่อไปนี้การสาธิตรหัสบน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'
    });

รหัสด้านบนใช้งานได้ดี แต่สิ่งที่ฉันพยายามทำคืออนุญาตให้ผู้ใช้เลือกเดือนและปีเท่านั้น

คุณช่วยบอกฉันได้ไหมว่าต้องทำอย่างไร


ฉันแค่ใช้กล่องเลือกสองช่อง ... มันจะสมเหตุสมผลกว่าการใช้วิดเจ็ตปฏิทินและพยายามซ่อนปฏิทินจริง

6
คุณจะยังคงใช้กล่องเลือกสองช่องแม้ว่าคุณจะมีตัวเลือกเช่นนี้jsfiddle.net/Kz2sW/1หรือไม่? :)
black_belt

คำตอบ:


272

แล้วสิ่งนี้:

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

อ้างอิงDatepicker สำหรับ Bootstrap


สำหรับเวอร์ชัน 1.2.0 และใหม่กว่าviewModeได้เปลี่ยนเป็นstartViewดังนั้นให้ใช้:

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

ยังเห็นเอกสาร


1
ขอบคุณ แต่ผมต้องเปลี่ยนด้วยformat: " mm" format: "mm-yyyy"ใช้งานได้แล้ว :)
black_belt

1
มันไม่แสดง-ระหว่างเดือนและปีถ้าคุณให้ช่องว่างก่อนmm-yyyyในformat: " mm-yyyy",คุณสามารถโปรดแก้ไขคำตอบของคุณอีกครั้งหรือไม่
black_belt

สมบูรณ์ ขอบคุณมาก.
Tigin

ฉันไม่คิดว่า viewMode เป็นตัวเลือกที่ถูกต้องตามเอกสารประกอบ แต่ตัวเลือกอื่น ๆ ช่วยให้การแสดงผลที่ต้องการทำงานได้
Prathamesh Datar

มีตัวเลือกสำหรับปิดอัตโนมัติหรือไม่?
Alauddin Ahmed


4

ฉันใช้เวอร์ชัน 2 (รองรับทั้ง bootstrap v2 และ v3) และสำหรับฉันสิ่งนี้ใช้ได้:

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

เปลี่ยนminViewเป็นminViewMode
Raghavendra N

3

สำหรับรุ่นล่าสุดbootstrap-datepicker(1.4.0 ในขณะที่เขียน) คุณต้องใช้สิ่งนี้:

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

ที่มา: Bootstrap Datepicker Options


เมื่อคลิกของเดือนใน bootstrap จะแสดงวันที่จากนั้นป้อนข้อความในรูปแบบ mm / yy
Shiva Saurabh

1

ฉันใช้ปฏิทิน bootstrap สำหรับวันที่ในอนาคตไม่อนุญาตโดยอนุญาตให้เปลี่ยนเป็นเดือนและปีเท่านั้น

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 actual, 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
ขอขอบคุณสำหรับข้อมูลโค้ดนี้ซึ่งอาจให้ความช่วยเหลือแบบ จำกัด และทันท่วงที คำอธิบายที่เหมาะสมมากจะเพิ่มมูลค่าในระยะยาวด้วยการแสดงเหตุผลนี้เป็นทางออกที่ดีในการแก้ไขปัญหาและจะทำให้มันมีประโยชน์มากขึ้นให้กับผู้อ่านในอนาคตกับอื่น ๆ คำถามที่คล้ายกัน โปรดแก้ไขคำตอบของคุณเพื่อเพิ่มคำอธิบายรวมถึงสมมติฐานที่คุณตั้งขึ้น
Ismael Padilla

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

-1

ทำไมไม่เรียก$('.input-group.date').datepicker("remove");เมื่อคำสั่ง select มีการเปลี่ยนแปลงจากนั้นตั้งค่ามุมมอง datepicker ของคุณจากนั้นเรียก$('.input-group.date').datepicker("update");

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.