bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用
<div class="row form-group">
<label class="control-label col-md-2">Log Date</label>
<div class="col-md-3">
<div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd">
<input id="ModifyDateStart" name="ModifyDateStart" class="form-control" style="font-size: 13px;" type="text" value="">
<span class="input-group-addon">~</span>
<input id="ModifyDateEnd" name="ModifyDateEnd" class="form-control" style="font-size: 13px;" type="text" value="">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".date-picker").datepicker({
language: "zh-EN",
//autoclose: true,//选中之后自动隐藏日期选择框
//clearBtn: true,//清除按钮
format: "yyyy-mm-dd"//日期格式 });
});
</script>
2.bootstrap datetimepicker的使用
<label class="control-label col-md-2">Access Time</label>
<div class="col-md-4">
<div class="input-group input-medium">
<input id="AccessTimeStart" name="AccessTimeStart" class="form-control" style="font-size: 13px;" type="text" value="">
<span class="input-group-addon">~</span>
<input id="AccessTimeEnd" name="AccessTimeEnd" class="form-control" style="font-size: 13px;" type="text" value="">
</div>
</div>
<script type="text/javascript">
$(function () {
setTwoDateTimePicker('#AccessTimeStart', '#AccessTimeEnd');
bandDatapicker();
}); function bandDatapicker() {
debugger;
batchSetDateTimePicker(".date-picker", "YYYY-MM-DD HH:mm", null, moment());
}; //将两个输入框设置为日期时间段控件
function setTwoDateTimePicker(beginId, endId, dateFormat) {
var newDateFormat = dateFormat || 'YYYY-MM-DD HH:mm';
$(beginId).datetimepicker({
format: newDateFormat,
});
$(endId).datetimepicker({
format: newDateFormat,
useCurrent: false
});
$(beginId).on("dp.change", function (e) {
var value = e.date ? convertToMoment(e.date, newDateFormat) : false;
$(endId).data("DateTimePicker").minDate(value);
});
$(endId).on("dp.change", function (e) {
var value = e.date ? convertToMoment(e.date, newDateFormat) : false;
$(beginId).data("DateTimePicker").maxDate(value);
});
} //批量将输入框设置为日期时间控件,批量的时候必须遍历单独设置,否则最大最小值会无效
function batchSetDateTimePicker(id, dateFormat, minDate, maxDate, changeFunc) {
$(id).each(function (index, element) {
value = $(element).val();
setDateTimePicker(element, dateFormat, minDate, maxDate, value, changeFunc);
});
} //将输入框设置为日期时间控件
function setDateTimePicker(id, dateFormat, minDate, maxDate, defaultValue, changeFunc) {
var newDateFormat = dateFormat || 'YYYY-MM-DD';
$(id).datetimepicker({
format: newDateFormat,
// useCurrent: false
});
if (minDate) {
var value = convertToMoment(minDate, newDateFormat);
$(id).data("DateTimePicker").minDate(value);
}
if (maxDate) {
var value = convertToMoment(maxDate, newDateFormat);
$(id).data("DateTimePicker").maxDate(value);
}
//赋初始值,否则当设置了最大最小值时可能会将当天日期赋给输入框
if (defaultValue) {
var value = convertToMoment(defaultValue, newDateFormat);
$(id).data("DateTimePicker").date(value);
} else {
$(id).data("DateTimePicker").date(null);
}
if (changeFunc) {
$(id).on("dp.change", changeFunc);
}
} //将日期时间字符串或者moment对象按照指定格式转换为新的moment对象
function convertToMoment(datetime, dateFormat) {
if (!datetime) { return null; }
if (moment.isMoment(datetime)) {
return moment(datetime.format(dateFormat), dateFormat);
} else {
return moment(datetime, dateFormat);
}
}
</script>
bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装的更多相关文章
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...
- 十九、React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件
一.Antd(Ant Design)的使用:引入全部Css样式 1.1 antd官网: https://ant.design/docs/react/introduce-cn 1.2 React中使用A ...
- 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能
微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...
- bootstrap datetimepicker 日期插件超详细使用方法
日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...
- bootstrap datetimepicker时间日期控件
github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based o ...
- bootstrap datetimepicker 在 angular 项目中的运用
datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker ...
- bootstrap datetimepicker的参数解释
使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...
- [转]通过AngularJS directive对bootstrap日期控件的的简单包装
本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...
- [整理]通过AngularJS directive对bootstrap日期控件的的简单包装
最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...
随机推荐
- 关于nmap扫描端口
nmap查看一个服务器的端口,是通过扫描来实现的.所以在本机执行nmap扫描的端口有可能被防火墙阻止,在外部是访问不了的. 如:开启ORACLE监听后,在本机使用nmap 127.0.0.1是可以扫描 ...
- 权限和ACL访问控制-02-特殊权限
X(大写) X:给目录x权限,不给文件x权限(当文件本来就有x权限的话会重新赋予x权限) 例如: chmod -R +X dir2 SUID SUID属性一般运用在可执行文件上,当用户执行该执行文件时 ...
- Gym - 102040F Path Intersection (树链剖分+线段树)
题意:给出棵树上的k条路径,求这些路径的公共点数量. 将每条路径上的点都打上标记,被标记过k次的点就是公共点了.由于公共点形成的区间是连续的,因此直接在线段树上暴搜即可在$O(logn)$求出一条链上 ...
- 【HDU5890】Eighty seven
题目大意:给定 N 个数,M 个询问,每次询问如果去掉三个数(可能相同),能否选择恰好 10 个数字,凑出 87 这个数. 题解:骚操作.. 集合凑数问题是一个很经典的模型,即:背包问题. 先进行预处 ...
- Ruby笔记
1.数组遍历方法总结 array = (1..10).to_a length = array.length length.times do t print "#{array[t]} &quo ...
- [洛谷P1712] NOI2016 区间
问题描述 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x,使得对于每一 ...
- Python 正则表达式Ⅳ
repl 参数是一个函数 以下实例中将字符串中的匹配的数字乘以 2: 执行输出结果为: re.compile 函数 compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象 ...
- Here is a test page for my new blog in cnblogs
Tell me if I can use Fomula like LaTeX $$\sum\limits_{i = 1}^{n}a_i$$
- 7. ClustrixDB 集群管理
一. ALTER CLUSTER ADD (Flex Up): 添加节点以增加集群大小 添加节点过程: 步骤1.准备节点 提供节点并在每个节点上安装ClustrixDB,使用相同的版本和安装配置.如 ...
- python 的pip安装
C:\Python27>C:\Python27\Scripts\pip.exe install gevent gevent是安装的模块名