Bootstrap datepicker 선택 후 숨기기


97

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

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

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


6
이것이 라이브러리의 기본 동작이 아닌 이유는 무엇입니까?
스포츠

답변:


156

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

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

데모

최신 정보

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


7
현재보기 모드가 '일'인지 추가로 확인하는 것이 좋습니다 if (ev.viewMode === 'days') {$(this).datepicker('hide');}. 월 또는 1 년을 선택한 후 datepicker를 숨기고 싶지 않기 때문에}
turan

1
autoclose가 기본적으로 false로 설정되어있는 것 같습니다 ... 잘 $(".date").datepicker({... autoclose: true, ... });작동합니다 !!!
Dani

45

누구에게나 도움이된다면 부트 스트랩 날짜 선택기의 버전 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 참조


버전 2가 있습니까? 나는 v1.6.4를 Github의 최신 릴리스로
봅니다

이벤트를 수동으로 처리하는 대신 자동 닫기 (@Salim의 답변 또는 업데이트 된 수락 된 답변 참조)를 사용하세요. 날짜가 변경 될 때 날짜 선택기를 숨기면 날짜를 입력하려고하면 원하지 않는 동작이 발생할 수 있습니다.
Lopsided aug

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

4
이것은 완벽한 대답입니다. 이것은 승인 된 답변이어야합니다.
Sarower Jahan

3

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

...에서

    this.autoclose = false;

    this.autoclose = true;

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


2
js 라이브러리의 기본 속성을 변경할 필요가 없습니다. 호출 할 때 객체의 속성으로 함수에 전달할 수 있습니다. 예 : $ ( '# dob'). datepicker ({format : 'dd / mm / yyyy', autoclose : true});
Zeeshan

3

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

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


고마워 친구! 날짜 선택 후 입력이 숨겨져 서 화가 났고 이것이 내 문제를 해결했습니다. 건배!
spacebiker

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

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


2

부트 스트랩 4에서는 "autoHide : true"를 사용합니다.

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});

좋은 답변 Ankit
Shashank Singh

1

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

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

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

0

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

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

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

이 질문에 대한 또 다른 대답은 당신과 똑같습니다. OP는 autoclose: true예제 코드 에도 이것을 가지고 있습니다.
93196.93

0

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

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

0

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


0

소스 코드 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
 }

0

내가 'YYYY-MM-DD'형식을 써도 여전히 시계가 표시되는 데 문제가 있습니다 .

설정해야 pickTime: false했고 변경-> 숨기기 후 집중- > 보이기

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

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

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

0

날짜 시간 선택기

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

0

datetimepicker에 이것을 사용하십시오.

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

0

이것이 언급 된 것을 보지 못했지만 이것이 나를 위해 해결되었습니다.

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