简单实用的jQuery多语言日期时间范围选择器插件

演示  website 下载

这是一款可定制、跨浏览器多语言的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

会员登陆后即可下载资源文件。更多好用网站特效插件，请关注帝国模板之家。