您可以查看 datepicker 的 codepen 链接。
https://codepen.io/ragi_jay/pen/NWdbJMG
HTML
<div class="tek-date-container tek-flow-modal-date-picker">
<input class="tek-input tek-date-input-box" type="date" placeholder="Date" name="startDate" id="tek_start_date" value="" />
<span class="tek-btn-date">
<div class="tek-cal-icon">
<button type="button">
<img src="data:image/svg+xml,%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.3 22' style='enable-background:new 0 0 19.3 22%3b' xml:space='preserve'%3e %3cstyle type='text/css'%3e .st0%7bfill:%235961FF%3b%7d %3c/style%3e %3cg id='Layer_2_1_'%3e %3cg id='Layer_1-2'%3e %3cpath class='st0' d='M17.2%2c2.8h-2.1V0.5c0-0.3-0.2-0.5-0.4-0.5c0%2c0%2c0%2c0-0.1%2c0h-0.3c-0.3%2c0-0.5%2c0.2-0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v2.2H5.5 V0.5C5.5%2c0.2%2c5.3%2c0%2c5.1%2c0C5%2c0%2c5%2c0%2c5%2c0H4.6C4.3%2c0%2c4.1%2c0.2%2c4.1%2c0.5v2.2h-2C1%2c2.7%2c0%2c3.7%2c0%2c4.8v15.1C0%2c21%2c0.9%2c22%2c2%2c22c0%2c0%2c0.1%2c0%2c0.1%2c0 h15.1c1.2%2c0%2c2.1-0.9%2c2.1-2.1V4.8C19.3%2c3.7%2c18.3%2c2.8%2c17.2%2c2.8z M2.1%2c4.1h15.1c0.4%2c0%2c0.7%2c0.3%2c0.7%2c0.7c0%2c0%2c0%2c0%2c0%2c0v2.1H1.4V4.8 C1.4%2c4.4%2c1.7%2c4.1%2c2.1%2c4.1C2.1%2c4.1%2c2.1%2c4.1%2c2.1%2c4.1z M17.2%2c20.6H2.1c-0.4%2c0-0.7-0.3-0.7-0.7c0%2c0%2c0%2c0%2c0%2c0V8.3h16.5V20 C17.9%2c20.4%2c17.6%2c20.6%2c17.2%2c20.6z M6.4%2c13.8H4.6c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0 h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C6.9%2c13.5%2c6.6%2c13.8%2c6.4%2c13.8z M10.5%2c13.8H8.8c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1 v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C11%2c13.6%2c10.8%2c13.8%2c10.5%2c13.8z M14.6%2c13.8 h-1.7c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1 v1.7C15.1%2c13.6%2c14.9%2c13.8%2c14.6%2c13.8z M10.5%2c17.9H8.8c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5 c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C11%2c17.7%2c10.8%2c17.9%2c10.5%2c17.9z M6.4%2c17.9H4.6c-0.3%2c0-0.5-0.2-0.5-0.4 c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7 C6.9%2c17.6%2c6.6%2c17.9%2c6.4%2c17.9z M14.6%2c17.9h-1.7c-0.3%2c0-0.5-0.2-0.5-0.4c0%2c0%2c0%2c0%2c0-0.1v-1.7c0-0.3%2c0.2-0.5%2c0.4-0.5c0%2c0%2c0%2c0%2c0.1%2c0 h1.7c0.3%2c0%2c0.5%2c0.2%2c0.5%2c0.4c0%2c0%2c0%2c0%2c0%2c0.1v1.7C15.1%2c17.7%2c14.9%2c17.9%2c14.6%2c17.9z'/%3e %3c/g%3e %3c/g%3e %3c/svg%3e" alt="calendar" class="tek-calendar-img" id="tekStartDateClick">
</button></div>
</span>
CSS
.tek-date-container {
position: relative;
float: left;
}
.tek-input {
border: 1px solid #cacaca;
padding: 3px 10px;
height: 30px;
width: 280px;
}
.tek-btn-date{
position: absolute;
top: 10px;
right: 8px;
width: 25px;
height: 25px;
background: #fff;
pointer-events: none;
}
.tek-btn-date button {
border: none;
background: transparent;
}
.tek-cal-icon{
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 100%;
border: none;
background: transparent;
}
.tek-calendar-img {
width: 20px;
}
.tek-date-input-box {
font-family: "Roboto",sans-serif !important;
border-radius: 5px;
font-size: 14px;
border: none !important;
padding: 5px;
outline: none;
font-size: 14px;
background: none;
box-shadow: none;
}
.tek-flow-modal-date-picker {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #cacaca;
border-radius: 3px;
}