jQuery date range picker analysis

jQuery Date Range Picker is a jQuery date picker plug-in that allows users to select a date and time range. The entire date picker plug-in uses CSS to render styles, and it is very easy to customize the skin using CSS. And the browser compatibility is very good and supports multiple time formats.

View the demo Download the source code

Prepare

Use the date picker plug-in Requires support for jQuery 1.3.2+ and Moment 2.2.0+.

<link rel="stylesheet" href="css/daterangepicker.css" rel="external nofollow" /> 
<script src="js/moment.min.js"></script> 
<script src="js/jquery.daterangepicker.js"></script>

HTML structure

Add the following html structure where the date picker needs to be placed, which is an input box.

<input type="text" id="datepicker" value="">

Calling the plug-in

Calling the jQuery Date Range Picker plug-in is very simple, just like other common jQuery plug-ins:

$('#datepicker').dateRangePicker(option);

Configuration parameters

The default configuration parameters of this date picker are as follows:

{ 
 format: 'YYYY-MM-DD', 
 separator: ' to ', 
 language: 'auto', 
 startOfWeek: 'sunday',// or monday 
 getValue: function() 
 { 
  return this.value; 
 }, 
 setValue: function(s) 
 { 
  this.value = s; 
 }, 
 startDate: false, 
 endDate: false, 
 minDays: 0, 
 maxDays: 0, 
 showShortcuts: true, 
 time: { 
  enabled: false 
 }, 
 shortcuts: 
 { 
  //'prev-days': [1,3,5,7], 
  'next-days': [3,5,7], 
  //'prev' : ['week','month','year'], 
  'next' : ['week','month','year'] 
 }, 
 customShortcuts : [], 
 inline:false, 
 container: 'body', 
 alwaysOpen:false, 
 singleDate:false, 
 batchMode:false, 
 beforeShowDay: [function], 
 daypAttrs: [], 
 dayTdAttrs: [], 
 applyBtnClass: '' 
}

format (String): Moment’s date format. Click here to view the Moment documentation.

separator (String): The separator between date strings.

language (String): The predefined languages ​​are "en" and "cn". You can customize the language using this parameter. It can also be set to "auto" to let the browser detect the language itself.

startOfWeek (String): "sunday" or "monday".

getValue (Function): This function is called when getting the date range from the DOM element, and the context of the function is set to the datepicker DOM.

setValue (Function): This function is called when writing a date range to a DOM element.

startDate (String or false): Define the earliest date allowed by the user, the format is the same as format.

endDate (String or false): Define the last date allowed by the user, the format is the same as format.

minDays (Number): This parameter defines the minimum number of days in the date range. If set to 0, it means there is no limit to the minimum number of days.

maxDays (Number): This parameter defines the maximum number of days in the date range. If set to 0, it means there is no limit to the maximum number of days.

showShortcuts (Boolean): Mr. or hide the shortcuts area.

time (Object): If this parameter is allowed, a time range selection will be added.

shortcuts (Object): Define shortcut key buttons.

customShortcuts (Array): Define custom shortcut keys buttons.

inline (Boolean): Use inline mode to render the date picker instead of overlay mode. If set to true, the container parameters must be set together.

container (String, css selector || DOM Object): The date selector DOM element to be rendered.

alwaysOpen (Boolean): If using inline mode, you may want to render the date picker when the page loads. When this parameter is set to true, the "close" button will be hidden.

singleDate (Boolean): Set to true to select a single date.

batchMode (false / 'week' / 'month'): Automatic batch processing mode.

Events

Three events will be triggered when the date picker selects a date range in the DOM.

$('#datepicker') 
.dateRangePicker() 
.bind('datepicker-change',function(event,obj) 
{ 
 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" 
 // } 
}) 
.bind('datepicker-apply',function(event,obj) 
{ 
 console.log(obj); 
}) 
.bind('datepicker-close',function() 
{ 
 console.log('close'); 
});

API

After you call $(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 
 .clear(); // clear date range 
 .close(); // close date range picker overlay 
 .open(); // open date range picker overlay 
 .destroy(); // destroy all date range picker related things

Project address: https://github.com/longbill/jquery-date-range-picker

Related recommendations:

A jQuery date range selector usage tutorial

jQuery UI date picker Datepicker detailed explanation

React Native open source time date picker component Detailed explanation

The above is the detailed content of jQuery date range picker analysis. For more information, please follow other related articles on the PHP Chinese website!