Question

我想将输入类型=“ date”日期选择器的默认外观从箭头更改为日历图标，并使其始终可见。

Google搜索此问题很少。我碰到了以下2012年发布的帖子，该帖子说不可能，事情有所改变吗？

https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome

Answer 1

尝试以下代码：

HTML

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
        .authorizeRequests()
                  .antMatchers(HttpMethod.GET, AUTH_WHITELIST).permitAll()
                  .antMatchers("/admin").hasAuthority("ADMIN")
                  .anyRequest().authenticated()
            .and()
        .formLogin()
            .loginPage("/login")
            .permitAll()
            .and()
        .logout()
            .permitAll();
}

CSS

<div>
    <h1>PURE CSS DATE PICKER</h1>
    <label for="dateofbirth">Date Of Birth</label>
    <input type="date" name="dateofbirth" id="dateofbirth">
</div>

您还可以尝试引导日期选择器：Bootstrap Datepicker

Answer 2

基本上我要做的是将输入包装在相对定位的div中将日历图标的位置绝对放在输入之后

HTML：

<div class="date-input-wrapper">
      <input type="date" required />
      <img src="your_icon.svg">
      OR
      <i class="some-icon-font some-icon">
</div>

CSS：

input[type=date]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}

如何更改输入类型=“ date”日期选择器的外观？

2 个答案: