BootStrap 学习笔记 时间选择器datetimepicker

最新推荐文章于 2024-08-02 20:34:24 发布
最新推荐文章于 2024-08-02 20:34:24 发布
阅读量293 收藏
点赞数
分类专栏： bootstrap 文章标签： bootstrap css jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43589143/article/details/107811801
版权

学习自:
https://www.jianshu.com/p/ab2a16169bed

插件官网
https://www.bootcss.com/p/bootstrap-datetimepicker/#i18n

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>

<html>
<head>
  <title>Bootstrap 模板</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入 Bootstrap -->
  <link href="resources/css/bootstrap.min.css" rel="stylesheet">
  <!-- 引入时间选择器 -->
  <link href="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
</head>
<body>
<div>
<!-- data-link-field设置相关联的标签    -->
<!--  data-link-format设置相关联标签的格式  -->
    <input id="date" data-link-format="yyyymmdd" data-link-field="day">
    <input id="day">
</div>

<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="resources/js/jquery-3.5.1.min.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="resources/js/bootstrap.min.js"></script>
<!-- 时间选择器 -->
<script src="resources/js/bootstrap-datetimepicker.min.js"></script>
<script  src="resources/js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script>
  $('#date').datetimepicker({
    autoclose:true,
    format:'yyyy-mm-dd',
    startView:4,
    minView:2,
    maxView:4,
    language:"zh-CN",
    //一周从哪一天开始
    weekStart:3,
    //当天日期按钮
    todayBtn:true,
    //弹出时间框的位置
    pickerPosition:'bottom-left',
    //强制解析，如果输入不正规，会尽量解析成正确的格式
    forceParse:true
  });
//更新日期，这里会在页面加载时更新该时间
  $('#date').datetimepicker('update', "2020-01-01");
</script>
</body>
</html>

运行结果
在这里插入图片描述

拉里拉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ssm框架学习笔记
Pop_Rain的博客
03-12 1994
title: ssm框架学习笔记 date: 2018-03-21 16:49:52 updated: 2020-03-12 14:34:23 categories: spring tags: - spring 此文档记录研二学习ssm框架的知识点笔记 SSM简介 最初：jsp + servlet + jdbc 现在：springmvc + spring + mybatis 官网地址： lo...
简单使用bootstrap-datetimepicker时间选择器
01-08
Bootstrap-Datetimepicker是一款基于Bootstrap框架的时间日期选择插件，它为网页应用提供了便捷的日期和时间选择功能。在本文中，我们将详细介绍如何简单地使用这个插件。 **1. 引入CSS和JS文件** 首先，为了使用...
bootstrap-datetimepicker时间控件
dearbaba_8520的博客
06-08 581
欢迎各种吐槽。 本人小前端，学习过程中，某日遇到做时间控件的需求，于是无休止的召唤了度娘，发现看不太懂。算是为自己做个笔记，也便于菜鸟级别的看的懂。 首先，我们看看点击选择时间的时候的展示页面吧
引领未来的日期选择器 - Bootstrap-Datepicker
gitblog_00049的博客
05-09 282
引领未来的日期选择器 - Bootstrap-Datepicker 项目地址:https://gitcode.com/uxsolutions/bootstrap-datepicker Bootstrap-Datepicker 是一个优雅的，功能强大的日期选择插件，为你的网页应用提供了直观且易于使用的日期输入控件。它与流行的前端框架Bootstrap无缝集成，并且提供了一套完善的API和文档，使得开...
[Web开发]用bootstrap的日期选择器
weixin_42128001的博客
04-19 152
一个下午都在找插件怎么用，终于弄好后觉得有必要写篇笔记防止下次再浪费时间了 参考文章： （他这个并不能用 不过有些传值的方法还是可以学习下的） https://blog.csdn.net/qq_33368846/article/details/82223676 官网 https://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 1.首先引...
【JavaWeb_学习笔记】Bootstrap框架练习
eclipse_newlearner的博客
04-13 416
运用Bootstrap框架复现Bootstrap中文网首页 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE-edge"&am
Bootstrap中的datetimepicker（日期控件）用法
weixin_34273481的博客
07-03 783
在做项目的时候需要用到日期的控件，之前用的是H5的input type="date"标签，考虑到兼容性的问题换了时间控件 刚好看到了datetimepicker，学习了一下，也再次做个简单的笔记，进入正文 首先引入css <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"&gt...
bootstrap-datetimepicker 添加清除按钮(1)
m0_61067876的博客
03-16 894
但 bootstrap-datepicker 只能用来选择日期，如果我们的需求是还要选择时间，所以我们使用 bootstrap-datetimepicker ，但是 bootstrap-datetimepicker 没有清除按钮。给 bootstrap-datetimepicker 添加清除按钮使用这份 bootstrap-datetimepicker.js ， 后就可以使用 clearBtn 了。例子如下：clearBtn: true //添加清除按钮，可选值：true/false});
ElementUI学习笔记，已完结！！！
热门推荐
Calmlyx的博客
06-10 1万+
ElementUI 一.介绍ElementUI ElementUI中文网 ：https://element.eleme.cn/#/zh-CN Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。 1.设计原则 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念...
从零开始的Django框架入门到实战教程(内含实战实例) - 09 初试Ajax之任务界面（学习笔记）
如果没有躺赢的命，那就站起来奔跑，你的努力一定会对得起这一路的颠沛流离。
09-03 901
原理部分包括Ajax请求简介，实战部分围绕完成任务管理界面进行，包括Ajax请求前后端传输数据，数据库建立（关联外键 级联删除），ModelForm完成输入框样式，输入数据校验，错误信息返回，数据展示页面分页展示。
bootstrap，layui，elementui vantui的区别
weixin_50430856的博客
12-18 8593
bootsratp 使用方法 安装bootstrap 下载bootstrap https://v4.bootcss.com/docs/getting-started/download/ 引入css文件和js文件 引入css <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
09-01
- `bootstrap-datetimepicker.min.css`：样式文件，定义了时间选择器的样式。 - `bootstrap-datetimepicker.min.js`：JavaScript核心文件，提供了时间选择器的功能。 - `bootstrap-datetimepicker.zh-CN.js`：...
BootStrap表单时间选择器详解
08-30
使用BootStrap表单时间选择器需要引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.js两个文件，并且需要引入bootstrap-datetimepicker.zh-CN.js文件来支持中文环境。然后，在HTML中添加日期输入框...
bootstrap datetimepicker实现秒钟选择下拉框
01-19
bootstrap datetimepicker插件没有秒钟选择器，如果要想选择的时间精确到秒没有办法控制，虽然可以配置format:’yyyy-mm-dd hh:ii:ss’，会将秒钟添加到输入框中，但是无法控制秒钟数值，默认为当前客户端的时间的...
CSS学习 01 利用鼠标悬停制造文本隐藏效果
weixin_57266891的博客
08-02 525
以下HTML代码包含三个帖子，每个帖子都有一个剧透部分。：文本颜色恢复为初始值（通常是默认颜色）。：表示文档的根元素。定义了一个CSS变量。：背景色恢复为初始值（无背景色）。：设置行高为1.5倍的字高。：所有样式变化在0.5秒内以。（黑色），导致文本不可见。：文本颜色使用同一个变量。这些剧透部分被包含在。：背景色使用定义的变量。：当鼠标悬停在类名为。
前端的学习-CSS（弹性布局-flex）
最新发布
m0_68823256的博客
08-02 1492
CSS的定位-给父元素设置的属性
web基础之CSS
Yunzhong_jiuxiao的博客
08-02 1066
css属性
HTML,CSS,JavaScript实现——井字棋游戏
Rverdoser的博客
08-02 467
这段代码提供了一个3x3的井字棋盘，并使用CSS grid布局来创建这个棋盘。接下来，需要添加JavaScript代码来处理玩家的移动，以及判断输赢。这些逻辑会涉及事件监听、条件判断以及DOM操作。这里只提供实现井字棋游戏的核心HTML和CSS代码。具体的JavaScript逻辑（如处理玩家移动、判断胜负等）需要根据实际情况编写。// 这里添加JavaScript代码来实现游戏逻辑。
bootstrap-datetimepicker 双时间选择
07-23
### 回答1： bootstrap-datetimepicker 是一个强大的日期时间选择插件，它提供了双时间选择的功能。使用 bootstrap-datetimepicker，你可以在网页中方便地选择起始时间和结束时间。 要实现双时间选择，首先需要在 HTML 文件中引入 bootstrap-datetimepicker 的相关文件。然后，在需要显示双时间选择的输入框上添加对应的 class，比如"datetimepicker"。 接下来，在 JavaScript 中使用 $("#输入框的ID").datetimepicker() 来初始化双时间选择插件。你可以在初始化的时候设置一些参数，比如设置可选时间范围，或者指定时间格式等。 当你点击输入框时，就会弹出一个日期时间选择器。你可以使用上下箭头来选择日期和时间，也可以直接在输入框中手动输入。当你选择好起始时间和结束时间后，可以点击确定按钮来关闭选择器，并将选择的时间显示在输入框中。 双时间选择的输入框中会同时显示起始时间和结束时间，以指定时间范围。你也可以在选择器的界面上看到一个日历，以帮助你选择起始日期和结束日期。 总的来说，bootstrap-datetimepicker 是一个方便易用的日期时间选择插件，它可以帮助你实现双时间选择功能。无论是建立预约系统，还是进行时间范围查询，它都是一个非常有用的工具。 ### 回答2： bootstrap-datetimepicker是一个基于Bootstrap框架的日期时间选择器插件。它提供了一种简单易用的方式，让用户可以方便地选择日期和时间。 双时间选择指的是用户可以选择一个起始时间和一个结束时间。这种功能在一些需要时间段选择的场景中非常常见，比如航班预订、酒店预订等等。 使用bootstrap-datetimepicker实现双时间选择非常简单。首先，我们需要引入相关的库文件和样式表。然后，在HTML页面中创建两个输入框，分别用于显示起始时间和结束时间。接着，使用jQuery选择器找到这两个输入框，并调用datetimepicker()方法初始化它们。 具体的代码如下所示： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>双时间选择</title> <link rel="stylesheet" href="bootstrap.min.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="moment.min.js"></script> <script src="bootstrap-datetimepicker.min.js"></script> </head> <body> <div class="container"> <h2>双时间选择</h2> <div class="form-group"> <label for="start-time">起始时间：</label> <input type="text" class="form-control" id="start-time"> </div> <div class="form-group"> <label for="end-time">结束时间：</label> <input type="text" class="form-control" id="end-time"> </div> </div> <script> $(function() { $('#start-time').datetimepicker(); $('#end-time').datetimepicker(); }); </script> </body> </html> ``` 通过上述代码，我们可以在页面上看到两个日期时间选择框。当用户点击输入框时，会弹出一个日期时间选择器，用户可以通过它来选择日期和时间。用户选择完毕后，选择器会自动将日期时间填充到相应的输入框中。 这样，我们就实现了使用bootstrap-datetimepicker进行双时间选择的效果。当然，我们还可以根据具体需求，进一步自定义日期时间选择的样式和功能。 ### 回答3： bootstrap-datetimepicker是一个基于Bootstrap框架的日期时间选择器插件。它允许用户同时选择起始时间和结束时间。 使用bootstrap-datetimepicker双时间选择，首先需要在HTML文件中引入相关的CSS和JavaScript文件。然后，通过指定相应的class或ID来创建两个日期时间选择器。 在HTML代码中，我们可以创建两个输入框和两个按钮来分别表示起始时间和结束时间。通过为输入框添加相应的class或ID，即可初始化日期时间选择器。例如： ``` <input type="text" class="datetimepicker-start" /> <input type="text" class="datetimepicker-end" /> <script type="text/javascript"> $(function () { $('.datetimepicker-start').datetimepicker(); $('.datetimepicker-end').datetimepicker(); }); </script> ``` 上述代码中，`datetimepicker-start`和`datetimepicker-end`分别为起始时间和结束时间的class。通过调用`.datetimepicker()`函数，即可初始化日期时间选择器。 初始化后，用户即可在输入框中点击选择日期和时间。同时，可以根据需要自定义日期时间格式、起始日期、最小/最大日期等选项。 此外，bootstrap-datetimepicker还提供了一些事件，可以让我们在选择日期时间后执行相应的操作，例如更新其他页面元素的内容。 总的来说，bootstrap-datetimepicker双时间选择功能简单易用，可以满足大部分日期时间选择的需求。通过添加相应的class或ID，并调用相关函数，即可在网页中实现双时间选择功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值