boostrap时间控件

1:引入相应的css和js

css:

<link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="<%=path%>/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css">

js文件:

<script src="<%=path%>/js/jquery.min.js" type="text/javascript"></script>

<script src="<%=path%>/js/bootstrap.min.js" type="text/javascript"></script>

<script src="<%=path%>/js/bootstrap-datetimepicker.min.js"></script>

<script src="<%=path%>/js/bootstrap-datetimepicker.zh-CN.js"></script>

2:html代码:

<div class="form-group">
<label class="col-lg-2 control-label">执行时间:</label>
<div class="col-lg-4">
<input class="form-control" type="text"  data-date-format="yyyy-mm-dd hh:ii:ss" placeholder="执行时间(开始)" id="startTimeDatePicker" name="startTime" />
</div>
<div class="col-lg-4">
<input class="form-control" type="text" data-date-format="yyyy-mm-dd hh:ii:ss" placeholder="执行时间(结束)" name="endTime" />
</div>
</div>

3:js代码

var datepickers = $("input[data-date-format]");
datepickers.datetimepicker({
        language: ‘zh-CN‘,
        weekStart:1,
        autoclose:true,//设置选择完时间之后自动关闭选择框
        startDate:new Date()//
        });
时间: 2024-08-07 00:07:13

boostrap时间控件的相关文章

vue小荔枝,时间控件,动态按月份增减。

依赖框架有jq,bootstrap3.0,vue2.0; 自封装(搬运)时间控件,bootstrap-datetimepicker.资源下载:看这里 需求: 默认本地时间,相隔一个月 四个选项:1一个月,一个季度,半年,一年. 如果结束日期不变,那么默认递增即可,如果结束日期改变了,以变更的日期递增月份. html结构: <div id="app"> <div class="col-md-5 form-inline"> <div cla

jquery-ui日期时间控件实现

日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:http://jqueryui.com/ 日期控件js:jquery-ui.js 相应函数及默认属性设置:function Datepicker() 时间控件官网网址:http://plugins.jquery.com/jt.timepicker/ 时间控件js:jquery-ui-timepicker-

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

(21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): request.get(URL).then(成功回调函数,失败回调函数); 第一个回调函数是成功的,参数用response:(也可以用其他的) 第二个回调函数是失败的,参数用error:(也可以用其他的) 注: ①读取本地比较简单,直接填写本地的url即可: ②如果读取服务器端(比如数据库),那么需要相应的支持,例如python脚本等(我自己目前对python.和

My97DatePicker时间控件

之前一直使用easyui控件无法实现只显示yyyy年MM月格式或者显示yyyyMM格式.相比My97DatePicker时间控件更为强大些. 只要在页面引用如下脚本,WdatePicker.js内部会引用其它js. <script type="text/javascript" src="<%=root%>/Common/My97DatePicker/WdatePicker.js"></script> 然后在input中编写oncl

DatePicker日期与时间控件

DatePicker日期与时间控件 一.简介 二.方法 三.代码实例 四.收获

rf对时间控件的操作

1.如何去掉readonly属性 前端对于时间控件的设置,有时是为了限制用户不能进行手动输入方式进行选择时间,避免在手动输入的时候超限或者输入格式不正确,导致一些不必要的验证麻烦,这是前端开发工程师就会在前端代码中加入readonly属性,但是对于手动测试来说的话,这种只能进行点击控件进行选择时间,而对于自动测试来说,这样的方式可能是行不通,因为这个需要认证时间控件的有效性很多个选择,自动化变得更加麻烦, 是不是就没有办法进行了呢?答案是否点的,例如: 那该怎么进行设置呢?这个是前人踩过的坑,后

VB6.0中,日期、时间控件不允许为空时,采用文本框与日期、时间控件相互替换赋值(解决方案)

VB6.0中,日期.时间控件不允许为空时,采用文本框与日期.时间控件相互替换赋值,或许是一个不错的选择. 实现效果如下图: 代码如下: 文本框txtStopTime1 时间框DTStopTime1 格式3 - dtpCustom  HH:mm:ss Private Sub Form_Load()       txtStopTime1.ZOrder       DTStopTime1.Top = txtStopTime1.Top       DTStopTime1.Left = txtStopTi

关于bootstrap时间控件datetimepicker的位置错乱问题

最近遇到datetimepicker这个时间控件在加载到网页显示时会发生错乱,具体解决如下: 1.首先我的源代码是从网站下载的:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm 采用的源码是:sample in bootstrap v2文件夹下的: 2.考虑到位置错乱问题应该是在 js文件中,通过查找最终确定在bootstrap-datetimepicker.js中的问题:     应将其中的place:代码修改如下: plac

[转]一种简单的js时间控件

使用方法: 粘贴代码到文本文档中,文档名称为datetime.js,然后在html文件中引用如下代码即可 <input name="shijian1" id="shijian1" type="text" class="sang_Calender" /> <script type="text/javascript" src="js/datetime.js"><