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

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

  • 1. 前言
    • 1.1 关于 h5 的新特性
    • 1.2 使用浏览器
  • 2. html5中日期选取器默认样式
  • 3. 自定义日期样式
    • 3.1 简单定义
    • 3.2 花式样式定义
  • 4. 改变日期格式
  • 5. 参考

1. 前言

1.1 关于 h5 的新特性

  • 可看下面的文章
    HTML5 新特性之HTML5 的输入(input)类型(h5没有vue也能实现你想要的炫酷).

    H5新特性之h5的新标签 以及 全局属性contenteditable.

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. 参考

  • html如何改变日期样式,html如何修改日期样式.

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/582621.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设计模式(4)--对象行为(6)--备忘录

1. 意图 在不破坏封装的前提下&#xff0c;捕获一个对象的内部状态&#xff0c;并在该对象之外保存这个状态。 这样以后可以将该对象恢复到原先保存的状态。 2. 三种角色 原发器(Originator)、备忘录(Memento)、负责人(Caretaker) 3. 优点 3.1 保持了封装边界。屏蔽了原发器的…

融汇贯通 —— 2023年技术与心灵的双重成长旅程

当我们站在2023年的岁末&#xff0c;回望这一年赋予我们的经历和挑战&#xff0c;心中涌动的感慨与启示像朝日初升的光芒&#xff0c;照亮脚下的路&#xff0c;亦照见心中的路。在此&#xff0c;我想分享几个方面的感悟和成长&#xff0c;愿它们能有所触动&#xff0c;成为您前…

Vue 修饰符有哪些

事件修饰符 .stop 阻止事件继续传播.prevent 阻止标签默认行为.capture 使用事件捕获模式, 即元素自身触发的事件先在此处处理&#xff0c;然后才交由内部元素进行处理.self 只当在 event.target 是当前元素自身时触发处理函数.once 事件将只会触发一次.passive 告诉浏览器你不…

ES6防抖及节流的方法

ES6提供了防抖函数和节流函数来控制函数的执行频率。 1. 防抖函数&#xff08;Debounce&#xff09;&#xff1a;在一定时间内&#xff0c;只执行最后一次触发的函数。 javascript function debounce(func, delay) { let timer; return function (...args) { clearTim…

一招搞定找不到vcruntime140_1.dll无法继续执行此代码

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中最常见的就是“找不到指定的模块”或“无法加载某某.dll文件”。而其中一个常见的问题就是vcruntime140_1.dll丢失。那么&#xff0c;vcruntime140_1.dll到底是什么&#xff1f;为什么会出现丢失的情…

免费代理IP:如何获取?有什么风险?有什么性价比高的代理IP?

您可能已经知道&#xff0c;生活中没有什么是真正免费的。代理IP虽然用于保护隐私&#xff0c;但也有非常多代理都是免费的&#xff0c;这对于不想使用付费替代方案的用户来说是一个巨大的优势。在这篇博文中&#xff0c;我们将深入研究免费代理的细节&#xff0c;并评估这把双…

【快速全面掌握 WAMPServer】04.人生初体验

网管小贾 / sysadm.cc 我们在前面的教程中为小伙伴们详细地介绍了 WampServer 的安装方法&#xff0c;相信大家对于如何安装应该已经有了一个比较完全的掌握。 在完全掌握安装方法之后&#xff0c;我们还可以更加便捷地使用我为大家提供的一键安装批处理程序来快速搞定安装部署…

java设计模式学习之【迭代器模式】

文章目录 引言迭代器模式简介定义与用途实现方式 使用场景优势与劣势在Spring框架中的应用迭代器示例代码地址 引言 想象一下&#xff0c;你在一个书店里浏览各种书籍。你可能会从头到尾查看每一本书&#xff0c;或者可能跳过一些不感兴趣的部分。在这个过程中&#xff0c;你实…

VuePress-theme-hope 搭建个人博客 2【快速上手】 —— 安装、部署 防止踩坑篇

续&#x1f446;VuePress、VuePress-theme-hope 搭建个人博客 1【快速上手】 项目常用命令 vuepress dev [dir] 会启动一个开发服务器&#xff0c;以便让你在本地开发你的 VuePress 站点。vuepress build [dir] 会将你的 VuePress 站点构建成静态文件&#xff0c;以便你进行后…

K8S 全局架构图 —— 筑梦之路

kube-apiserver&#xff1a; Kubernetes API 服务器验证并配置 API 对象的数据&#xff0c; 这些对象包括 pods、services、replicationcontrollers 等。API 服务器为 REST 操作提供服务&#xff0c;并为集群的共享状态提供前端&#xff0c; 所有其他组件都通过该前端进行交互。…

3DMAX 中的 VR 渲染器如何设置局部区域渲染?

3DMAX 中的 VR 渲染器如何设置局部渲染&#xff1f; 首先我们要得打开渲染设置&#xff0c;在3damx里按F10&#xff0c;调出渲染设置。选定渲染器为Vary渲染器&#xff1a; 设置VR的局部渲染&#xff0c;需要打开帧缓冲&#xff0c;我们在V-ary项下&#xff0c;打开帧缓冲(点击…

使用 uiautomatorviewer 获取元素的定位信息

1. 使用 adb 连接设备(真机或模拟器) 连接夜神模拟器:adb connect 127.0.0.1:62001 连接MuMu模拟器:adb connect 127.0.0.1:7555 2. 打开 uiautomatorviewer 在 android-sdk --> tools 目录,找到 uiautomatorviewer.bat,双击打开: 3. 连接指定的设备(以连接夜神…

使用cmake配置matplotlibcpp生成VS项目

https://gitee.com/feboreigns/matplotlibcpp 这篇文章需要一些cmake基础&#xff0c;python基础&#xff0c;visualstudio基础 准备环境 注意如果在VS平台使用必须要手动下载python&#xff0c;不能使用conda里面的&#xff0c;比如3.8版本&#xff0c;因为conda里面没有py…

Checkpoint 执行机制原理解析

在介绍Checkpoint的执行机制前&#xff0c;我们需要了解一下state的存储&#xff0c;因为state是Checkpoint进行持久化备份的主要角色。Checkpoint作为Flink最基础也是最关键的容错机制&#xff0c;Checkpoint快照机制很好地保证了Flink应用从异常状态恢复后的数据准确性。同时…

Zblog主题模板:ZblogitseanPage博客主题模板

zblog主题模板&#xff1a;ZblogitseanPage博客主题模板 ZblogitseanPage博客主题模板主要是以文字内容为主导&#xff0c;将页面的设计杂乱的图片和元素进行最小化或者去除&#xff0c;从而使整个页面更加简洁、清晰&#xff0c;突出信息的呈现。 下面介绍一下zblog主题模板:Z…

在Windows 10中,启用飞行模式至少有六种,总有一种适合你

在Windows 10上,你可以通过多种方式管理飞行模式,在本指南中,我将概述完成此配置的步骤。飞行模式是一种允许你通过单一选项快速禁用无线设备(如Wi-Fi、蓝牙、近场通信(NFC)、全球定位系统(GPS)和蜂窝)的功能。通常,当你在飞机上,或者你在禁止使用无线电信号的地方时…

Docker自建私人云盘系统

Docker自建私人云盘系统。 有个人云盘需求的人&#xff0c;主要需求有这几类&#xff1a; 文件同步、分享需要。 照片、视频同步需要&#xff0c;尤其是全家人都是用的同步。 影视观看需要&#xff08;分为家庭内部、家庭外部&#xff09; 搭建个人网站/博客 云端OFFICE需…

配置代理解决跨域(CORS)问题

一、跨域 &#xff1f; 我们在完成前后端分离项目时&#xff08;VueSpringBoot&#xff09;&#xff0c;有很多人会遇到跨域问题&#xff08;CORS&#xff09;。 跨域&#xff08;Cross-Origin Resource Sharing&#xff0c;CORS&#xff09;是浏览器的一项安全功能&#xff…

H5向微信小程序发送信息(小程序web-view打开H5)

引入weixin-js-sdk npm i weixin-js-sdk 页面引入 // 引入wxjsimport wx from "weixin-js-sdk"; 点击触发方法 methods: {goweap(id){console.log(wx);// H5传递数据 &#xff08;navigateBack&#xff09;wx.miniProgram.navigateBack({delta: 1});wx.min…

力扣(leetcode)第171题Excel表列序号(Python)

171.Excel表列序号 题目链接&#xff1a;171.Excel表列序号 给你一个字符串 columnTitle &#xff0c;表示 Excel 表格中的列名称。返回 该列名称对应的列序号 。 例如&#xff1a; A -> 1 B -> 2 C -> 3 … Z -> 26 AA -> 27 AB -> 28 … 示例 1: 输入: …