bootstrap时间控件

最新推荐文章于 2014-04-15 14:34:01 发布
最新推荐文章于 2014-04-15 14:34:01 发布
阅读量212 收藏
点赞数
分类专栏： Web前端 文章标签： javascript html jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013257544/article/details/84534473
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />


<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">

<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">


<!-- 最新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<link href="css/style.css" rel="stylesheet" type="text/css" />

<title>作业管理>新建作业</title>
</head>

<body>
<div class="container">
<div class="col-xs-12 dzp_top"><!--顶部--></div>
<div class="col-xs-12_content">
<div class="row">
<div class="col-xs-3">1<!--左侧--></div>
<div class="col-xs-9" style="min-height:470px;">
<label class="dzp_title">作业管理>新建作业</label>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">作业信息</h3>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<table class="table table-bordered table-striped">
<tr>
<td style="text-align:right;">名称：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;"/>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">上传附件 ：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;" />
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default">浏览</button>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">附件名：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;"/>
</div>
<div class="col-xs-3">
<button type="button" class="btn btn-default">上传</button>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">描述：</td>
<td>
<textarea class="form-control" rows="4" style="resize:none;">章节描述。。。</textarea>
</td>
</tr>
<tr>
<td style="text-align:right;">满分：</td>
<td>
<div class="row">
<div class="col-xs-5">
<input type="text" class="form-control" style="height:34px;"/>
</div>
</div>
</td>
</tr>
<tr>
<td style="text-align:right;">作业提交截止时间：</td>
<td>
<div>
<div class="col-xs-3">
<div id="datetimepicker2" class="input-append">
<input data-format="yyyy-MM-dd" class="form-control" type="text" style="height:34px;"></input>
<span class="add-on" style="height:34px;cursor:pointer;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
<div class="row" style="margin-bottom:20px;">
<div class="col-xs-6 text-right">
<button type="button" class="btn btn-default btn-md">提交</button>
</div>
<div class="col-xs-6">
<button type="button" class="btn btn-default btn-md">取消</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 dzp_bottom">
<!--底部-->
</div>
</div>
</div>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
$('#datetimepicker1').datetimepicker({
pickTime: false
});
});
$(function() {
$('#datetimepicker2').datetimepicker({
pickTime: false
});
});
</script>
</body>
</html>
破逼名总重复
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap时间控件.zip
05-22
Bootstrap时间控件是一种基于Twitter Bootstrap框架的用户界面组件，用于在网页上实现高效、美观的时间选择功能。Bootstrap作为最流行和广泛使用的前端开发框架之一，提供了丰富的预设样式、组件和JavaScript插件，...
BOOTSTRAP时间控件显示在模态框下面的bug修复
09-03
在这个问题中，我们关注的是Bootstrap时间控件在模态框（modal）中的显示异常，具体表现为时间控件出现在模态框下方，而不是正常地覆盖在模态框内容之上。这通常是一个Z-index相关的问题，Z-index是CSS中用于控制...
bootstrap时间控件的使用
08-11
Bootstrap时间控件是一种在网页设计中用于用户交互的组件，特别是在数据输入时提供方便的时间选择功能。Bootstrap，作为最流行和广泛使用的前端开发框架之一，提供了丰富的UI组件，包括时间控件，以帮助开发者创建...
修改IE浏览器默认的文档模式
u013257544的博客
02-28 6517
开始运行输入C:\Windows\System32\gpedit.msc 打开管理模板 Windows组建 Internet Explorer 兼容性视图 打开Internet Explorer 7标准模式选择 已启用 OK!
display:block的作用与用法
u013257544的博客
07-22 3332
display:block可以理解为块。用个简单的例子给你！比如你做一个超链接， 超链接 当你鼠标移过去文字的时候，超链接有效果！ 而当我把样式这样设置： li a{width:100px;height:100px; display:block; color:red; text-decoration:none;} 鼠标移到文字周围100*100的地方，就有超链接效果了，就是把100*10...
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
u013257544的博客
03-25 2243
1。html中a标签的四个属性书写是有顺序的，如果顺序不对，显示效果有可能出现差错。 a:link{text-decoration:none ; color:#c00 ;} a:visited {text-decoration:none ; color:#c30 ;} a:hover {text-decoration:underline ; color:#f60 ;} a:activ...
js展开与隐藏(带向上隐藏与向下展开图标)
u013257544的博客
06-25 1564
/*-------------------------jquery代码----------------------------*/ $(document).ready(function(){ $(".tabs1").show(); $(".tabs").hide(); $(".tab_box #tab").click(function(){ ...
通过css将直角矩形变为圆角矩形
u013257544的博客
08-30 1335
{border-radius:6px 6px 0 0}
修改360浏览器内核
u013257544的博客
03-10 1001
浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的...
表格外边框实线，内部为虚线
u013257544的博客
07-23 850
/*-----------------------html代码---------------------------------*/ 序号 教学计划名称 招生批次 层次 专业 备注 操作 1 1303保险事务专业(专科)教学计划 1303 专科 保险实务 今...
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
u013257544的博客
04-15 667
[size=large][b]script代码：[/b][/size] $(document).ready(function(){ $("#add").click(function(){ $("#select1 option:selected").appendTo("#select2"); ...
div+css左侧列表高度随右侧内容增多而增长
u013257544的博客
06-24 583
/*-------------------------jquery代码-----------------------*/ //左边导航栏的高度 随着右边内容的增多而增长 $(function(){ var count=$(".content").height()-10; //数值自己设置 $("#gly-left").height(count); ...
解决导出excel时，如身份证等超长字符不以科学计数法法显示
u013257544的博客
07-23 554
td { background-color: #FFFFFF; } .txt {padding-top:1px; padding-right:1px; padding-left:1px; mso-ignore:padding; color:black; font-size:11.0pt; font-weight:400; font-style...
点击文字超链接，当前字体由白色变为黄色，其余的不变，仍然为白色
u013257544的博客
06-25 547
/*----------------------jquery代码---------------------*/ $(document).ready(function(){ $("a").click(function(){ $("a").css("color",""); $(this).css("color","#FFFF00"); }
jsp页面实现打印动态页面的分页
u013257544的博客
07-03 477
需要导出excel位置添加导出按钮 toexcel.jsp页面设置contetTyep替换原有设置 表格内容 可以根据想要的文件名修改xxx表.xls位置
HTML页面动态增加下拉列表，求定位删除方法
u013257544的博客
07-03 438
在页面上动态的增加下拉列表，也可以动态增加其他元素 缺点是删除的时候，只能从后往前删除，不知哪位大神有方法实现定位删除 Untitled Document LastTableID = 0; function add() { LastTableID = LastTabl...
兼容IE(使IE版本向IE9 兼容)
u013257544的博客
07-02 311
在标签中加入一句话： 此话一定要加在开始标签之后。 例： 登陆页 function go(){ window.location.href="index.html"; }
div悬浮(类似新开网页时出现的小广告)
u013257544的博客
06-23 310
#wrapper {overflow: hidden;} #content {width:591px; margin-right:39px; float:right; margin-top:28px;} #sidebar {width:148px; ...
bootstrap3 时间选择控件
最新发布
05-30
在 Bootstrap 3 中，可以通过引入第三方插件来实现时间选择控件。常用的插件有：Bootstrap Datetimepicker、Bootstrap Timepicker 和 Bootstrap Clockpicker。 这里以 Bootstrap Datetimepicker 为例来介绍如何实现时间选择控件。 1. 引入相关文件 在页面中引入 Bootstrap Datetimepicker 的相关文件，包括 CSS、JS 和依赖库 Moment.js。可以通过以下方式引入： ```html <!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css"> <!-- 引入依赖库 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <!-- 引入脚本文件 --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> ``` 2. 创建时间选择控件 在需要添加时间选择控件的 input 元素上添加 `datetimepicker` 类，并设置 `data-date-format` 属性指定日期格式。例如： ```html <div class="form-group"> <label for="datetimepicker">选择日期时间：</label> <div class="input-group date" id="datetimepicker"> <input type="text" class="form-control datetimepicker" data-date-format="YYYY-MM-DD HH:mm:ss"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> ``` 3. 初始化时间选择控件 在页面加载完成后，通过 JavaScript 初始化时间选择控件。例如： ```js $(function() { $('#datetimepicker').datetimepicker(); }); ``` 这样就可以在页面中添加一个时间选择控件了。需要注意的是，Bootstrap Datetimepicker 还提供了很多选项和方法，可以根据自己的需求进行定制和调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值