自定义html5中日期选取器的样式

2023-12-28 23:31:57

自定义html5中日期选取器的样式

1. 前言

1.1 关于 h5 的新特性

1.2 使用浏览器

  • 说明：
    下面都是在谷歌浏览器上测试的，其他浏览器可能不一样，自己测试看

2. html5中日期选取器默认样式

  • 默认样式如下：
    <input type="date" id="myDate">
    在这里插入图片描述
    在这里插入图片描述

3. 自定义日期样式

3.1 简单定义

  • 简单修改日期样式的代码如下：
    <style>
    /* 设置 整个日期选择器 外边框的样式 + 年月日字体及日历选择器指示器的大小 */
    input[type="date"] {
        border: 3px solid #c69d9d;
        border-radius: 10px;
        padding: 8px;
        font-size: 16px;
    }

    /* 自定义 日历选择器指示器 的样式 */
    input[type="date"]::-webkit-calendar-picker-indicator { 
        /* 设置立体感的边框 */
        border: 1px solid #890404;
        background-color: #1d0909;
        border-radius: 5px;
        box-shadow: inset 0 1px #722222, 0 1px #732323;
        
        /* 设置边框里面的颜色 */
        background-image: -webkit-linear-gradient(top, green, green);

        /* 设置 日历选择器指示器 的大小，如果这里不指定就取上面设置的16px */
        font-size: 20px;
    }

</style>

      <label for="myDate">选择日期：</label>
  <input type="date" id="myDate">
  • 效果如下：
    在这里插入图片描述

3.2 花式样式定义

  • 感觉没必要，但是可以了解，效果如下：
    在这里插入图片描述
  • 完整代码如下：
    <!DOCTYPE html>
<html>
<head>
  <style>

    /* 设置 整个日期选择器 外边框的样式 以及 年月日字体的大小 */
    input[type="date"] {
        border: 3px solid #c69d9d;
        border-radius: 10px;
        padding: 8px;
        font-size: 18px;
    }

    /* 设置年月日的外边框为黑色边框 */
    input[type="date"]::-webkit-datetime-edit { 
        padding: 2px; 
        /* background: #000000;  */
        border: #1d0909 solid 2px;
        margin-right: 13px;

        /* 设置 年月日 的大小，如果这里不指定就取上面设置的18px */
        /* font-size: 20px; */
    } 

    /* 设置年月日的背景 */
    input[type="date"]::-webkit-datetime-edit-fields-wrapper { 
        background-color: #9a9595; 
        /* padding-right: 12px; */
    } 

    /* text的padding(年月日的padding) */
    input[type="date"]::-webkit-datetime-edit-text { 
        padding: 0.3em; 
        /* 年月日分隔符“/”的颜色 */
        color: #2964d3; 
        /* direction: rtl; */
        /* unicode-bidi: bidi-override; */
    } 

    /* 年的颜色 */
    input[type="date"]::-webkit-datetime-edit-year-field { 
        color: purple; 
    } 

    /* 月的颜色 */
    input[type="date"]::-webkit-datetime-edit-month-field { 
        color: blue; 
    } 

    /* 日的颜色 */
    input[type="date"]::-webkit-datetime-edit-day-field { 
        color: green; 
    } 

    /* 隐藏按钮 
       注意，-webkit-inner-spin-button只适用于Webkit浏览器，如果要实现在其他浏览器中隐藏箭头按钮，可能需要使用其他方法或属性。
    */
    /* input[type="date"]::-webkit-inner-spin-button { 
        visibility: hidden; 
    }  */

    /* 自定义 日历选择器指示器 的样式 */
    input[type="date"]::-webkit-calendar-picker-indicator { 
        /* 设置立体感的边框 */
        border: 1px solid #890404;
        background-color: #1d0909;
        border-radius: 5px;
        box-shadow: inset 0 1px #722222, 0 1px #732323;
        
        /* 设置边框里面的颜色 */
        background-image: -webkit-linear-gradient(top, green, green);

        /* 设置 日历选择器指示器 的大小，如果这里不指定就取上面设置的18px */
        /* font-size: 25px; */
    }

  </style>
</head>
<body>

  <label for="myDate">选择日期：</label>
  <input type="date" id="myDate">
 
</body>
</html>

4. 改变日期格式

  • 想实现渲染成yyyy-MM-dd的格式，但是没实现，不知道怎么在原控件中实现。
  • 也可以用一个很low的方式暂且凑合，如下：
    <body>

    <form>
        <label for="myDate">选择日期：</label>
        <input type="date" id="myDate">
        <input type="text" id="formattedDate">
    </form>

    <script>
        document.getElementById('myDate').addEventListener('input', function() {
            var inputDate = this.value;
            //   var formattedDate = inputDate.split('-').reverse().join('-');
            // document.getElementById('formattedDate').innerText = formattedDate;
            var formattedDate = inputDate.split('-').join('-');
            document.getElementById('formattedDate').value = formattedDate;
        });
    </script>

</body>
    在这里插入图片描述

5. 参考

文章来源:https://blog.csdn.net/suixinfeixiangfei/article/details/135271468
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。