Date Range Picker jQuery UI - Free Download Convenient Date Range Picker For jQuery UI - date-ranges-selector

Free Download Convenient Date Range Picker For jQuery UI – date-ranges-selector

By Posted on

This time I will share jQuery Plugin and tutorial about Convenient Date Range Picker For jQuery UI – date-ranges-selector, hope it will help you in programming stack.

Date Range Picker jQuery UI - Free Download Convenient Date Range Picker For jQuery UI - date-ranges-selector
File Size: 8.03 KB
Views Total: 6589
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

The date ranges selector plugin uses jQuery UI datepicker widget to create user-friendly date pickers for hotel/ticket booking apps.

How to use it:

1. Load the necessary jQuery library and jQuery UI’s files in your html document.

view source
1 <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/flick/jquery-ui.css">
2 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
3 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Load the date ranges selector plugin’s files in the document.

view source
1 <link rel="stylesheet" href="date-ranges-selector.css">
2 <script src="date-ranges-selector.js"></script>

3. Create a date range picker inside a container element you specify.

view source
1 <div id="date_ranges_container" class="date_ranges"> </div>
view source
1 $(function(){
2  
3   $("#date_ranges_container").datesRangesSelector();
4  
5 });

4. Customize the date range picker with the following options.

view source
01 $("#date_ranges_container").datesRangesSelector({
02  
03   // text for 'New Data Range' button
04   new_date_range_text : "+ Add a new date range",
05  
06   // prefix class
07   main_class_prefix : "drs",
08  
09   // max date
10   max_date: "+1Y",
11  
12   // date format
13   date_format : "D, dd/mm/yy",
14  
15   // adds an aditional selector to every range
16   selector : true,
17  
18   // selector name
19   selector_name : "appear",
20  
21   // selector options
22   selector_options : [ ["Display", "1"], ["Don't display", "0"] ],
23  
24   // uses timezone offsets
25   use_timezone_offset : true,
26  
27   // date begin placeholder
28   placeholder_date_begin : "Begin",
29  
30   // date end placeholder
31   placeholder_date_end : "End",
32  
33   // a fixed amount of ranges
34   initial_ranges : 0,
35  
36   // disable add/remove buttons
37   disable_add_remove: false
38    
39 });

5. API methods.

view source
01 // adds a new date range
02 $("#date_ranges_container").datesRangesSelector("addDateRange", {
03  
04   // begin/end date values in unixtime
05   date_begin: 1522800000,
06   date_end: 1522800000,
07  
08   // optional selector value
09   selector: 'selector'
10  
11 });
12  
13 // removes an existing date range
14 $("#date_ranges_container").datesRangesSelector("removeDateRange", POSITION);
15  
16 // removes all date ranges
17 $("#date_ranges_container").datesRangesSelector("removeAllDateRanges");
18  
19 // gets date ranges
20 $("#date_ranges_container").datesRangesSelector("getDateRanges");
21  
22 // disables date ranges
23 $("#date_ranges_container").datesRangesSelector("disable");
24  
25 // enables date ranges
26 $("#date_ranges_container").datesRangesSelector("enable");

6. Event handlers.

view source
01 $("#date_ranges_container").on('datesRangesSelector.rangeAdded', function(event, date_begin, date_end, selector) {
02   // triggred after adding a new date range
03 });
04  
05 $("#date_ranges_container").on('datesRangesSelector.rangeRemoved', function(event, position) {
06   // triggred after removing a date range
07 });
08  
09 $("#date_ranges_container").on('datesRangesSelector.allRangesRemoved', function(event, position) {
10   // triggred after removing all date ranges
11 });
12  
13 $("#date_ranges_container").on('datesRangesSelector.becameFull', function(event, date_begin, date_end, selector) {
14   // triggred after selecting
15 });
16  
17 $("#date_ranges_container").on('datesRangesSelector.becameEmpty', function(event) {
18   // triggred after the selector is empty
19 });

Changelog:

2019-03-31

  • Added initial_ranges and disable_add_remove options

2019-01-24

  • fixed offset bug

2018-11-08

  • Added custom placeholders

2018-09-14

  • fixed more gmt offset troubles

2018-09-13

  • minor timeoffset fix on getdate

2018-09-08

  • minor timeoffset fix

2018-07-02

  • Added max_date as a new option

2018-04-18

  • Added only_non_empty option to the getDateRanges method

This awesome jQuery plugin is developed by koopaconan. For more Advanced Usages, please check the demo page or visit the official website.

File Size: 5.73 KB
Views Total: 778
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Related posts: