写在前面:

  日期组件有很多,这里简单的记录下bootstrap的一个日期插件datetimepicker,使用方法比较简单,基本上看一些就会了,但是还是记录下。

  这个就不过多的说了,简单粗暴上代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>datetimpicker测试</title>
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="${baseURL}/Bootstrap/bootstrap/css/bootstrap.min.css" />
<link href="${baseURL}/Bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/jquery-1.10.2.min.js"></script>
<script src="${baseURL}/Bootstrap/bootstrap/assets/js/bootstrap.min.js"></script>
<script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script src="${baseURL}/Bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> <style type="text/css">
</style> </head>
<body>
<div style="height:500px;border: 1px solid #f79646">
<div>
<form id="header_form" method="" action="" >
&nbsp;&nbsp;&nbsp;
<label style="font-weight:normal;background-color: #fac090;width: 80px;text-align: center" >Date</label>
<input type="text" id="input_date" name="recordDate" style="border:0.5px solid #fac090"/>
</form>
</div>
</div>
</body> <script type="text/javascript"> $(function(){
$("#input_date").datetimepicker({
bootcssVer:3, //bootstrap-datetimepicker+bootstrap v3,但这个插件使用的时候,并没有和V3相匹配,仍然调用的是bootstrap V2的图标 把bootcssVer的值直接设为3,否则datetimepicker不会显示出上、下个月的箭头
format: 'yyyy-mm-dd',
minView: 'month',//设置时间选择为年月日 去掉时分秒选择
todayBtn: true, //如果此值为true 或 "linked",则在日期时间选择器组件的底部显示一个 "Today" 按钮用以选择当前日期。如果是true的话,"Today" 按钮仅仅将视图转到当天的日期,如果是"linked",当天日期将会被选中。
language: 'zh-CN',
autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器。
keyboardNavigation: true, //是否允许通过方向键改变日期。
forceParse: true, //当选择器关闭的时候,是否强制解析输入框中的值。
todayHighlight: 1 //如果为true, 高亮当前日期
}).on("click", function () {
//設置可选的最后日期為當前日期
$("#input_date").datetimepicker("setEndDate", getToday())
});
}); //獲取當前日期
function getToday(){
var today = new Date()
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var todayStr = year+"-"+month+"-"+day;
return todayStr;
}
</script>
</html>

  代码没什么好说的,大概看下就懂了,也写了很多的注释...........

Bootstrap-datetimepicker日期插件简单使用的更多相关文章

  1. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  2. bootstrap datetimepicker日期插件美化

    效果 https://segmentfault.com/img/bVbieIp?w=1029&h=461 原文链接:https://segmentfault.com/a/11900000167 ...

  3. bootstrap的日期插件datetimepicker有问题

    bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...

  4. yii2.0使用bootstrap中日期插件

    Yii2框架引用bootstrap中日期插件yii2-date-picker的方法. 使用composer安装 日期插件 php composer.phar require "2amigos ...

  5. 使用bootstrap的日期插件

    1.  需要用的js包点击下载,在项目中引入该js. <script language="JavaScript" src="${pageContext.reques ...

  6. 常见问题:bootstrap datepicker日期插件汉化

    引入简体中文js(bootstrap-datepicker.zh-CN.js),并在datepicker属性配置language为‘zh-CN’即可,示例如下: $(".form_datet ...

  7. jsp笔记----97DatePicker日期插件简单使用

    <s:form action="" theme="simple"> <s:hidden name="keyword3" v ...

  8. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  9. Bootstrap日期插件中文实现

    Bootstrap的相关JS和CSS直接跳过. <script type="text/javascript" src="static/js/jquery-1.9.1 ...

随机推荐

  1. swagger学习2

    转:http://blog.csdn.net/fansunion/article/details/51923720 写的非常好,非常详细,推荐!!!! 最常用的5个注解 @Api:修饰整个类,描述Co ...

  2. JAVASCRIPT和JSP计算闰年

    0x01:JAVASCRIPT 实现 <h1 align="left">求闰年</h1> 开始年份: <input type="text&q ...

  3. HDFS 的Trash回收站

    1)在core-site.xml文件中添加这个配置 在每个节点(不仅仅是主节点)上添加配置 core-site.xml,增加如下内容 <property> <name>fs.t ...

  4. 利用ES6的Promise.all实现至少请求多长时间

    1.背景 我们都知道ajax请求可以加个timeout,就是最多请求多少时间,如果超过这个时间直接就报错. 这个是最多请求多长时间,我现在要做的是,最少要请求多长时间,然后才能执行后续的逻辑. 比如, ...

  5. 【洛谷 P3629】 [APIO2010]巡逻 (树的直径)

    题目链接 容易发现,当加一条边时,树上会形成一个环,这个环上的每个点都是只要走一次的,也就是说我们的答案减少了这个环上点的个数,要使答案最小,即要使环上的点最多,求出直径\(L\),则答案为\(2(n ...

  6. bzoj 1012 基础线段树

    原题传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1012 今儿一天状态不好,都没怎么刷题..快下课了,刷道水题.... 裸的线段树 /*** ...

  7. 一致性hash算法小结

    把服务器的IP或者主机名作为key对2^32求余,余数一定是2^32-1,然后放到(平行映射)0~2^32次方首尾相连的环上.   理想状态下服务器会均匀分布在这个环上,当数据存储时,依然把key对2 ...

  8. elastaticsearch

    # https://elasticsearch-dsl.readthedocs.io/en/latest/ # 文档:https://es.xiaoleilu.com/054_Query_DSL/70 ...

  9. 大话Linux内核中锁机制之原子操作、自旋锁【转】

    转自:http://blog.sina.com.cn/s/blog_6d7fa49b01014q7p.html 多人会问这样的问题,Linux内核中提供了各式各样的同步锁机制到底有何作用?追根到底其实 ...

  10. Makefile 變數替換

    Makefile SUBDIRS = xxx aaa BUILDSUBDIRS = $(SUBDIRS:%=build-%) CLEANSUBDIRS = $(SUBDIRS:%=clean-%) . ...