&jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件。整个日期选择器插件使用CSS来渲染样式，可以非常容易的使用CSS来定制它的皮肤。它的兼容性非常好，支持IE6+的IE浏览器。
& & &该日期选择器的特点有：
& & （1）支持IE6+, Firefox, Chrome, Safari和其他标准的HTML5浏览器。
& & （2）支持多种语言。
& & （3）使用CSS来渲染样式。
& & （4）容易使用和定制。
& & （5）支持多种时间格式。
笔记本电脑或是台式机互联网jQueryjQuery Date Range Picker
在Github上下载&jQuery Date RangePicker，如下图所示：
使用该日期选择器插件需要 jQuery 1.3.2+和Moment2.2.0+的支持。
&link rel=&stylesheet&href=&daterangepicker.css& /&
&scriptsrc=&moment.min.js&&&/script&
&scriptsrc=&jquery.daterangepicker.js&&&/script&&&&&&&&&&&
$('#dom-id').dateRangePicker(configObject);&&&
该日期选择器的默认配置参数如下：
format (String)：Moment的日期格式。
separator (String)：日期字符串之间的分隔符。
language (String)：预定义的语言是&en&和&cn&。你可以使用这个参数自定义语言。也可以设置为&auto&来让浏览器自己检测语言。
startOfWeek (String)：&sunday&或 &monday&。
getValue (Function)：当从DOM元素中获取日期范围时会调用该函数，函数的上下文被设置为datepicker DOM。
setValue (Function)：当向DOM元素中写入日期范围时调用该函数。
startDate (String or false)：定义用户允许的最早日期，格式和format相同。
endDate (String or false)：定义用户允许的最后日期，格式和format相同。
minDays (Number) ：该参数定义日期范围的最小天数，如果设置为0，表示不限制最小天数。
maxDays (Number)：该参数定义日期范围的最大天数，如果设置为0，表示不限制最大天数。
showShortcuts (Boolean) ：先生或隐藏shortcuts区域。
time (Object)：如果允许该参数就会添加时间的范围选择。
shortcuts (Object)：定义快捷键按钮。
customShortcuts (Array)：定义自定义快捷键按钮。
inline (Boolean)：使用inline模式渲染该日期选择器，而不是overlay模式。如果设置为true，则要一起设置container参数。
container (String, css selector || DOM Object) ：要进行渲染的日期选择器DOM元素。
alwaysOpen (Boolean)：如果使用inline模式，你可能希望在页面加载时就渲染日期选择器。该参数设置为true时会隐藏&close&按钮。
singleDate (Boolean)：设置为true可以选择单个的日期。
batchMode (false / 'week' / 'month')：自动批处理模式。
当该日期选择器在DOM中选择某个日期范围时会触发三个事件。
$('#dom-id')
.dateRangePicker()
.bind('datepicker-change',function(event,obj)
& & console.log(obj);
& & // obj will be something like this:
& & // & & &date1: (Date objectof the earlier date),
& & // & & &date2: (Date objectof the later date),
& & // & & &value:& to &
.bind('datepicker-apply',function(event,obj)
& & console.log(obj);
.bind('datepicker-close',function()
& & console.log('close');
}); & & & & & & &&
调用$(dom).dateRangePicker()
$(dom).data('dateRangePicker')
&&&&.setDateRange('','');&//set date range, two date strings should follow the `format` in config object
&&&&.clear();&& // cleardate range
&&&&.close();&& // closedate range picker overlay
&&&&.open();&&& //open date range picker overlay
&&&&.destroy(); // destroy all daterange picker relatedthings&&&&&&&&&&&
&!doctype html&
&meta charset=&UTF-8&&
&meta http-equiv=&X-UA-Compatible&content=&IE=edge,chrome=1&&&
&meta name=&viewport&content=&width=device-width, initial-scale=1.0&&
&title&jQuery可选择日期范围的日期选择器插件&/title&
&link rel=&stylesheet&type=&text/css& href=&css/normalize.css& /&
&link rel=&stylesheet&type=&text/css& href=&css/default.css&&
&link rel=&stylesheet&href=&css/daterangepicker.css& /&
&script src=&js/jquery-1.11.2.min.js&&&/script&
&scriptsrc=&js/moment.min.js&&&/script&
&scriptsrc=&js/jquery.daterangepicker.js&&&/script&
&script src=&js/demo.js&&&/script&
&!--[if IE]&
&scriptsrc=&/js/html5shiv/3.7/html5shiv.min.js&&&/script&
&![endif]--&
color:#333;
font-family:T
line-height:1.5;
font-size:14
.demo { margin:30px 0;}
.date-picker-wrapper .month-wrapper table .day.lalala {background-color: }
.options { display: border-left:6px solid #8padding:10 font-size:12 line-height:1.4; background-color:#border-radius:4}
&h1&jQuery可选择日期范围的日期选择器插件 &span&A jQuery plugin that allows user to select a daterange&/span&&/h1&
&a class=&htmleaf-iconicon-htmleaf-home-outline& href=&/&title=&jQuery之家&target=&_blank&&&span& jQuery之家&/span&&/a&
&a class=&htmleaf-iconicon-htmleaf-arrow-forward-outline& href=&/jQuery/Calendar-Date-Time-picker/.html&title=&返回下载页&target=&_blank&&&span& 返回下载页&/span&&/a&
&div class=&htmleaf-content bgcolor-3&&
&h2&Demonstrations&/h2&
Default settings: &input id=&date-range0&size=&30& value=&&&&
&a href=&#&&Show Config&/a&
Default settings with time enabled: &inputid=&date-range1& size=&30& value=&&&
&a href=&#&&Show Config&/a&
startOfWeek: 'monday',
separator : ' ~ ',
format: 'DD.MM.YYYY HH:mm',
autoClose: false,
enabled: true
Default settings with default value: &inputid=&date-range2& size=&30& value=& to&&
&a href=&#&&Show Config&/a&
Force to Chinese: &input id=&date-range3&size=&30& value=&&&
&a href=&#&&Show Config&/a&
language:'cn'
Force to English: &input id=&date-range4&size=&30& value=&&&
&a href=&#&&Show Config&/a&
language:'en'
Sticky months: &input id=&date-range17&size=&30& value=&&&
&a href=&#&&Show Config&/a&
stickyMonths: true,
startDate: '',
endDate: ''
$(function()
$('a.show-option').click(function(evt)
evt.preventDefault();
$(this).siblings('.options').slideToggle();
运行效果如下图所示：
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：995次
排名：千里之外
(3)(2)(1)(2)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'基于daterangepicker日历插件使用参数注意的问题
投稿：jingxian
字体：[ ] 类型：转载 时间：
下面小编就为大家带来一篇基于daterangepicker日历插件使用参数注意的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
显示具体时间时分秒：
timePicker设置为true，//有些资料写的pickerTime不太对
重点大坑：修改时间默认展示格式,把fomat写在locale中，网上很多资料说直接写在daterangepicker属性中，这样是不生效的。
起止时间可以设置为具体年月日也可以生成当前日期（new Date()& 或者 moment（）【moment（）方法为moment.js获取当前时间的函数】）
$(“#dateid”).daterangepicker({
　　　　　　startDate: moment(),// '',
maxDate:new Date(),
endDate: moment(),//new Date(),
dateLimit : {
}, //起止时间的最大间隔
timePicker : true, //是否显示小时和分钟
timePickerIncrement : 1, //时间的增量，单位为分钟
timePicker24Hour : true, //是否使用24小时制来显示时间
locale: {//用来设置默认时间显示格式,各个按钮空间的中文显示
format: 'YYYY/MM/DD HH:mm:ss',
applyLabel: '确认',
cancelLabel: '取消',
fromLabel: '从',
toLabel: '到',
weekLabel: 'W',
customRangeLabel: '选择时间',
daysOfWeek:["日","一","二","三","四","五","六"],
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十 一月","十二月"],
range: {//设置快捷区间控件,不同的时间段
"近期": ['',new Date()]
}, function (start, end, label) {
alert('A date range was chosen: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
以上这篇基于daterangepicker日历插件使用参数注意的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具10:41 提问
bootstrap daterangepicker修改视图
daterangepicker 视图怎么修改成年月显示而不是显示年月日。最终做成这种结果
按赞数排序
这个问题解决了吗，我也遇到了
其他相关推荐这个日期范围选择器组件引导创建一个，用户可以选择一个日期范围。
如果没有选择调用时，它将呈现出两个日历从选择开始日期和结束日期。或者，你可以提供一系列的日期范围，用户可以从相反的选择从日历上的日期选择。如果连接到一个文本输入，选择的日期将插入文本框。否则，你可以接受的选择提供一个自定义回调函数。
构件也可以被用来作为通过设置singledatepicker选择单个日期选择器
基本用法：
&type=&text/javascript&&src=&jquery.js&&&type=&text/javascript&&src=&moment.js&&&type=&text/javascript&&src=&daterangepicker.js&&&rel=&stylesheet&&type=&text/css&&href=&bootstrap.css&&&&rel=&stylesheet&&type=&text/css&&href=&daterangepicker-bs3.css&&&&type=&text/javascript&&$(document).ready(function()&{&&&$('input[name=&daterange&]').daterangepicker();&});&&
也许你会喜欢和关注与本文内容高度相关的文章：
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）}