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里直接使用申明的的形 ...
随机推荐
- C#线程中LOCK的意义
学习心得,为的是让新人能理解,高手直接绕~ lock 确保当一个线程位于代码的临界区时,另一个线程不进入临界区.如果其他线程试图进入锁定的代码,则它将一直等待(即被阻止),直到该对象被释放. 引用一句 ...
- tarjan算法比较详细的讲解&&tarjan常见疑难解答&&洛谷P2002 消息扩散题解
因为有大佬写的比我更长更具体,所以我也就写写总结一下了 引入: 众所周知,很多图中有个东西名叫环. 对于这个东西很多算法都很头疼.(suchas 迪杰斯特拉) 更深层:环属于强联通分量(strongl ...
- shell更改xml中的指定值
sed -i 's;<id>.*<\/id>;<id>新内容<\/id>;g' your.xml
- CSS选择器的权重与优先规
我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: ...
- vue data数据恢复初始化
Object.assign(this.$data, this.$options.data())
- 再提供一种解决Nginx文件类型错误解析漏洞的方法
[文章作者:张宴 本文版本:v1.2 最后修改:2010.05.24 转载请注明原文链接:http://blog.zyan.cc/nginx_0day/] 注:2010年5月23日14:00前阅读本文 ...
- Python 3标准库 第十四章 应用构建模块
Python 3标准库 The Python3 Standard Library by Example -----------------------------------------第十四章 ...
- ASP.NET MVC5入门指南(1)*入门介绍
以下指南说明了什么是ASP.NET MVC,并说明了如何入门. ASP.NET MVC 5入门 入门 添加控制器 添加视图 添加模型 创建连接字符串并使用SQL Server LocalDB 从控制器 ...
- 通过喝水清晰简单了解I/O五大模型
一般单次I/O请求会分为两个阶段,每个阶段对于I/O的处理方式是不同的 I/O会经历一个等待资源的阶段 阻塞,指的是在数据不可用时,I/O请求会一直阻塞,直到数据返回 数据不可用时,立即返回,直到被通 ...
- Codeforces 1213F Unstable String Sort
cf题面 中文题意 求一个由最多26个.最少k个小写字母构成的,长度为n的字符串,这个字符串要满足的要求是--当其中字母按照p和q两个\(1\)~\(n\)的全排列重新排序时,新的字符串是按照升序排好 ...