HTML5 Input 日期选择器-程序员宅基地

文章目录

HTML5 Input DatePicker 对象

HTML5 Input DatePicker 对象

  Input Date 对象表示 HTML `<input type="datetime">` 元素。

是 HTML5 中的新对象。

访问 Input Date 对象

var x = document.getElementById("myDate");

日期（`<input type="date" />`）

最基本的日期选择器，只能从日历中选择某个日期。
在这里插入图片描述

周(`<input type="week" />`)

选择的不是一个日期了，而是周，请注意周数显示的方式。
在这里插入图片描述

月份(`<input type="month" />`)

选择的是月份，跟“date”类型比起来少了后面的日期数。
在这里插入图片描述

时间(`<input type="time" />`)

最简单的一种显示，没有日历，只能选择时间。
在这里插入图片描述

日期+时间(`<input type="datetime" />`)

既显示日期组件，又显示时间，其实就是“date”类型和“time”类型的组合（已废弃，chrome已无效，使用“datetime-local”代替）

本地日期时间(`<input type="datetime-local" />`)

代替"datetime"的存在
在这里插入图片描述

使用"datetime-local"编写日期选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>

<body>
    <label>
        <span>选择日期</span>
        <input type="datetime-local" class="measureDate" placeholder="请选择日期">
    </label>

    <script type="text/javascript">
        let date = new Date()
        let yyyy = date.getFullYear()
        let MM = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1)
        let dd = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate()
        let HH = date.getHours() < 10 ? ("0" + date.getHours()) : date.getHours()
        let mm = date.getMinutes() < 10 ? ("0" + date.getMinutes()) : date.getMinutes()

        let curDay = yyyy + '-' + MM + '-' + dd + 'T' + HH + ':' + mm;
        $('.measureDate').val(curDay)
        console.log(date)
    </script>
</body>

</html>

本文链接：https://blog.csdn.net/m0_47354578/article/details/105766023

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

PAT 乙级 1025 反转链表 (25)（25 分）_int first[100005]; // 存放第一条链表的地址-程序员宅基地

文章浏览阅读564次。1025 反转链表 (25)（25 分）给定一个常数K以及一个单链表L，请编写程序将L中每K个结点反转。例如：给定L为1→2→3→4→5→6，K为3，则输出应该为3→2→1→6→5→4；如果K为4，则输出应该为4→3→2→1→5→6，即最后不到K个元素不反转。输入格式：每个输入包含1个测试用例。每个测试用例第1行给出第1个结点的地址、结点总个数正整数N(<= 10^5^)、以及正..._int first[100005]; // 存放第一条链表的地址

linux配置静态网卡（centos 7）_centos配置静态网卡-程序员宅基地

文章浏览阅读516次。linux配置静态网卡（centos 7）centos 7 ！！！！！啊哈首先切记别看错系统别的以后发……首先呢你确认好是 ***“root”***用户省的夜长梦多怎么登陆自己百度(#.#)[root@localhost ~]# vim /etc/sysconfig/network-scripts/ifcfg-ens33这个路径呢会陪你很久记住吧是centos 7 的网卡配置文件存放位置TYPE=“Ethernet” ..._centos配置静态网卡

阿里分布式事务Seata介绍_阿里巴巴分布式事务-程序员宅基地

文章浏览阅读4.5k次。1.阿里分布式事务Seata介绍作者：屹远（陈龙），蚂蚁金服分布式事务核心研发。本文根据 8月11日 SOFA Meetup#3 广州站《分布式事务 Seata 及其三种模式详解》主题分享整理，着重分享分布式事务产生的背景、理论基础，以及 Seata 分布式事务的原理以及三种模式（AT、TCC、Saga）的分布式事务实现。本次分享的视频回顾以及 PPT 查看地址： https://tech.antfin.com/community/activities/779/review1.分布式事务产生的_阿里巴巴分布式事务

Python中yield使用方法_yield在python中的用法-程序员宅基地

文章浏览阅读6.3k次，点赞19次，收藏32次。Python中yield使用方法，最简单的解释yield可以理解为一个return操作，但是和return又有很大的区别，执行完return，当前函数就终止了，函数内部的所有数据，所占的内存空间，全部都没有了。而yield在返回数据的同时，还保存了当前的执行内容，当你再一次调用这个函数时，他会找到你在此函数中的yield关键字，然后从yield的下一句开始执行。下边上代码。对于yield，最简单的验证程序可以写成这样def num_print(): print('yield_1') y_yield在python中的用法

基于JAVA的实现的16个硬币问题-程序员宅基地

文章浏览阅读73次。1.1 题目要求版本1参考9枚硬币反面问题的模型，建立16枚硬币反面问题的模型，以及其他结构的模型。版本2参考9枚硬币反面问题的解决办法，解决16枚硬币的反面问题。源码和文档下载地址：https://www.write-bug.com/article/1857.html ..._在桌面上有一排硬币,共10枚,每一枚硬币均为正面朝上。现在要把所有的硬币翻转成反

Lintcode: 复制带随机指针的链表_带有随机指针的复杂链表复制-程序员宅基地

文章浏览阅读272次。复制带随机指针的链表描述笔记数据评测给出一个链表，每个节点包含一个额外增加的随机指针可以指向链表中的任何节点或空的节点。返回一个深拷贝的链表。您在真实的面试中是否遇到过这个题？ Yes样例挑战可否使用O(1)的空间标签哈希表链表优步 _带有随机指针的复杂链表复制

随便推点

ubuntu 卸载 python2 安装python3 opencv_ubuntu 卸载 python2 安装 python3-程序员宅基地

文章浏览阅读5.9k次。1.卸载python2.7sudo apt-get remove python2.72.卸载python2.7及其依赖sudo apt-get remove --auto-remove python2.73.消除python2.7sudo apt-get purge python2.7 or sudo apt-get purge --auto-remove python2.7安装python3：sudo apt-get install python3.8:安装open.._ubuntu 卸载 python2 安装 python3

Web基础 ( 一 ) HTML_web段落可以用-程序员宅基地

文章浏览阅读1.3k次。这些标签用于在 HTML 页面中创建块元素，通常用于在页面中创建段落、标题、列表、表格、DIV 区块等等。显示的内容, 就是开始标签与结束标签之间内容, 不用定义, 但可以通过 JavaScript 获取。可以是正整数, 也可以是百分比 , 可以修改 table , th , td。有的即显示, 又传值 : text , password , date , number。：这些标签具有行内元素的特点，但是可以设定宽高，可以和其他行内元素或块级元素在同一行上显示。_web段落可以用

请问？外包到腾讯工作是怎样一种体验？_中软国际签合同腾讯公司上班-程序员宅基地

文章浏览阅读7.9k次。被中软国际推荐到腾讯游戏部门面试，不知道外包公司员工在腾讯工作究竟是怎样的情况。最新发现，在按当地最低标准缴纳社保的前提下，公司依然没有根据当地规定的缴纳比例给员工缴纳社保，医疗保险公司缴纳比例仅为3%，养老保险仅缴纳6.5%（PS.我自己缴纳的部分比公司交的还高）。工伤保险仅缴纳0.035%，也就是几毛钱。失业保险缴纳0.28%，生育保险是唯一符合缴纳比例的（9.9元），留下感动的眼泪，没坏彻底。看评论再补充一下：觉得自己能力欠缺希望通过大厂外包学习和提升自己能力的，不要做外包，内部的学习资源._中软国际签合同腾讯公司上班