Skip to content

Commit 36e4705

Browse files
Mds92Mds92
committed
Merge branch 'master-bs4' of https://github.com/Mds92/MD.BootstrapPersianDateTimePicker into master-bs4
2 parents 3c8cd10 + 4e29c52 commit 36e4705

7 files changed

Lines changed: 114 additions & 8 deletions

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ Name | Values | Description | Sample
5454
**inLine** | [false], true | Is date time picker in line
5555
**modalMode** | [false], true | Open in modal mode, suitable for smart phones
5656
**selectedDate** | [undefined], new Date() | Selected date as JavaScript Date object | new Date('2018/9/30')
57+
**selectedRangeDate** | Array: Date[] | Selected range date as JavaScript Date object | [new Date('2020/8/5'), new Date('2020/8/15')]
5758
**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]
5859
**yearOffset** | Number | Number of years to select in year selector | 30
5960
**holiDays** | Array: Date[] | Array of holidays to show in date time picker as holiday | [new Date(), new Date(2017, 3, 2)]

‎demo/RangeSelector.html‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Persian DateTime</title>
7+
8+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
9+
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
10+
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
11+
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
12+
</script>
13+
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
14+
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
15+
</script>
16+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
17+
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
18+
</script>
19+
20+
<link rel="stylesheet" href="demo.css" />
21+
<link rel="stylesheet" href="../src/jquery.md.bootstrap.datetimepicker.style.css" />
22+
<!-- <link rel="stylesheet" href="../dist/jquery.md.bootstrap.datetimepicker.style.css" /> -->
23+
</head>
24+
25+
<body>
26+
<div class="container">
27+
<h1>Range Selector</h1>
28+
<hr>
29+
<div class="row">
30+
<div class="col-sm-6">
31+
<pre>
32+
$('#date3-1').MdPersianDateTimePicker({
33+
targetTextSelector: '#inputDate3-1',
34+
monthsToShow: [1, 1],
35+
selectedDate: new Date(2020, 6, 20),
36+
selectedRangeDate: [new Date(2020, 6, 20), new Date(2020, 7, 10)],
37+
rangeSelector: true
38+
});
39+
</pre>
40+
<div class="input-group">
41+
<div class="input-group-prepend">
42+
<span class="input-group-text cursor-pointer" id="date3-1">Icon</span>
43+
</div>
44+
<input type="text" id="inputDate3-1" class="form-control"
45+
placeholder="DateTimePicker Range Selector With Multiple Months" aria-label="date3-1"
46+
aria-describedby="date3-1">
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
52+
<script src="../src/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script>
53+
<!-- <script src="../dist/jquery.md.bootstrap.datetimepicker.js" type="text/javascript"></script> -->
54+
55+
<script type="text/javascript">
56+
$('#date3-1').MdPersianDateTimePicker({
57+
targetTextSelector: '#inputDate3-1',
58+
monthsToShow: [1, 1],
59+
selectedDate: new Date(2020, 6, 20),
60+
selectedRangeDate: [new Date(2020, 6, 20), new Date(2020, 7, 10)],
61+
rangeSelector: true
62+
});
63+
</script>
64+
65+
<br><br>
66+
</body>
67+
68+
</html>

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

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/jquery.md.bootstrap.datetimepicker.js‎

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* Bootstrap 4+ Persian Date Time Picker jQuery Plugin
3-
* version : 3.7.4
3+
* version : 3.9.0
44
* https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
55
*
66
*
@@ -579,6 +579,36 @@
579579
}
580580
}
581581

582+
function setSelectedRangeData(setting) {
583+
var $targetDate = $(setting.targetTextSelector),
584+
startDateTimeObject = setting.selectedRangeDate[0],
585+
endDateTimeObject = setting.selectedRangeDate[1];
586+
587+
if (!startDateTimeObject)
588+
throw new Error(`Start Date of '${setting.targetTextSelector}' is not valid for range selector`);
589+
if (!endDateTimeObject)
590+
throw new Error(`End Date of '${setting.targetTextSelector}' is not valid for range selector`);
591+
592+
setting.selectedDate = startDateTimeObject;
593+
setting.rangeSelectorStartDate = startDateTimeObject;
594+
setting.rangeSelectorEndDate = endDateTimeObject;
595+
596+
if ($targetDate.length > 0) {
597+
switch ($targetDate[0].tagName.toLowerCase()) {
598+
case 'input':
599+
$targetDate.val(getSelectedDateTimeTextFormatted(setting));
600+
triggerChangeCalling = true;
601+
$targetDate.trigger('change');
602+
break;
603+
default:
604+
$targetDate.text(getSelectedDateTimeTextFormatted(setting));
605+
triggerChangeCalling = true;
606+
$targetDate.trigger('change');
607+
break;
608+
}
609+
}
610+
}
611+
582612
function isNumber(n) {
583613
return !isNaN(parseFloat(n)) && isFinite(n);
584614
}
@@ -1733,6 +1763,7 @@
17331763

17341764
if (setting.rangeSelector) { // اگر رنج سلکتور فعال بود
17351765
if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) {
1766+
setting.selectedRangeDate = [];
17361767
setting.rangeSelectorStartDate = undefined;
17371768
setting.rangeSelectorEndDate = undefined;
17381769
$this.parents('table:last').find('td.selected-range-days-start-end,td.selected-range-days')
@@ -1751,6 +1782,7 @@
17511782
}
17521783
setSetting1($this, setting);
17531784
if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) {
1785+
setting.selectedRangeDate = [getClonedDate(setting.rangeSelectorStartDate), getClonedDate(setting.rangeSelectorEndDate)];
17541786
if (!setting.inLine) {
17551787
hidePopover($(mdDatePickerElementSelector));
17561788
} else updateCalendarHtml1($this, setting);
@@ -1930,7 +1962,7 @@
19301962
$('html').on('click', function (e) {
19311963
if (triggerStart) return;
19321964
var $target = $(e.target),
1933-
$popoverDescriber = getPopoverDescriber($target);
1965+
$popoverDescriber = getPopoverDescriber($target);
19341966
if ($popoverDescriber.length >= 1 || isWithinMdModal($target) || isCalendarOpen($target)) return;
19351967
hidePopover($(mdDatePickerElementSelector));
19361968
});
@@ -2008,7 +2040,10 @@
20082040
var uniqeId = new Date().getTime();
20092041
$this.data(mdPluginName, setting);
20102042
$this.attr('data-uniqueid', uniqeId);
2011-
if (setting.selectedDate != undefined) {
2043+
if (setting.rangeSelector && setting.selectedRangeDate != undefined) {
2044+
setSelectedRangeData(setting);
2045+
triggerChangeCalling = false;
2046+
} else if (setting.selectedDate != undefined) {
20122047
setSelectedData(setting);
20132048
triggerChangeCalling = false;
20142049
}
@@ -2142,6 +2177,7 @@
21422177
setting = getSetting2($this);
21432178
if (setting.rangeSelector) {
21442179
setting.selectedDate = startDateTimeObject;
2180+
setting.selectedRangeDate = [startDateTimeObject, endDateTimeObject];
21452181
setting.rangeSelectorStartDate = startDateTimeObject;
21462182
setting.rangeSelectorEndDate = endDateTimeObject;
21472183
setSetting1($this, setting);
@@ -2169,6 +2205,7 @@
21692205
var $this = $(this),
21702206
setting = getSetting2($this);
21712207
setting.selectedDate = undefined;
2208+
setting.selectedRangeDate = [];
21722209
setting.rangeSelectorStartDate = undefined;
21732210
setting.rangeSelectorEndDate = undefined;
21742211
setSetting1($this, setting);

‎webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ module.exports = {
7676
banner: `
7777
Bootstrap 4+ Persian Date Time Picker jQuery Plugin
7878
https://github.com/Mds92/MD.BootstrapPersianDateTimePicker
79-
version : 3.8.0
79+
version : 3.9.0
8080
Written By Mohammad Dayyan, Mordad 1397 - 1399
8181
mds.soft@gmail.com - @mdssoft
8282

0 commit comments

Comments
 (0)