source

부트스트랩 날짜 선택기 - 월 및 연도만 해당

ittop 2023. 9. 14. 23:35
반응형

부트스트랩 날짜 선택기 - 월 및 연도만 해당

저는 부트스트랩 데이피커를 사용하고 있고 제 코드는 다음과 같습니다. 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'
    });

위의 코드는 잘 작동하지만, 제가 하려는 것은 사용자가 몇 개월과 몇 년만 선택할 수 있도록 하는 것입니다.

어떻게 하는지 알려주시겠습니까?

이거 어때:

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

참조 : 부트스트랩용 데이트피커


버전 1.2.0 이상의 경우,viewMode로 변경되었습니다.startView, 사용:

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

설명서도 참조하십시오.

1.2.0 버전에서는viewMode로 변경되었습니다.startView.

예:

$('#sandbox-container input').datepicker({
  startView: 1,
  minViewMode: 1
});

http://eternicode.github.io/bootstrap-datepicker/ ?markup=component&format=yyyy&weekStart=&startDate=&endDate=&startView=2&minViewMode=2&todayBtdayBtn=margin&language=zh-CN&orientation=auto&autoclose=on&forceParse=on#sandbox

버전 2(부트스트랩 v2와 v3을 모두 지원)를 사용하고 있으며, 이 기능은 다음과 같습니다.

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

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

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

출처: 부트스트랩 데이트피커 옵션

저는 미래 날짜에 대해 부트스트랩 캘린더를 사용하고 있습니다. 월 및 연도만 변경할 수 있도록 허용하지 않습니다.

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

추가만 해야 합니다.minViewMode: "months"당신의 데이트 픽커 기능에서.

현재 연도의 월을 보고 해당 월만 보려면 이 형식을 사용하십시오. 해당 연도의 월만 사용하면 됩니다.특정 개월 수가 표시되도록 제한할 수도 있습니다.

<input class="form-control" id="txtDateMMyyyy"  autocomplete="off" required readonly/>

<script>
('#txtDateMMyyyy').datetimepicker({
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
}).datetimepicker("setDate", new Date());
</script>

안녕하세요, 1년만 받고 싶으시면 도와드리겠습니다.

  $('.date-own').datepicker({
     minViewMode: 2,
     format: 'yyyy'
   });

전화를 걸어보는게 어때요?$('.input-group.date').datepicker("remove");select 문이 변경되면 datepicker 뷰를 설정하고 호출합니다.$('.input-group.date').datepicker("update");

언급URL : https://stackoverflow.com/questions/14974394/bootstrap-datepicker-months-and-years-only

반응형