HTML5 Input 日期选择器

最新推荐文章于 2024-06-12 21:06:43 发布

整点薯条8

最新推荐文章于 2024-06-12 21:06:43 发布

阅读量3.8w

点赞数 31

分类专栏：学习笔记文章标签： html5

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

版权

学习笔记专栏收录该内容

33 篇文章 1 订阅

订阅专栏

文章目录

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>

整点薯条8

关注

31
点赞
踩
113

收藏

觉得还不错? 一键收藏
3
评论
HTML5 Input 日期选择器

HTML5 Input DatePicker 对象Input Date 对象表示 HTML <input type="datetime"> 元素。是 HTML5 中的新对象。访问 Input Date 对象var x = document.getElementById("myDate");日期（<input type="date" />）最基本的日期选择器...
复制链接

扫一扫