HTML 时间控件

在做表单的时候,有时候需要输入时间,为了避免输入的麻烦,可以选择一些现成的时间控件。本文提供一个简单的样例,示例代码如下:(要成功运行,需要保持和本文对应的目录结构)。js/ css/ 。

<!DOCTYPE html>
<html>
<meta charset="utf8"> </meta>
<head> 这是汉字 </head>
<script src="js/jquery.js"> </script>
<script src="js/jquery.datetimepicker.js"> </script>
<link rel="stylesheet" href="css/jquery.datetimepicker.css"/>

<body>

<h3>Destroy DateTimePicker</h3>
<input type="text" id="datetimepicker6"/>
<!--
<input id="destroy" type="button" value="destroy"/>
--!>
</body>

<script>
$('#datetimepicker6').datetimepicker();
//$('#destroy').click(function(){
//	if( $('#datetimepicker6').data('xdsoft_datetimepicker') ){
//		$('#datetimepicker6').datetimepicker('destroy');
//		this.value = 'create';
//	}else{
//		$('#datetimepicker6').datetimepicker();
//		this.value = 'destroy';
//	}
//});
</script>
</html>

其中比较核心的就是引入 js 代码和 css 样式,这是引入控件包含的所有的内容。可以从这里获得 datetimepicker,拿到本文上面提到的3个js文件就行,在

需要的地方引入他们,就可以使用了。需要注意的是,不要忽略最开头的<!DOCTYPE html> 。为了深刻,不放去掉试试!

时间: 01-24

HTML 时间控件的相关文章

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"><

selenium Webdriver 处理 —— 通过时间控件给文本框赋值

说明:大部分程序选择时间时都是用 时间控件 直接选择一个日期然后赋值给文本框,下面举例说明 1.利用时间控件赋值给文本框具体事例如下: HTML界面: java代码: //用js将input标签的readonly去掉 String js1="var setDate=document.getElementById(\"publishTime\");setDate.removeAttribute('readonly');";//定义一个js exeJS(dr, js1)