1.引入js/css

<link rel="stylesheet" th:href="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css}"/>

<script th:src="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/plugin/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js}"></script>

在html中加入div和input

<div class="right-input date input-group" style="width: 100px;">

  <input type="text" class="form-control ant-input" style="float: inherit; width: 150px; height: 25px;" name="startTime" id="starttime" />

       <span class="input-group-addon" style="padding-right: 0; padding-left: 2px; padding-bottom: 0; padding-top: 5px; margin: 0; width: auto; display: inherit">

       <span class="glyphicon glyphicon-calendar" style="top: 0px;">

        </span>

  </span>

</div>

在js中初始化 bootstrap-datetimepicker

$('.date').datetimepicker({
  todayBtn : true,  //是否打开定位此时此刻的标签
  autoclose : true,  //选择时间以后是否自动关闭
  format : "yyyy-mm-dd hh:mm:ss"
}).on('changeDate', function(e){

clearInterval(se);
var btime = $('#starttime').val();
var date = new Date(btime);
var stime = new Date(date).getTime();
var etime = new Date(new Date()).getTime();
usedTime = stime- etime; //两个时间戳相差的毫秒数
if(usedTime>0){
//调用setInterval控制
se = setInterval('t_time()', 1000);
}
});

//更多的初始化设置可以在网上搜索

2.版本4.0的datetimepicker

<script th:src="@{/plugin/datetimepicker/moment-with-locales.js}"></script>
<script th:src="@{/plugin/datetimepicker/bootstrap-datetimepicker.js}"></script>

<link rel="stylesheet" th:href="@{/plugin/datetimepicker/bootstrap-datetimepicker.css}"/>

html中div和input的设置如上

js的初始化如下,4.0版本的初始化设置不一样,详情可以在js里面看

$('.date').datetimepicker({
//startDate: new Date,
showTodayButton : true,
showClear :true,
minDate: new Date(),
keepOpen: true,
widgetPositioning: {
horizontal: 'right',
vertical: 'top'
},
format : "YYYY-MM-DD hh:mm:ss"
}).bind('dp.change', function(e) { //绑定的变更方法
clearInterval(se);
var btime = $('#starttime').val();
var date = new Date(btime);
var stime = new Date(date).getTime();
var etime = new Date(new Date()).getTime();
usedTime = stime- etime; //两个时间戳相差的毫秒数
if(usedTime>0){
//调用setInterval控制
se = setInterval('t_time()', 1000);
}
});

 

bootstrap-datetimepicker的两种版本的更多相关文章

  1. 【转载】pygame安装与两种版本的Python兼容问题

    在开始学习游戏编程之前,我们先来安装下pygame和python3.2.5 参考园友: http://www.cnblogs.com/hongten/p/hongten_pygame_install. ...

  2. 日期选择器(Query+bootstrap和js两种方式)

    日期选择是在下拉列表中选择年.月.日,年显示前后的五年,12个月,日就是有30.31.29.28天的区别,随着月份的变而变 一.js方式的日期选择 (1)首先就是三个下拉列表了,点击年.月.日显示列表 ...

  3. 手把手教你如何安装Tensorflow(Windows和Linux两种版本)

    tensorflow 不支持Python2.7,最好选择下载Python3.5 现在越来越多的人工智能和机器学习以及深度学习,强化学习出现了,然后自己也对这个产生了点兴趣,特别的进行了一点点学习,就通 ...

  4. Tensorflow从0到1(一)之如何安装Tensorflow(Windows和Linux两种版本)

    现在越来越多的人工智能和机器学习以及深度学习,强化学习出现了,然后自己也对这个产生了点兴趣,特别的进行了一点点学习,就通过这篇文章来简单介绍一下,关于如何搭建Tensorflow以及如何进行使用.建议 ...

  5. [Swift]队列Queue的两种版本:(1)用类包装Queue (2)用泛型包装Queue

    队列是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表.进行插入操作的端称为队尾,进行删除操作的 ...

  6. [Swift]堆栈Stack的两种版本:(1)用类包装Stack (2)用泛型包装Stack

    堆栈是一个在计算机科学中经常使用的抽象数据类型.堆栈中的物体具有一个特性: 最后一个放入堆栈中的物体总是被最先拿出来, 这个特性通常称为后进先出(LIFO)队列. 堆栈中定义了一些操作. 两个最重要的 ...

  7. 大整数四则运算(vector与数组两种版本实现)

    每逢大整数四则运算,都会怯懦,虽是算法竞赛必会的东西,也零散的学过,简单的总结过,但不成体系的东西心里一直没底. 所以今天消耗了大量的卡路里,啃了几套模板之后终于总结成了一套自己的模板 再也不用担心大 ...

  8. MySQL之安装(linux两种版本版本安装)

    LinuxMySQL安装(Mysql5.5版本) 第一种 有安装包的安装方式 1.下载地址: http://dev.mysql.com/downloads/mysql 2.检查当前系统是否安装过mys ...

  9. [hdu 2586]lca模板题(在线+离线两种版本)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2586 在线版本: 在线方法的思路很简单,就是倍增.一遍dfs得到每个节点的父亲,以及每个点的深度.然后 ...

随机推荐

  1. ucore操作系统学习(三) ucore lab3虚拟内存管理分析

    1. ucore lab3介绍 虚拟内存介绍 在目前的硬件体系结构中,程序要想在计算机中运行,必须先加载至物理主存中.在支持多道程序运行的系统上,我们想要让包括操作系统内核在内的各种程序能并发的执行, ...

  2. Nacos快速入门

    什么是 Nacos Nacos 是阿里巴巴推出来的一个新开源项目,这是一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台. Nacos 致力于帮助您发现.配置和管理微服务.Nacos 提供 ...

  3. 自学Python可以吗?怎样从入门到大师?我写这篇文章告诉你

    前言 很多粉丝朋友问我该如何去学习爬虫.学习Python.自学能找到工作吗?等一系列的问题.今天我就来回答一下大家. 第一点 确定好方向与目标 当决定踏入这个行业那一刻起,我想每一个人都爱已经准备投身 ...

  4. Disconnected from the target VM, address: '127.0.0.1:1135', transport: 'socket'-SpringBoot启动报错

    一.问题由来 本地代码在一次打包后,再次启动项目时报了一个错误,详细的错误信息如下: 2020-10-23 15:10:26.724 [] [main] INFO o.s.c.a.Annotation ...

  5. 基于SSM框架的JavaWeb通用权限管理系统

    - - ->关注博主公众号[C you again],获取更多IT资源(IT技术文章,毕业设计.课程设计系统源码,经典游戏源码,HTML网页模板,PPT.简历模板,!!还可以投稿赚钱!!,点击查 ...

  6. Java网关服务-AIO(一)

    Java网关-AIO(一) aio:声明一个byteBuffer,异步读,读完了之后回调,相比于Future.get(),可以减少阻塞.减少线程等待,充分利用有限的线程 nio:声明一个byteBuf ...

  7. ERP应收应付的操作与设计--开源软件诞生21

    赤龙ERP应收应付讲解--第21篇 用日志记录"开源软件"的诞生 [点亮星标]----祈盼着一个鼓励 博主开源地址: 码云:https://gitee.com/redragon/r ...

  8. py基础知识(一)

    python基础知识(一) print('1','2','3',sep=',',end='.') print 函数的用法 print(value,...,sep='',end='\n') 这里的val ...

  9. CF618F Double Knapsack

    题意简化 给定两个大小为 n 的集合A,B,要求在每个集合中选出一个子集,使得两个选出来的子集元素和相等 元素范围在 1~n ,n<=1e5 题目连接 题解 考虑前缀和 令A集合的前缀和为SA, ...

  10. 使用Haproxy代理rabbitmq集群,用keepalive保证haproxy高可用

    原文地址:https://www.jianshu.com/p/440b8e1d5339 使用Haproxy代理rabbitmq集群 上一篇文章教了rabbitmq集群搭建.但是这样搭建出来的集群是3个 ...