개요

Vue.js에서 Bootstrap의 TimePicker를 이용할 때의 이야기입니다.
샘플 코드는 Vue.js 전제이지만, 논의하고 있는 기능으로서는 Bootstrap 자체의 이야기입니다.

TimePicker에서 "초 숨기기"방법을 설명합니다.
이것 자체는, 속성 「 show-seconds 」를 제외하는 것으로 실현할 수 있습니다.

ref. h tps : // 보오 tst 등 p ゔ 네. 오 rg / 드 cs / 코 m 포넨 ts / 후 rm 치메 피 c r # 에나 b ぃ

문제는 TimePicker에 "임의의 입력 필드 (직접 입력하고 싶은 요청을 위해)"를 제공하는 경우입니다. 이때 TimePicker가 반환하는 값은 "초를 포함"하므로 "입력 필드에 초가 표시"되어 버립니다. 그 때의 해결 방법을 설명합니다.

※덧붙여 UI를 브라우저 의존으로 해도 상관없다면, Input 요소의 time형을 이용하는 것이 편합니다.
그쪽은 표준이 「초는 비표시(임의로 추가)」이므로.

ref. h tps : // 보오 tst 등 p ゔ 네. 오 rg / 드 cs / 코 m 포넨 ts / 후 rm 프 t
ref. htps : //로 ゔぇぺぺr. 모잖아. 오 rg / 자 / 도 cs / u b / HTML / 에멘 t / amp t / Chime

해결 방법

"TimePicker에 임의의 입력 필드를 제공한다"는
예를 들어, 다음과 같이 구현하는 경우입니다.

<div class="div-timepicker">
    <b-input-group class="mb-2">
        <b-form-input
            :id="idOfTimeInput"
            v-model="timeCurrent" 
            v-bind:state="isTimeCurrentValid" 
            type="text" 
        ></b-form-input>
        <b-input-group-append>
            <b-form-timepicker 
                v-model="timeCurrent" 
                button-only 
                right 
                locale="ja"
                :aria-controls="idOfTimeInput"
            ></b-form-timepicker>
        </b-input-group-append>
    </b-input-group>
</div>

ref. h tps : // 보오 tst 등 p ゔ 에. 오 rg / 드 cs / 코 m 포넨 ts / 후 rm 치메 피 c r # Button-on ly

이 때, b-form-timepicker 의 반환값은 「HH:MM:SS」의 형식이 됩니다.

ref. h tps : // 보오 tst 등 p ゔ 에. 오 rg / 두 cs / 코 m 포넨 ts / 후 rm - 치메 피 c r # v

이 때문에, b-form-input 의 값은 「HH:MM:SS」의 형식으로 갱신되어 버려, 「초가 표시」되어 버립니다.



이 현상은 다음 두 가지 방법으로 해결할 수 있습니다.

b-form-input 요소 측에 bind하는 변수를 따로 한다

다른 변수의 getter/setter 타이밍으로 "초 삭제"와 원래의 picker 측의 변수와의 동기화를 한다

본 샘플에서는 「 timeCurrent 」를 대신해 「 timeCurrentInput 」를 마련해, 그 getter시에 timeCurrent 로부터 취득하는 것으로 동기 해, setter시에 timeCurrent 에도 반영하는 것으로, 동기합니다.

<div class="div-timepicker">
    <b-input-group class="mb-2">
        <b-form-input
            :id="idOfTimeInput"
            v-model="timeCurrentInput" 
            v-bind:state="isTimeCurrentValid" 
            type="text" 
        ></b-form-input>
        <b-input-group-append>
            <b-form-timepicker 
                v-model="timeCurrent" 
                button-only 
                right 
                locale="ja"
                :aria-controls="idOfTimeInput"
            ></b-form-timepicker>
        </b-input-group-append>
    </b-input-group>
</div>

computed : {
    timeCurrentInput: {
        get: function () {
            return (this.timeCurrent && this.timeCurrent.length > 5) ? this.timeCurrent.substr(0,5) : this.timeCurrent;
        },
        set: function (newTime) {
            this.timeCurrent = (newTime && newTime.length == 5) ? newTime + ":00" : newTime;
        }
    },
}

이상입니다.

P.S. 정말 이런 해결 방법으로 좋은거야? 더 스마트한 방법(input 요소 측에 옵션 붙이는 것만, 라든지)이 있는 것은?