网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款可定制、跨浏览器多语言的jQuery日期选择器插件,用户能够轻松地自定义(或预定义)日期范围选择器。
下载
# Yarn
$ yarn add jquery-date-range-picker
# NPM
$ npm install jquery-date-range-picker --save
使用方法:
1. 加载jquery库和moment.js插件文件
<script src="jquery-1.11.2.min.js"></script>
<script src="moment.min.js"></script>
2. 加载样式文件
<link rel="stylesheet" href="daterangepicker.css">
<script src="jquery.daterangepicker.js"></script>
3. 插件初始化
$('#SELECTOR').dateRangePicker();
4. 配置选项.
// Auto close
autoClose: false,
// The date format string used for Moment.
format: 'YYYY-MM-DD',
// The separator string used between date strings
separator: ' to ',
// pre-defined languages are "en" and "cn", you can define your own language then set this to the name of new language.
// You can also set this to "auto" to make it auto detect browser language.
language: 'auto',
// "sunday" or "monday"
startOfWeek: 'sunday',
// This function is called when get date range string from DOM
// When it is called, the context of this function is set to the datepicker DOM
getValue: function() {
return $(this).val();
},
// This function is called when set date range string to DOM
setValue: function(s){
if(!$(this).attr('readonly') && !$(this).is(':disabled') && s != $(this).val()){
$(this).val(s);
}
},
// This string defines the earliest date which is allowed for the user, same format as `format`
startDate: false,
// This string defines the latest date which is allowed for the user, same format as `format`
endDate: false,
// If enabled adds time selection controls.
time: {
enabled: false
},
// This number defines the minimum days of the selected range
// if this is 0, means do not limit minimum days
minDays: 0,
// This number defines the maximum days of the selected range
// if this is 0, means do not limit maximum days
maxDays: 0,
// hide or show shortcuts area
showShortcuts: false,
// define the shortcuts buttons.
shortcuts:
{
//'prev-days': [1,3,5,7],
//'next-days': [3,5,7],
//'prev' : ['week','month','year'],
//'next' : ['week','month','year']
},
// define custom shortcut buttons.
customShortcuts : [],
// whether to render the date range picker dom in inline mode instead of overlay mode,
// if set to true, please set `container` too
inline:false,
// where should the date range picker dom should be renderred to
container:'body',
// if you use inline mode, you may want the date range picker widget to be renderred when the page loads set this to true will also hide the "close" button
alwaysOpen:false,
// choose a single date instead of a date range.
singleDate:false,
lookBehind: false,
// auto batch select mode
// false (default), week, month, week-range, month-range
batchMode: false,
duration: 200,
// If true, there will only be one previous and one next button.
// Clicking them will change both the months.
// This setting will have no effect if singleDate option is set to true
stickyMonths: false,
dayDivAttrs: [],
dayTdAttrs: [],
applyBtnClass: '',
// If true, it will show only one month instead of two months.
// You can select date range in the one month view.
// If this is set to 'auto', it will be changed to true if the screen width is lower than 480.
singleMonth: 'auto',
hoveringTooltip: function(days, startTime, hoveringTime)
{
return days > 1 ? days + ' ' + lang('days') : '';
},
// If show the top bar.
showTopbar: true,
// If true and if time is enabled, on choosing first enddate and than startdate, endtime and starttime will be swapped.
// If this configkey is false, only date will be swapped, time will stay constant.
// If time is disabled, this config key is not used.
swapTime: false,
// If this is true, you can only select second date after the first selected date.
selectForward: false,
// If this is true, you can only select second date before the first selected date.
selectBackward: false,
// If this is true, it will show week number of the year in the calendar.
showWeekNumbers: false,
// the function called to generate the week number. the first parameter will be the first day of a week
getWeekNumber: function(date) //date will be the first day of a week
{
return moment(date).format('w');
},
customOpenAnimation: null,
customCloseAnimation: null,
customArrowPrevSymbol: null,
customArrowNextSymbol: null,
monthSelect: false,
yearSelect: false
5. 事件.
$('#dom-id')
.dateRangePicker()
.on('datepicker-first-date-selected', function(event, obj)
{
/* This event will be triggered when first date is selected */
console.log(obj);
// obj will be something like this:
// {
// date1: (Date object of the earlier date)
// }
})
.on('datepicker-change',function(event,obj)
{
/* This event will be triggered when second date is selected */
console.log(obj);
// obj will be something like this:
// {
// date1: (Date object of the earlier date),
// date2: (Date object of the later date),
// value: "2013-06-05 to 2013-06-07"
// }
})
.on('datepicker-apply',function(event,obj)
{
/* This event will be triggered when user clicks on the apply button */
console.log(obj);
})
.on('datepicker-close',function()
{
/* This event will be triggered before date range picker close animation */
console.log('before close');
})
.on('datepicker-closed',function()
{
/* This event will be triggered after date range picker close animation */
console.log('after close');
})
.on('datepicker-open',function()
{
/* This event will be triggered before date range picker open animation */
console.log('before open');
})
.on('datepicker-opened',function()
{
/* This event will be triggered after date range picker open animation */
console.log('after open');
})
6. API 方法.
//after you called $(dom).dateRangePicker();
$(dom).data('dateRangePicker')
.setDateRange('2013-11-20','2013-11-25'); //set date range, two date strings should follow the `format` in config object, set the third argument to be `true` if you don't want this method to trigger a `datepicker-change` event.
.clear(); // clear date range
.close(); // close date range picker overlay
.open(); // open date range picker overlay
.destroy(); // destroy all date range picker related things
转载请注明来源:简单实用的jQuery多语言日期时间范围选择器插件
本文永久链接地址:https://www.moyouyouw.cn/code/667.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论