Bootstrap Datepicker-월 및 연도 만


122

부트 스트랩 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 2013

답변:


272

이건 어때요 :

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

참조 : 부트 스트랩 용 Datepicker


버전 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 2013

완전한. 대단히 감사합니다.
Tigin

viewMode가 문서에 따라 유효한 옵션이라고 생각하지 않습니다. 그러나 다른 옵션은 필요한 디스플레이가 작동하도록 허용했습니다.
Prathamesh Datar

자동 닫기 옵션이 있습니까?
Alauddin Ahmed


4

저는 버전 2 (부트 스트랩 v2와 v3 모두 지원)를 사용하고 있으며 저에게는 다음과 같이 작동합니다.

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

변경 minViewminViewMode
Raghavendra N

3

최신 버전 bootstrap-datepicker(작성 당시 1.4.0)의 경우 다음을 사용해야합니다.

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

출처 : Bootstrap Datepicker 옵션


부트 스트랩에서 월을 클릭하면 날짜를 표시 한 다음 mm / yy 형식으로 텍스트를 입력합니다
Shiva Saurabh

1

나는 미래의 날짜에 대한 부트 스트랩 캘린더를 사용하고 있으며 월 및 연도 만 변경할 수 없습니다.

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 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
제한적이고 즉각적인 도움을 제공 할 수있는이 코드 스 니펫에 감사드립니다. 적절한 설명은 크게이 문제에 대한 좋은 해결책이 왜 보여 장기적인 가치를 향상 것이고, 다른 유사한 질문을 미래의 독자들에게 더 유용 할 것입니다. 제발 편집 당신이 만든 가정 등 일부 설명을 추가 할 답변을.
Ismael Padilla

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

-1

왜 전화하지 $('.input-group.date').datepicker("remove");select 문은 다음 날짜 선택기보기 다음 전화 설정을 변경하면$('.input-group.date').datepicker("update");

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.