关于html的问题：怎样才能让文本框只能点击日历控件输入时间日期

怎样才能让文本框只能点击日历控件输入时间日期，不可以手动修改?

img

img

参考DateTimePicker控件 https://blog.csdn.net/feiyang5260/article/details/87996576

下面可以实现禁止输入，点击整个输入框，弹出日期控件，但是只兼容webkit内核浏览器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .date-check {
            position: relative;
        }

        .date-check::-webkit-calendar-picker-indicator {
            position: absolute;
            right: 0;
            padding-left: 100%;
        }
    </style>
</head>

<body>
    <input class="date-check" type="date">
</body>

</html>

也写一个cover层，宽度覆盖输入区域，留下图标区可以点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .input-date {
            position: relative;
        }
        .input-date .cover {
            width: 90px;
            height: 22px;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
    </style>
</head>
<body>
    <div class="input-date">
        <div class="cover"></div>
        <input type="date">
    </div>
</body>
</html>

element 不是有日历组件吗

就把onkeyup return 成false就可以了