Home >Web Front-end >JS Tutorial >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!