Merge branch 'master-bs4' of https://github.com/Mds92/MD.BootstrapPer…

…sianDateTimePicker into master-bs4
Mds92 · Sep 13, 2020 · 36e4705 · 36e4705
2 parents 3c8cd10 + 4e29c52
commit 36e4705
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -54,6 +54,7 @@ Name | Values | Description | Sample
 **inLine** | [false], true | Is date time picker in line 
 **modalMode** | [false], true | Open in modal mode, suitable for smart phones
 **selectedDate** | [undefined], new Date() | Selected date as JavaScript Date object | new Date('2018/9/30')
+**selectedRangeDate** | Array: Date[] | Selected range date as JavaScript Date object | [new Date('2020/8/5'), new Date('2020/8/15')]
 **monthsToShow** | Numeric array with 2 items, [0 ,0] | To show, number of month before and after selected date in date time picker, first item is for before month, second item is for after month | [1, 1]
 **yearOffset** | Number | Number of years to select in year selector | 30
 **holiDays** | Array: Date[] | Array of holidays to show in date time picker as holiday | [new Date(), new Date(2017, 3, 2)]

diff --git a/demo/RangeSelector.html b/demo/RangeSelector.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <title>Persian DateTime</title>
+
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
+    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
+    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
+    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
+  </script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
+    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
+  </script>
+
+  <link rel="stylesheet" href="demo.css" />
+  <link rel="stylesheet" href="../src/jquery.md.bootstrap.datetimepicker.style.css" />
+  <!-- <link rel="stylesheet" href="../dist/jquery.md.bootstrap.datetimepicker.style.css" /> -->
+</head>
+
+<body>
+  <div class="container">
+    <h1>Range Selector</h1>
+    <hr>
+    <div class="row">
+      <div class="col-sm-6">
+        <pre>
+  $('#date3-1').MdPersianDateTimePicker({
+    targetTextSelector: '#inputDate3-1',
+    monthsToShow: [1, 1],
+    selectedDate: new Date(2020, 6, 20),
+    selectedRangeDate: [new Date(2020, 6, 20), new Date(2020, 7, 10)],
+    rangeSelector: true
+  });
+        </pre>
+        <div class="input-group">
+          <div class="input-group-prepend">
+            <span class="input-group-text cursor-pointer" id="date3-1">Icon</span>
+          </div>
+          <input type="text" id="inputDate3-1" class="form-control"
+            placeholder="DateTimePicker Range Selector With Multiple Months" aria-label="date3-1"
+            aria-describedby="date3-1">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script src="../src/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script>
+  <!-- <script src="../dist/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script> -->
+
+  <script type="text/javascript">
+    $('#date3-1').MdPersianDateTimePicker({
+      targetTextSelector: '#inputDate3-1',
+      monthsToShow: [1, 1],
+      selectedDate: new Date(2020, 6, 20),
+      selectedRangeDate: [new Date(2020, 6, 20), new Date(2020, 7, 10)],
+      rangeSelector: true
+    });
+  </script>
+
+  <br><br>
+</body>
+
+</html>
diff --git a/dist/jquery.md.bootstrap.datetimepicker.js b/dist/jquery.md.bootstrap.datetimepicker.js
diff --git a/dist/jquery.md.bootstrap.datetimepicker.js.map b/dist/jquery.md.bootstrap.datetimepicker.js.map
diff --git a/dist/jquery.md.bootstrap.datetimepicker.style.css b/dist/jquery.md.bootstrap.datetimepicker.style.css
diff --git a/src/jquery.md.bootstrap.datetimepicker.js b/src/jquery.md.bootstrap.datetimepicker.js
@@ -1,6 +1,6 @@
 /*
  * Bootstrap 4+ Persian Date Time Picker jQuery Plugin
- * version : 3.7.4
+ * version : 3.9.0
  * https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
  *
  *
@@ -579,6 +579,36 @@
     }
   }
 
+  function setSelectedRangeData(setting) {
+    var $targetDate = $(setting.targetTextSelector),
+      startDateTimeObject = setting.selectedRangeDate[0],
+      endDateTimeObject = setting.selectedRangeDate[1];
+
+    if (!startDateTimeObject)
+      throw new Error(`Start Date of '${setting.targetTextSelector}' is not valid for range selector`);
+    if (!endDateTimeObject)
+      throw new Error(`End Date of '${setting.targetTextSelector}' is not valid for range selector`);
+
+    setting.selectedDate = startDateTimeObject;
+    setting.rangeSelectorStartDate = startDateTimeObject;
+    setting.rangeSelectorEndDate = endDateTimeObject;
+
+    if ($targetDate.length > 0) {
+      switch ($targetDate[0].tagName.toLowerCase()) {
+        case 'input':
+          $targetDate.val(getSelectedDateTimeTextFormatted(setting));
+          triggerChangeCalling = true;
+          $targetDate.trigger('change');
+          break;
+        default:
+          $targetDate.text(getSelectedDateTimeTextFormatted(setting));
+          triggerChangeCalling = true;
+          $targetDate.trigger('change');
+          break;
+      }
+    }
+  }
+
   function isNumber(n) {
     return !isNaN(parseFloat(n)) && isFinite(n);
   }
@@ -1733,6 +1763,7 @@
 
     if (setting.rangeSelector) { // اگر رنج سلکتور فعال بود
       if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) {
+        setting.selectedRangeDate = [];
         setting.rangeSelectorStartDate = undefined;
         setting.rangeSelectorEndDate = undefined;
         $this.parents('table:last').find('td.selected-range-days-start-end,td.selected-range-days')
@@ -1751,6 +1782,7 @@
       }
       setSetting1($this, setting);
       if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) {
+        setting.selectedRangeDate = [getClonedDate(setting.rangeSelectorStartDate), getClonedDate(setting.rangeSelectorEndDate)];
         if (!setting.inLine) {
           hidePopover($(mdDatePickerElementSelector));
         } else updateCalendarHtml1($this, setting);
@@ -1930,7 +1962,7 @@
   $('html').on('click', function (e) {
     if (triggerStart) return;
     var $target = $(e.target),
-      $popoverDescriber = getPopoverDescriber($target);    
+      $popoverDescriber = getPopoverDescriber($target);
     if ($popoverDescriber.length >= 1 || isWithinMdModal($target) || isCalendarOpen($target)) return;
     hidePopover($(mdDatePickerElementSelector));
   });
@@ -2008,7 +2040,10 @@
         var uniqeId = new Date().getTime();
         $this.data(mdPluginName, setting);
         $this.attr('data-uniqueid', uniqeId);
-        if (setting.selectedDate != undefined) {
+        if (setting.rangeSelector && setting.selectedRangeDate != undefined) {
+          setSelectedRangeData(setting);
+          triggerChangeCalling = false;
+        } else if (setting.selectedDate != undefined) {
           setSelectedData(setting);
           triggerChangeCalling = false;
         }
@@ -2142,6 +2177,7 @@
           setting = getSetting2($this);
         if (setting.rangeSelector) {
           setting.selectedDate = startDateTimeObject;
+          setting.selectedRangeDate = [startDateTimeObject, endDateTimeObject];
           setting.rangeSelectorStartDate = startDateTimeObject;
           setting.rangeSelectorEndDate = endDateTimeObject;
           setSetting1($this, setting);
@@ -2169,6 +2205,7 @@
         var $this = $(this),
           setting = getSetting2($this);
         setting.selectedDate = undefined;
+        setting.selectedRangeDate = [];
         setting.rangeSelectorStartDate = undefined;
         setting.rangeSelectorEndDate = undefined;
         setSetting1($this, setting);

diff --git a/webpack.config.js b/webpack.config.js
@@ -76,7 +76,7 @@ module.exports = {
       banner: `
 Bootstrap 4+ Persian Date Time Picker jQuery Plugin
 https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
-version : 3.8.0
+version : 3.9.0
 Written By Mohammad Dayyan, Mordad 1397 - 1399
 [email protected] - @mdssoft