add a function: updateRanges(Object)

danbeddows · Sep 29, 2022 · 32608b3 · 32608b3
1 parent bf14983
commit 32608b3
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -164,7 +164,7 @@ new DateRangePicker(bindElement, options, callback);
 See [datetime example page](/examples/datetime-example.html)
 
 ## Extra
-## A Dark Version CSS
+### A Dark Version CSS
 ![Dark Data Time Range Picker](/examples/vanilla-datatime-range-picker-dark.png)
 
 change
@@ -178,6 +178,13 @@ to
 
 See [datetime dark example page](/examples/datetime-example-dark.html)</a>.
 
+### Dynamic DataRange Change (since 0.2.0)
+you can change dateranges dynamically.
+with extra function ```updateRanges(Object)```
+
+See [datetime example page](/examples/datetime-example.html)</a>.
+
+
 ## Special Thanks
  Special thanks to [Dan Grossman](http://www.dangrossman.info/)
 

diff --git a/dist/vanilla-datetimerange-picker.js b/dist/vanilla-datetimerange-picker.js
@@ -1710,8 +1710,68 @@ var DateRangePicker;
             }
            delete this.container;
            delete this.element.dataset;
-        }
+        },
+
+        updateRanges: function(newRanges){
+            if (typeof newRanges === 'object') {
+                jq.off(this.container.querySelector('.ranges'), 'click', 'li', this.clickRangeProxy);
+                this.ranges = [];
+                let rangesKeys = Object.keys(newRanges);
+                for(let i = 0; i < rangesKeys.length; ++i){
+                    let range = rangesKeys[i];
+
+                    if (typeof newRanges[range][0] === 'string')
+                        start = moment(newRanges[range][0], this.locale.format);
+                    else
+                        start = moment(newRanges[range][0]);
+
+                    if (typeof newRanges[range][1] === 'string')
+                        end = moment(newRanges[range][1], this.locale.format);
+                    else
+                        end = moment(newRanges[range][1]);
+
+                    // If the start or end date exceed those allowed by the minDate or maxSpan
+                    // options, shorten the range to the allowable period.
+                    if (this.minDate && start.isBefore(this.minDate))
+                        start = this.minDate.clone();
+
+                    var maxDate = this.maxDate;
+                    if (this.maxSpan && maxDate && start.clone().add(this.maxSpan).isAfter(maxDate))
+                        maxDate = start.clone().add(this.maxSpan);
+                    if (maxDate && end.isAfter(maxDate))
+                        end = maxDate.clone();
+
+                    // If the end of the range is before the minimum or the start of the range is
+                    // after the maximum, don't display this range option at all.
+                    if ((this.minDate && end.isBefore(this.minDate, this.timepicker ? 'minute' : 'day'))
+                      || (maxDate && start.isAfter(maxDate, this.timepicker ? 'minute' : 'day')))
+                        continue;
+
+                    //Support unicode chars in the range names.
+                    var elem = document.createElement('textarea');
+                    elem.innerHTML = range;
+                    var rangeHtml = elem.value;
+
+                    this.ranges[rangeHtml] = [start, end];
+                }
+
+                var list = '<ul>';
+                for (range in this.ranges) {
+                    list += '<li data-range-key="' + range + '">' + range + '</li>';
+                }
+                if (this.showCustomRangeLabel) {
+                    list += '<li data-range-key="' + this.locale.customRangeLabel + '">' + this.locale.customRangeLabel + '</li>';
+                }
+                list += '</ul>';
+                let rangeNode = this.container.querySelector('.ranges');
+                rangeNode.removeChild(rangeNode.firstChild);
+                rangeNode.insertAdjacentHTML('afterbegin', list);
+            }
 
+            this.clickRangeProxy = function (e) { this.clickRange(e); }.bind(this);
+            jq.on(this.container.querySelector('.ranges'), 'click', 'li', this.clickRangeProxy);
+        }
+
     };
 
     // alternate jquery function (subset)
@@ -1826,4 +1886,4 @@ var DateRangePicker;
             }
         },
     };
-})();
+})();
diff --git a/examples/datetime-example.html b/examples/datetime-example.html
@@ -8,11 +8,19 @@
     </head>
     <body>
         <div><input type="text" id="datetimerange-input1" size="40" style="text-align:center"></div>
+        <div><input type="button" value="change range" onclick='rangeChange();'></div>
         <script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js" type="text/javascript"></script>
         <script src="https://cdn.jsdelivr.net/gh/alumuko/vanilla-datetimerange-picker@latest/dist/vanilla-datetimerange-picker.js"></script>
         <script>
+            var drp;
+            var rangeChange = function(){
+                drp.updateRanges({
+                    'Last 3 Days': [moment().subtract(2, 'days').startOf('day'), moment().endOf('day')],
+                    'This Year': [moment().startOf('year').startOf('day'), moment().endOf('year').endOf('day')],
+                });
+            };
             window.addEventListener("load", function (event) {
-                let drp = new DateRangePicker('datetimerange-input1',
+                drp = new DateRangePicker('datetimerange-input1',
                     {
                         //startDate: '2000-01-01',
                         //endDate: '2000-01-03',
@@ -32,7 +40,7 @@
                         alwaysShowCalendars: true,
                         //opens: 'center',
                         //drops: 'up',
-                        //singleDatePicker: true,
+                        singleDatePicker: true,
                         //autoApply: true,
                         //linkedCalendars: false,
                         //isInvalidDate: function(m){