基于bootstrap的datetimepicker插件
1、当时使用的资源地址:http://www.bootcss.com/p/bootstrap-datetimepicker/
2、如何让时间只显示到日期,不显示具体时刻
控制显示精度的是datetime.js的内容
$(function () { $('.form_datetime').datetimepicker({ //日期选择框
language: 'zh-CN',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
minView: 2,
showMeridian: 1
});
})
可以在实际的js文件中重写这部分。
minView的值表示精度。此例中,minView=2,精度为“日”。
3、如何让显示的日期为汉字
bootstrap-datetimepicker.fr.js/bootstrap-datepicker.zh-CN.js文件中定义了显示的文字,
显示中文,需要在设置的时候,把language设为“zh-CN”(datetime.js)
然后引用bootstrap-datepicker.zh-CN.js文件
;(function($){
$.fn.datetimepicker.dates['zh-CN'] = {
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
today: "今日", suffix: [],
meridiem: ["am", "pm"],
weekStart: 1, };
}(jQuery));
4、html文件中的部分
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label class="control-label">截止时间</label>
<div class="input-group date form_datetime" data-date-format="yyyy-mm-dd" data-link-field="postDeadline">
<input class="form-control" size="16" type="text" value="" readonly>
<!--<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>-->
<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
</div>
<input type="hidden" id="postDeadline" name="deadLine" value="" /><br/>
</div>
</div>
</div>
5、对可选择的时间进行限制,并设置显示精度等(接2)
以下是有两个datetimepicker,时间限制互相影响的情况。(与4中的html不一致)
// 初始化 datetimePicker
// elements 是需要 datetimePicker化元素
function initDateTimePicker($elements) {
var today = formatDate(); $elements.datetimepicker({
language: "zh-CN",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
// 默认都是从今天开始
$elements.datetimepicker("setStartDate", today) var $start = $elements.filter(".start");
var $deadline = $elements.filter(".deadline"); // 开始日期 默认为今天
$start
.find(".form-control")
.val(today); // 当日期变化时,修改另一个时间的限制值(没起作用)
$start
.on('changeDate', function(ev){
$deadline.datetimepicker("setStartDate", formatDate(ev.date))
}); $deadline
.on('changeDate', function(ev){
$start.datetimepicker("setEndDate", formatDate(ev.date))
});
} function formatDate(date) {
date = date || new Date(); return [
date.getFullYear(),
date.getMonth() + 1,
date.getDate()
].join("-");
}
若不考虑两个datetimepicker的情况,只对其中一个设置,不能选择今天之前的日期
function initDateTimePicker($elements) {
var today = formatDate();
console.log(today);
$elements.datetimepicker({
language: "zh-CN",
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
forceParse: 0
});
// 默认都是从今天开始
$elements.datetimepicker("setStartDate", today) //var $start = $elements.filter(".start");
//var $deadline = $elements.filter(".deadline"); // 开始日期 默认为今天
$(this)
.find(".form-control")
.val(today);
} function formatDate(date) {
date = date || new Date(); return [
date.getFullYear(),
date.getMonth() + 1,
date.getDate()
].join("-");
}
使用
initDateTimePicker($(".form_datetime"));
6、修改显示的样式(此例中,让日历界面横向占据整个界面)
/***********datetimepicker************/
.datetimepicker{
width:calc(100% - 30px);
left:15px!important;
}
.datetimepicker:before {
display: none;
}
.datetimepicker::after {
display: none;
}
.datetimepicker table{
width:100%;
}
基于bootstrap的datetimepicker插件的更多相关文章
- bootstrap-paginator基于bootstrap的分页插件
bootstrap-paginator基于bootstrap的分页插件 GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 步骤 引包 ...
- 基于Bootstrap的对话框插件bootstrap-dialog
写在前面: bootstrap本身提供了它自己的模态框,但是感觉并不太友好,当需要在页面点击一个按钮打开一个窗口页面时,使用原有的bootstrap的模态框,会把所有的代码全部写在一个jsp页面,显得 ...
- 基于bootstrap的分页插件
之前做的分页,是自己后端写一堆代码,返回给前端页面显示,感觉比较繁重.不灵活.今天研究下基于bootstrap的做的插件,整理如下: 在使用bootstrap的插件的时候,需要导入一些css.js. ...
- 基于bootstrap 的datatable插件的使用(php版)
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能.详细学习请参考其官网:http://datatables.net/中文网:http:/ ...
- 一款基于bootstrap的datetimepicker
<!DOCTYPE HTML> <html> <head> <link href="http://netdna.bootstrapcdn.com/t ...
- 基于bootstrap的bootstrap-editable插件实现即时编辑功能
1.引用基本css和js: <link href="bootstrap3/css/bootstrap.min.css" rel="stylesheet" ...
- 基于bootstrap的双日历插件 daterangepicker
我遇到需求是要求我将daterangepicker的一个双日期选择格式修改成两个单日期格式的日期选择框(方便手机端显示),要求如下: 1.两个单日期格式分别为开始日期和结束日期 2.开始日期可选择范围 ...
- 基于Bootstrap的表格插件bootstrap-table
写在前面: 表格在项目中是使用比较多的,bootstrap-table插件也是非常好用,而且表格页面也比较好看.这里也简单的记录下. 下面直接看demo吧,代码中都注释了,有些用法,这里没有用到,需要 ...
- 日历插件:Bootstrap的datetimepicker插件
注意:可以选择性引入 bootstrap.min.css和bootstrap.min.js,引入样式更好控制 option选项 0-hour 1-day 2-month 3-year 4-all ye ...
随机推荐
- 算法练习之:Biorhythms
Biorhythms Time Limit: 1000MS Memory Limit: 10000KB Problem Description Some people believe that th ...
- Electrification Plan(最小生成树)
http://acm.sdut.edu.cn:8080/vjudge/contest/view.action?cid=50#problem/D 最小生成树模板,注意的是这里有k个发电站,它们不再需要连 ...
- Linux中修改环境变量及生效方法
在/etc/profile文件中添加变量[对所有用户生效(永久的)] 用VI在文件/etc/profile文件中增加变量,该变量将会对Linux下所有用户有效,并且是“永久的”. 要让刚才的修改马上生 ...
- bzoj2631 3282
这两题都是link cut tree的裸题之前看Qtree的论文,只会在确定父子关系的情况下连边和删边如果在任意两个点连边删边怎么做呢?这时候我们不能随意的将一个点的父节点设为另一个点,因为其中某个点 ...
- 开源(免费)三维 GIS(地形,游戏) 续1
转自:http://www.cnblogs.com/xiexiaokui/archive/2009/04/02/1428525.html 转自 三维数字地球发布平台探索--几款开源软件介绍 http: ...
- 从零开始学习jQuery
转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...
- HDU-1045 Fire Net
http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit: 2000/1000 MS (Java/Others) Me ...
- HDU-1495 非常可乐(BFS)
广搜的灵活应用题: 非常可乐 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) T ...
- JSP九大内置对象详解
内置对象特点: 1. 由JSP规范提供,不用编写者实例化. 2. 通过Web容器实现和管理 3. 所有JSP页面均可使用 4. ...
- git diff old mode 100755 new mode 100644
755 vs 644 在linux下载了Qt的软件仓库,拷贝了一份到windows下.在 msysgit 下,发现所有的文件都被修改了. 用 git diff 查看,发现是: $ git diff u ...