Add onDayClick event

Author: Mds92

demo/Samples1.html

@@ -235,7 +235,7 @@ <h3>InLine</h3>
     $('#fromDateSegment').MdPersianDateTimePicker({
       disableAfterDate: new Date(),
       targetTextSelector: '#inputFromDate',
-      targetDateSelector: '#fromdate',
+      targetDateSelector: '#from-date',
       isGregorian: false,
       enableTimePicker: false,
       englishNumber: false

demo/SamplesToDebug.html

@@ -5,17 +5,14 @@
   <meta charset="utf-8" />
   <title>MD Persian DateTime To Debug</title>
 
-	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
-		integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 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/popper.js@1.16.0/dist/umd/popper.min.js"
-		integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-		crossorigin="anonymous"></script>
-	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
-		integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
-		crossorigin="anonymous"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
+    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" 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/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
+    crossorigin="anonymous"></script>
 
   <link rel="stylesheet" href="demo.css" />
   <link rel="stylesheet" href="../src/jquery.md.bootstrap.datetimepicker.style.css" />
@@ -40,18 +37,23 @@ <h2>Simple</h2>
   <script src="../dist/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script>
 
   <script type="text/javascript">
-      $("#dt_class").MdPersianDateTimePicker({
-        targetDateSelector: "#showDate_class",
-        targetTextSelector: "#inputDate3",
-        textFormat: " dddd dd MMMM yyyy ",
-        isGregorian: false,
-        modalMode: false,
-        englishNumber: false,
-        selectedDateToShow: new Date(2020, 10, 01),
-        calendarViewOnChange: function(param1){
-          console.log(param1);
-        }
-      });
+    $("#dt_class").MdPersianDateTimePicker({
+      targetDateSelector: "#showDate_class",
+      targetTextSelector: "#inputDate3",
+      textFormat: " dddd dd MMMM yyyy ",
+      isGregorian: false,
+      modalMode: false,
+      englishNumber: false,
+      enableTimePicker: true,
+      selectedDate: new Date(2020, 10, 01), // initial value
+      selectedDateToShow: new Date(2020, 10, 01),
+      calendarViewOnChange: function (param1) {
+        console.log('calendarViewOnChange', param1);
+      },
+      onDayClick: function (param1) {
+        console.log('onDayClick', param1);
+      }
+    });
   </script>
 
   <br><br>

dist/jquery.md.bootstrap.datetimepicker.js

@@ -1,6 +1,6 @@
 {
   "name": "md.bootstrappersiandatetimepicker",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "description": "Persian Date Time Picker with jQuery 3+ & Bootstrap 4+",
   "license": "MIT",
   "moduleResolution": "node",
@@ -16,20 +16,20 @@
   },
   "homepage": "https://github.com/Mds92/MD.BootstrapPersianDateTimePicker",
   "dependencies": {
-    "@popperjs/core": "^2.8.5",
+    "@popperjs/core": "^2.9.2",
     "bootstrap": "^4.5.3",
-    "jquery": "^3.5.1"
+    "jquery": "^3.6.0"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.5",
-    "css-loader": "^5.0.1",
+    "css-loader": "^5.2.4",
     "extract-text-webpack-plugin": "^3.0.2",
     "jshint": "^2.12.0",
     "jshint-loader": "^0.8.4",
-    "mini-css-extract-plugin": "^1.3.3",
+    "mini-css-extract-plugin": "^1.6.0",
     "style-loader": "^2.0.0",
-    "webpack": "^5.12.2",
-    "webpack-cli": "^4.3.1",
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0",
     "webpack-dev-server": "^3.11.1",
     "webpack-fix-style-only-entries": "^0.6.0",
     "webpack-merge": "^5.7.3"

dist/jquery.md.bootstrap.datetimepicker.js.map

@@ -1,6 +1,6 @@
 /*
  * Bootstrap 4+ Persian Date Time Picker jQuery Plugin
- * version : 3.10.1
+ * version : 3.11.0
  * https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
  *
  *
@@ -1743,15 +1743,26 @@
   // #region Events
 
   // کلیک روی روزها
-  $(document).on('click', mdDatePickerContainerSelector + ' [data-day]', function () {
+  $(document).on('click', mdDatePickerContainerSelector + ' [data-day]', function (e) {
     var $this = $(this),
       disabled = $this.attr('disabled'),
       dateNumber = Number($this.attr('data-number')),
       setting = getSetting1($this),
       selectedDateJson = setting.selectedDate == undefined ? undefined : getDateTimeJson1(setting.selectedDate),
       selectedDateToShow = getClonedDate(setting.selectedDateToShow),
       selectedDateToShowJson = selectedDateToShow == undefined ? undefined : getDateTimeJson1(selectedDateToShow);
-    if (disabled) return;
+    if (disabled) {
+      if (setting.onDayClick != undefined)
+        setting.onDayClick({
+          selectedDate: setting.selectedDate,
+          disabled,
+          event: e,
+          selectedDateToShow,
+          rangeSelectorStartDate: setting.rangeSelectorStartDate,
+          rangeSelectorEndDate: setting.rangeSelectorEndDate,
+        });
+      return;
+    }
     selectedDateToShow = getDateTime4(dateNumber, selectedDateToShow, setting);
     if (setting.rangeSelector) { // اگر رنج سلکتور فعال بود
       if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) {
@@ -1810,6 +1821,16 @@
     } else {
       updateCalendarHtml1($this, setting);
     }
+    if (setting.onDayClick != undefined)
+      setting.onDayClick({
+        rangeSelector: setting.rangeSelector,
+        selectedDate: setting.selectedDate,
+        disabled,
+        event: e,
+        selectedDateToShow,
+        rangeSelectorStartDate: setting.rangeSelectorStartDate,
+        rangeSelectorEndDate: setting.rangeSelectorEndDate,
+      });
   });
 
   // هاور روی روزها
@@ -1860,10 +1881,8 @@
     setting.selectedDateToShow = getClonedDate(selectedDateToShow);
     setSetting1($this, setting);
     updateCalendarHtml1($this, setting);
-    if (setting.calendarViewOnChange != undefined) {
-      // $this.trigger('md.calendarViewOnChange', setting.selectedDateToShow);
+    if (setting.calendarViewOnChange != undefined)
       setting.calendarViewOnChange(setting.selectedDateToShow);
-    }
   });
 
   // عوض کردن ساعت
@@ -1983,7 +2002,7 @@
             dateFormat: '',
             isGregorian: false,
             inLine: false,
-            selectedDate: undefined,
+            selectedDate: undefined, // initial value
             selectedDateToShow: new Date(),
             monthsToShow: [0, 0],
             yearOffset: 15,
@@ -1998,7 +2017,9 @@
             rangeSelector: false,
             rangeSelectorStartDate: undefined,
             rangeSelectorEndDate: undefined,
-            modalMode: false
+            modalMode: false,
+            calendarViewOnChange: () => {},
+            onDayClick: () => {}
           }, options);
         $this.attr(mdDatePickerFlag, '');
         if (setting.targetDateSelector) {

dist/jquery.md.bootstrap.datetimepicker.style.css

@@ -64,7 +64,7 @@ module.exports = {
       banner: `
 Bootstrap 4+ Persian Date Time Picker jQuery Plugin
 https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
-version : 3.10.1
+version : 3.11.0
 Written By Mohammad Dayyan, Mordad 1397 - 1400
 mds.soft@gmail.com - @mdssoft