javascript - 在 Firefox 和 Edge 上隐藏默认日期输入菜单

Question

我正在使用 Vuejs 使用 i 开发自定义日期选择器组件<input type="text">。我想使用自定义日期选择器菜单，所以我必须隐藏或禁用默认菜单，例如：

如何使用 CSS 或 JS 做到这一点？

标签： javascripthtmlcssfirefoxdatepicker

Answer 1

我没有找到在每个浏览器中隐藏默认选择器的方法，尤其是对于 Edge（不是基于 chromium 的版本），似乎没有办法隐藏它。

为了在 Chrome 和 Firefox 上隐藏选择器，我只是重写了onclick输入方法：

onClick (e) {
    e.preventDefault() // Prevent the default picker from showing up
    showPicker(this) // Show the custom picker
}

如果用户使用 Edge，我只需禁用自定义选择器并使用默认选择器。我使用bowser来检测当前浏览器：

const Bowser = require("bowser");
const browser = Bowser.getParser(window.navigator.userAgent);
const isEdge = browser.satisfies({ 'microsoft edge': '>0' });