DatePicker date picker icon replacement

Realize the goal: realize that the calendar icon in the datepicker is replaced by an arrow similar to the selector component, and the rotation of the arrow is coupled with the expansion and collapse of the time panel .

Problems encountered:

Clicking on the calendar icon cannot control the opening and closing of the panel

The datepicker component instance is manually focused through code, and manual defocusing is not supported

There are no events available to directly control the opening and closing of the time panel

solution:

Method 1: Hide the original calendar icon with display:none and replace it with an arrow.

i {display: none;} // 日历图标隐藏
i {width: 11px; height: 7px;background: url(../../../assets/img/arrow.png) no-repeat center/100%;} // 日历图标替换成箭头

Get the dom element of the arrow in the onMounted function, and add a click listener event to the dom element.

Expected realization : Arrow rotation and time panel opening and closing change synchronously. One is arrow selection : it can be achieved by setting different rotation angles through transform = 'rotate(0deg)'. The second is the opening and closing of the time panel . The original component supports the opening of the focus panel of the input box, and the closing of the out-of-focus panel of the input box. That is to say, if the code can realize manual focus and defocus, it can control the opening and closing of the time panel.

 onMounted(() => {
    // arrowPicture为箭头的dom元素 datePickerDom为时间组件dom元素
    arrowPicture.value.addEventListener('click', () => {
        if (失焦时) {
            datePickerDom.value.focus();
            arrowPicture.value.style.transform = 'rotate(180deg)'
        } else if(聚焦时){ 
            xxxx  //此处需要手动触发时间组件的失焦事件;
            arrowPicture.value.style.transform = 'rotate(0deg)'
        }
    });
});

Since the datepicker component instance does not support manual defocusing, method 1 is not feasible, and method 2 provides an indirect manual defocusing solution.

Method 2: The disadvantage of method 1 is that the arrow is still a part of the time component, and it is still in the focused state after clicking the arrow, and the component instance does not support manual defocusing. Click on the time component in other areas of the browser to lose focus. Method 2 uses this point to provide an indirect manual focus solution.

The original calendar icon is hidden by display:none, the arrow is enabled for absolute positioning, and the time component is enabled for relative positioning.

i {display: none;} // 日历图标隐藏
.date-picker {position: relative} // 时间组件开启相对定位
.arrow-picture{position: absulute；z-index:999} // 箭头开启绝对定位

In this way, the arrow is separated from the time component , and the arrow is a part of other areas. Clicking the arrow is equivalent to clicking other areas of the browser, indirectly realizing the out-of-focus effect of the time component. Through indirect manual defocusing and focusing, the opening and closing of the time panel and the rotation of the arrow are realized.

 onMounted(() => {
    // arrowPicture为箭头的dom元素 datePickerDom为时间组件dom元素
    arrowPicture.value.addEventListener('click', () => {
        if (失焦时) {
            datePickerDom.value.focus();
            arrowPicture.value.style.transform = 'rotate(180deg)'
        } else if(聚焦时){ 
            xxxxxx  //此处无需再手动调用失焦函数，click时已经触发手动失焦事件
            arrowPicture.value.style.transform = 'rotate(0deg)'
        }
    });
});

DatePicker date picker icon replacement

Guess you like