부트스트랩4 데이트피커 이벤트 가로채기 datepicker

부트스트랩4 데이트피커 datepicker 이벤트 가로채기

부트스트랩4의 데이트피커(datepicker)는 웹 개발에서 날짜를 선택하는 UI 컴포넌트로 널리 사용되고 있습니다. 데이트피커는 다양한 이벤트와 설정 옵션을 제공해 줍니다. 하지만 때로는 기본 설정과 이벤트만으로는 원하는 동작을 완전히 구현하기 어려울 수 있습니다. 그런 경우에는 플러그인의 소스 코드를 직접 수정해야 할 수도 있습니다.

기본 이벤트 사용법

기본적으로 부트스트랩4 데이트피커에서는 다음과 같이 'change' 이벤트를 사용할 수 있습니다.

$('#datetimepicker1').on('change.datetimepicker', function (e) {
    $('.timeBtn').removeClass('active');
});

이렇게 하면 데이트피커에서 날짜가 변경될 때마다 .timeBtn 클래스를 가진 엘리먼트에서 'active' 클래스가 제거됩니다.

문제 상황

하지만 이 방법에는 한 가지 문제점이 있습니다. 데이트피커의 초기 값이 없을 경우에는 'shown' 이벤트와 함께 'change' 이벤트도 발생하기 때문에 원치 않는 동작이 일어날 수 있습니다.

소스 코드 수정을 통한 해결

이 문제를 해결하기 위해 부트스트랩4 데이트피커의 소스 코드를 직접 수정할 수 있습니다. 아래는 selectDay 함수 내부에서 일어나는 로직의 일부입니다.

case "selectDay":
    var k = this._viewDate.clone();
    $('.timeBtn').removeClass('active'); // 추가된 코드
    e(a.target).is(".old") && k.subtract(1, "M");
    e(a.target).is(".new") && k.add(1, "M");
    this._setValue(
        k.date(parseInt(e(a.target).text(), 10)),
        this._getLastPickedDateIndex()
    );
    this._hasTime() ||
    this._options.keepOpen ||
    this._options.inline ||
    this.hide();
    break;

여기에서 $('.timeBtn').removeClass('active'); 코드를 추가하여 날짜를 선택할 때 .timeBtn 클래스를 가진 엘리먼트의 'active' 클래스를 제거하도록 했습니다.

이렇게 하면 데이트피커에서 날짜를 선택했을 때만 원하는 동작이 일어나고, 초기 'shown' 이벤트에서는 영향을 받지 않게 됩니다.

부트스트랩4 데이트피커는 매우 유용한 플러그인이지만, 때로는 기본 설정과 이벤트만으로는 원하는 동작을 구현하기 어렵습니다. 이럴 때에는 플러그인의 소스 코드를 직접 수정하여 문제를 해결할 수 있습니다. 그러나 소스 코드를 수정할 때는 주의가 필요하며, 가능하면 플러그인의 공식 문서를 참고하는 것이 좋습니다.

키워드: 부트스트랩4, 데이트피커, datepicker, 이벤트 가로채기, 소스 코드 수정, change 이벤트, shown 이벤트, active 클래스, Tempus Dominus, JavaScript