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日期组件对范围的简单封装的更多相关文章

  1. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  2. 十九、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 ...

  3. 测试开发【提测平台】分享12-掌握日期组件&列表状态格式化最终实现提测管理多条件搜索展示功能

    微信搜索[大奇测试开],关注这个坚持分享测试开发干货的家伙. 本章内容思维导图如下,由于需要各种状态下的菜单操作,所以需要先实现提测信息的列表基础页面,然后再推进其他需求开发 基本知识点学习 Date ...

  4. bootstrap datetimepicker 日期插件超详细使用方法

    日期时间选择器 目前,bootstrap有两种日历.datepicker和datetimepicker,后者是前者的拓展. Bootstrap日期和时间组件: 使用示例: 从左到右依次是十年视图.年视 ...

  5. bootstrap datetimepicker时间日期控件

    github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based o ...

  6. bootstrap datetimepicker 在 angular 项目中的运用

    datetimepocker 是一个日期时间选择器,bootstrap datetimepicker 是 bootstrap 日期时间表单组件.访问 bootstrap-datetimepicker  ...

  7. bootstrap datetimepicker的参数解释

    使用bootstrap datetimepicker(日期时间选择器)的过程中,发现中文参数说明和英文参数说明严重不符,所以结合自己使用的情况和英文参数说明,做了如下翻译. $(".form ...

  8. [转]通过AngularJS directive对bootstrap日期控件的的简单包装

    本文转自:http://www.cnblogs.com/Benoly/p/4109460.html 最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的 ...

  9. [整理]通过AngularJS directive对bootstrap日期控件的的简单包装

    最近项目上了AngularJS,而原来使用的日期控件的使用方式也需要改变,于是开始了倒腾,看了官方的例子,可以使用AngularJS的directive做简单的处理,这样在html里直接使用申明的的形 ...

随机推荐

  1. 关于nmap扫描端口

    nmap查看一个服务器的端口,是通过扫描来实现的.所以在本机执行nmap扫描的端口有可能被防火墙阻止,在外部是访问不了的. 如:开启ORACLE监听后,在本机使用nmap 127.0.0.1是可以扫描 ...

  2. 权限和ACL访问控制-02-特殊权限

    X(大写) X:给目录x权限,不给文件x权限(当文件本来就有x权限的话会重新赋予x权限) 例如: chmod -R +X dir2 SUID SUID属性一般运用在可执行文件上,当用户执行该执行文件时 ...

  3. Gym - 102040F Path Intersection (树链剖分+线段树)

    题意:给出棵树上的k条路径,求这些路径的公共点数量. 将每条路径上的点都打上标记,被标记过k次的点就是公共点了.由于公共点形成的区间是连续的,因此直接在线段树上暴搜即可在$O(logn)$求出一条链上 ...

  4. 【HDU5890】Eighty seven

    题目大意:给定 N 个数,M 个询问,每次询问如果去掉三个数(可能相同),能否选择恰好 10 个数字,凑出 87 这个数. 题解:骚操作.. 集合凑数问题是一个很经典的模型,即:背包问题. 先进行预处 ...

  5. Ruby笔记

    1.数组遍历方法总结 array = (1..10).to_a length = array.length length.times do t print "#{array[t]} &quo ...

  6. [洛谷P1712] NOI2016 区间

    问题描述 在数轴上有 n个闭区间 [l1,r1],[l2,r2],...,[ln,rn].现在要从中选出 m 个区间,使得这 m个区间共同包含至少一个位置.换句话说,就是使得存在一个 x,使得对于每一 ...

  7. Python 正则表达式Ⅳ

    repl 参数是一个函数 以下实例中将字符串中的匹配的数字乘以 2: 执行输出结果为: re.compile 函数 compile 函数用于编译正则表达式,生成一个正则表达式( Pattern )对象 ...

  8. 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$$

  9. 7. ClustrixDB 集群管理

    一. ALTER CLUSTER ADD (Flex Up):  添加节点以增加集群大小 添加节点过程: 步骤1.准备节点 提供节点并在每个节点上安装ClustrixDB,使用相同的版本和安装配置.如 ...

  10. python 的pip安装

    C:\Python27>C:\Python27\Scripts\pip.exe install gevent gevent是安装的模块名