是否存在可在IE11运行且无需JS与Bootstrap的HTML Date Picker？

Hey there! Let's tackle this date picker problem for IE11 without JS or Bootstrap—totally doable with pure HTML and CSS, which fits your company's restrictions perfectly.

Since IE11 doesn't support the native <input type="date"> control, we’ll build a custom, unified date picker using native HTML <select> elements and basic CSS that works seamlessly in IE11.

Core Approach #

We’ll create three linked dropdowns (day/month/year) and style them to look like a single date picker component. No scripts, no external libraries—just plain, IE11-friendly code.

Full Working Code Example #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Container to wrap the dropdowns into a unified picker */
        .date-picker-container {
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 2px;
            background-color: #fff;
            font-family: Arial, sans-serif;
        }

        /* Wrapper for each dropdown to add custom arrow */
        .date-picker-select-wrapper {
            position: relative;
            display: inline-block;
            margin: 0 3px;
        }

        /* Style the dropdowns to remove default borders */
        .date-picker-select {
            border: none;
            padding: 6px 22px 6px 8px;
            font-size: 14px;
            background-color: transparent;
            cursor: pointer;
            /* Remove IE11's default dropdown arrow */
            appearance: none;
            -ms-appearance: none;
        }

        /* Add custom dropdown arrow (IE11 compatible) */
        .date-picker-select-wrapper::after {
            content: "▼";
            position: absolute;
            top: 50%;
            right: 8px;
            transform: translateY(-50%);
            pointer-events: none;
            color: #666;
            font-size: 12px;
        }

        /* Hover and focus states for better user experience */
        .date-picker-select:hover {
            background-color: #f5f5f5;
        }

        .date-picker-select:focus {
            outline: none;
            background-color: #e8f0fe;
        }
    </style>
</head>
<body>
    <div class="date-picker-container">
        <!-- Day dropdown -->
        <div class="date-picker-select-wrapper">
            <select class="date-picker-select" name="day">
                <option value="">Day</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <!-- Add all days up to 31 -->
                <option value="31">31</option>
            </select>
        </div>

        <!-- Month dropdown -->
        <div class="date-picker-select-wrapper">
            <select class="date-picker-select" name="month">
                <option value="">Month</option>
                <option value="1">Jan</option>
                <option value="2">Feb</option>
                <option value="3">Mar</option>
                <option value="4">Apr</option>
                <option value="5">May</option>
                <option value="6">Jun</option>
                <option value="7">Jul</option>
                <option value="8">Aug</option>
                <option value="9">Sep</option>
                <option value="10">Oct</option>
                <option value="11">Nov</option>
                <option value="12">Dec</option>
            </select>
        </div>

        <!-- Year dropdown -->
        <div class="date-picker-select-wrapper">
            <select class="date-picker-select" name="year">
                <option value="">Year</option>
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022">2022</option>
                <option value="2023">2023</option>
                <option value="2024">2024</option>
                <option value="2025">2025</option>
                <!-- Add more years as needed -->
            </select>
        </div>
    </div>
</body>
</html>

Key IE11 Compatibility Details #

• We use -ms-appearance: none; to remove IE11’s default dropdown arrow, then add a custom arrow with a pseudo-element that works across the browser.
• All CSS properties used are fully supported in IE11—no modern flexbox/grid tricks that might require extra prefixes.
• The native <select> element is natively supported in IE11, so you won’t run into unexpected behavior.

Customization Tips #

• Adjust font-size, padding, and border-radius values to match your company’s design system.
• Expand the year dropdown range (e.g., 1990-2030) by adding more <option> elements.
• Tweak the margin on .date-picker-select-wrapper to adjust spacing between dropdowns.

This solution is lightweight, dependency-free, and works perfectly in IE11 without any JavaScript.

内容的提问来源于stack exchange，提问作者Thollitez Turqueza