Programing

Bootstrap datepicker 선택 후 숨기기

lottogame 2020. 9. 4. 08:03
반응형

Bootstrap datepicker 선택 후 숨기기


날짜를 선택한 후 달력을 숨기려면 어떻게합니까? 사용할 수있는 특정 기능이 있습니까? 아래 내 코드 :

$('#dp1').datepicker({
    format: 'mm-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

어떤 도움을 주시면 감사하겠습니다.


이벤트 changedate()사용 하여 선택 후 datepicker('hide')숨기기 방법 과 함께 날짜가 변경된시기를 추적 할 수 있습니다 datepicker.

$('yourpickerid').on('changeDate', function(ev){
    $(this).datepicker('hide');
});

데모

최신 정보

이것은 autoclose: true. 이 버그는 최신 마스터에서 수정되었습니다. SEE COMMIT. 최신 코드 받기GitHub


누구에게나 도움이된다면 부트 스트랩 날짜 선택기의 버전 2.0은 더 이상 허용 된 답변으로 작동하지 않습니다.

내 작업 방법은 다음과 같습니다.

$('yourpickerid').datepicker({
    format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
    $(this).datepicker('hide');
});

http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate 참조


$('#input').datepicker({autoclose:true});

다음 줄에 의해 입력 요소에 대한 숨기기 이벤트를 차단하여 문제를 중지 할 수 있습니다.

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});


일반적으로 전역 적으로 달력의 동작을 재정의하려는 경우 Datepicker 함수를 편집 해보십시오 (제 예에서는 82 행이었습니다).

...에서

    this.autoclose = false;

    this.autoclose = true;

모든 캘린더 인스턴스가 동일하게 작동하기를 원했기 때문에 잘 작동했습니다.


  1. 간단히 bootstrap-datepicker.js
  2. 찾기 : var defaults = $.fn.datepicker.defaults
  3. 세트 autoclose: true

프로젝트를 저장하고 새로 고치면됩니다.


날짜 선택시 datetimepicker 닫기 (datetimepicker는 시간과 함께 날짜 표시)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
}); 

$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

완벽한 솔루션이 있습니다.

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

$('.datepicker').datepicker({
    autoclose: true
}); 

datetimepicker로 변경 하고 형식을 'DD / MM / YYYY'로 변경했습니다.

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});

적어도 내가 사용중인 버전 2.2.3 autoClose에서는 autoclose. 대소 문자가 중요합니다.


소스 코드 bootstrap-datepicker.js를 변경할 수 있습니다 . this.hide();네처럼 추가

  if (this.viewMode !== 0) {
    this.date = new Date(this.viewDate);
    this.element.trigger({
        type: 'changeDate',
        date: this.date,
        viewMode: DPGlobal.modes[this.viewMode].clsName
    });
    this.hide();//here
 }

Having problem with clock still showing even if I i wrote format: 'YYYY-MM-DD',

I hade to set pickTime: false and after change->hide I hade to focus->show

$('#VBS_RequiredDeliveryDate').datetimepicker({
  format: 'YYYY-MM-DD',
  pickTime: false
});

$('#VBS_RequiredDeliveryDate').on('change', function(){
    $('.datepicker').hide();
});

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});

For datetime picker

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});

Use this for datetimepicker, it works fine

$('#Date').data("DateTimePicker").hide();

참고URL : https://stackoverflow.com/questions/21151830/bootstrap-datepicker-hide-after-selection

반응형