- 浏览: 47441 次
文章分类
最新评论
今天用的了bootstrap日期插件感觉搜索的资料不是很多在此写下一些使用的心得:
插件开源地址:daterangepicker日期控件,
插件使用只要按照开源中的文档信息来就好先包括以下引用:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
包含对jquery,bootstrap框架的引用,以及日期处理用的moment.js,最后加载上这个插件的js和css文件
然后和大部分jq插件一样,该插件也是对$.fn的扩展所以进行以下的操作来使用这个控件
<script type="text/javascript">
$(document).ready(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>
用jq获取到你要插入的那个元素然后运行daterangepicker函数就能使用它默认的样式和属性了,
不过光有这个肯定是不行的,daterangepicker函数可以接受一个参数对象和一个回调函数,如下:
$('input[name="daterange"]').daterangepicker(
{
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end, label) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}
);
回调函数会在日期更改之后触发有三个参数,开始时间,结束时间以及标签名,可以在这里执行你要进行的操作如ajax请求
以上就可以构建一个英文版的日期控件了,如日期图片所示。
接下来着重介绍一下locale和ranges两个参数
首先是locale这个参数locale是构建本地语言应用的重要参数(github上说locale接受对象参数,不过并没有说明对象的属性)
以下是插件中locale默认属性
{
applyLabel: ‘Apply’,
cancelLabel: ‘Cancel’,
fromLabel: ‘From’,
toLabel: ‘To’,
weekLabel: ‘W’,
customRangeLabel: ‘Custom Range’,
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData()._week.dow };
我们只有更改这些参数就能够使这个插件变成中文的插件
$('input[name=datetime]').daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: new Date(),
maxDate:new Date(),
locale:{
applyLabel: '确认',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek:["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
}
}, function (start, end, label) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
当然你可能也许想实现github中的那个效果,想加个添加时间的快捷键:
Improvely.com
没问题可以使用range参数实现:
range参数也是对象参数{name:[start,end] name是快捷键的名称,接受一个数组分别是时间的开始和结束
$('input[name=datetime]').daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: new Date(),
maxDate:new Date(),
locale:{
applyLabel: '确认',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
weekLabel: 'W',
customRangeLabel: '选择时间',
daysOfWeek:["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
},
range: {
"近期": ['2015-04-12',new Date()]
}
}, function (start, end, label) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
插件开源地址:daterangepicker日期控件,
插件使用只要按照开源中的文档信息来就好先包括以下引用:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.css" />
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css" />
包含对jquery,bootstrap框架的引用,以及日期处理用的moment.js,最后加载上这个插件的js和css文件
然后和大部分jq插件一样,该插件也是对$.fn的扩展所以进行以下的操作来使用这个控件
<script type="text/javascript">
$(document).ready(function() {
$('input[name="daterange"]').daterangepicker();
});
</script>
用jq获取到你要插入的那个元素然后运行daterangepicker函数就能使用它默认的样式和属性了,
不过光有这个肯定是不行的,daterangepicker函数可以接受一个参数对象和一个回调函数,如下:
$('input[name="daterange"]').daterangepicker(
{
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: '2013-12-31'
},
function(start, end, label) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
}
);
回调函数会在日期更改之后触发有三个参数,开始时间,结束时间以及标签名,可以在这里执行你要进行的操作如ajax请求
以上就可以构建一个英文版的日期控件了,如日期图片所示。
接下来着重介绍一下locale和ranges两个参数
首先是locale这个参数locale是构建本地语言应用的重要参数(github上说locale接受对象参数,不过并没有说明对象的属性)
以下是插件中locale默认属性
{
applyLabel: ‘Apply’,
cancelLabel: ‘Cancel’,
fromLabel: ‘From’,
toLabel: ‘To’,
weekLabel: ‘W’,
customRangeLabel: ‘Custom Range’,
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData()._week.dow };
我们只有更改这些参数就能够使这个插件变成中文的插件
$('input[name=datetime]').daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: new Date(),
maxDate:new Date(),
locale:{
applyLabel: '确认',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek:["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
}
}, function (start, end, label) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
当然你可能也许想实现github中的那个效果,想加个添加时间的快捷键:
Improvely.com
没问题可以使用range参数实现:
range参数也是对象参数{name:[start,end] name是快捷键的名称,接受一个数组分别是时间的开始和结束
$('input[name=datetime]').daterangepicker({
format: 'YYYY-MM-DD',
startDate: '2013-01-01',
endDate: new Date(),
maxDate:new Date(),
locale:{
applyLabel: '确认',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
weekLabel: 'W',
customRangeLabel: '选择时间',
daysOfWeek:["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
},
range: {
"近期": ['2015-04-12',new Date()]
}
}, function (start, end, label) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
发表评论
-
validate自动校验
2016-09-23 15:32 669<!DOCTYPE html> <html& ... -
jquery选择器总结
2016-09-22 10:59 463jQuery 的选择器可谓之强 ... -
网页选项卡的切换
2016-09-22 10:53 420<!DOCTYPE html> <html& ... -
JQuery的extend扩展
2016-09-18 15:23 396JQuery的extend扩展方法: Jquery ... -
jquery实现全选,全不选,反选效果
2016-09-13 15:41 409<!DOCTYPE html PUBLIC " ... -
jquery实现全选,全不选,反选效果
2016-09-13 15:40 0<!DOCTYPE HTML> <html& ... -
封装数据_方法
2016-08-26 17:30 473var simple_confNetwork={ in ... -
jquery对对象数组的遍历的两种方式
2016-08-26 15:00 1900jquery对对象数组的遍历的两种方式 data: [ { ... -
query,bootstrap在开发中使用的总结
2016-08-24 09:50 578当ajax请求返回的数据date如上面所显示,要达到下图所示的 ... -
select初始化操作
2016-08-23 15:54 748select 初始化值,option 的value是id,内容 ... -
select初始化操作
2016-08-23 15:50 0select 初始化值,option 的value是id,内容 ... -
Jquery选择器
2016-08-19 10:08 626JQuery: 一:入门 二:选择器 三:DOM操作 四:事件 ... -
Vue.js 60 分钟快速入门
2016-08-19 09:20 515Vue.js介绍 Vue.js是当下很火的一个JavaScr ... -
Java构造和解析Json数据的两种方法详解一
2016-08-18 13:01 400在www.json.org上公布了很多JAVA下的json ... -
HTML5时钟
2016-08-18 12:31 487本示例使用HTML5的canvas标签和Javascript脚 ... -
同步更新input中的内容
2016-08-16 14:15 507HTML: <div class="form ... -
JQuery验证
2016-08-16 09:46 481js-----> var table = in ... -
jQuery.Validate验证库的使用
2016-08-15 16:24 475一、用前必备 转载:http://www.cnblogs.c ...
相关推荐
bootstrap 时间插件daterangepicker 4.0+ 添加清除按钮,input获取焦点不默认当前时间,失去焦点和关闭控件不设置默认时间。轻度改版源码。
主要为大家详细介绍了bootstrap日期插件daterangepicker的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
bootstrap-daterangepicker- 基于 Bootstrap 框架的日期范围选择控件
很不错的jQuery+Bootstrap双日历日期插件daterangepicker,界面就是基于Bootstrap样式的日历, 挺不错的界面,众多的参数自定义功能,还是很强大的,大家可以自己研究下。
基于bootstrap的日期插件daterangepicker,已汉化,包含一个选择日期段的简易demo,查看更多实例到官网http://www.daterangepicker.com/
双日历时间段选择插件 — daterangepicker是bootstrap框架后期的一个时间控件,可以设定多个时间段选项,也可以自定义时间段,由用户自己选择起始时间和终止时间,时间段的最大跨度可以在程序里设定。我们项目里用到...
所以换用了bootstrap插件daterangepicker;看了很多资料;结合官网了文档;基本算是搞定了;把我的总结代码分享给大家;希望对使用daterangepicker插件的初学者有帮助。 总结分为四个部分:日期范围选择实现,日期...
bootstrap daterangepicker使用介绍,具体如下 一、扩展的功能 1、初始化时,会自动创建一个select标签; 2、当改变select值时,日期也会自动改变,并且会调用apply按钮的click事件 3、点击此处进行预览 4、...
vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示(jsfiddle)功能日期范围选择比较fea vue-date-range-picker使用Bootstrap 4样式进行日期范围选择的vue组件实时演示( jsfiddle)功能...
很不错的jQuery+Bootstrap双日历日期插件daterangepicker,界面就是基于Bootstrap样式的日历, 挺不错的界面,众多的参数自定义功能,还是很强大的,大家可以自己研究下。
主要介绍了Yii2框架引用bootstrap中日期插件yii2-date-picker的方法,实例分析了yii2-date-picker插件的具体使用步骤与相关技巧,需要的朋友可以参考下
Twitter Bootstrap的日期范围选择器 Twitter Bootstrap的此日期范围选择器组件将创建一个下拉菜单,用户可以从中选择日期范围。 我创造了它,同时为用户界面 ,这需要一种方式来选择报告的日期范围。 如果不带任何...
bootstrap-datetimepicker开始时间小于等于结束时间-相互约束-清除时间; JQuery的datetimepicker插件,限制开始时间小于等于结束时间
基于jQuery的双日历插件pickerDateRange修改版,完美兼容IE8以上还有各大主流浏览器,使用非常简单方便,只需要引入js、css、images调用初始化方法就可以使用
这次功能中有个选择日期段的功能,本来不麻烦的事情,但是PM非要参照另外一个网站的效果来做,把别人代码扒下来一看,我去,08年的插件,很多功能不能满足当前,PM非要那效果,时间又TM有限,就又找了个国外的插件...
13.date-range-picker日期时间选择插件 已经完成(daterangepicker分支) 14.汉字转拼音 已经完成(pinyin分支) 15.flatPickr日期时间选择插件 已经完成(flatPickr分支) 16.mxgraph 已经完成 (mxgrap
使用任意逻辑轻松禁用特定日期,日期范围或任何日期 周数 51个地区 8种丰富多彩的主题(包括深色和深色) 众多插件 可用于React,Angular,Vue,Ember等的库 flatpickr提供的其他功能只有其他库的一小部分。 兼容...