Skip to content

Commit 4e29c52

Browse files
Mohammad DayyanMohammad Dayyan
authored andcommitted
add selectedRangeDate property
1 parent 0da2550 commit 4e29c52

8 files changed

Lines changed: 123 additions & 17 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.

package.json

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "md.bootstrappersiandatetimepicker",
3-
"version": "3.8.0",
3+
"version": "3.9.0",
44
"description": "Persian Date Time Picker with jQuery 3+ & Bootstrap 4+",
55
"license": "MIT",
66
"moduleResolution": "node",
@@ -17,20 +17,20 @@
1717
"homepage": "https://github.com/Mds92/MD.BootstrapPersianDateTimePicker",
1818
"dependencies": {
1919
"@popperjs/core": "^2.4.4",
20-
"bootstrap": "^4.5.0",
20+
"bootstrap": "^4.5.2",
2121
"jquery": "^3.4.1",
22-
"npm": "^6.14.6"
22+
"npm": "^6.14.7"
2323
},
2424
"devDependencies": {
25-
"@types/jquery": "^3.5.0",
25+
"@types/jquery": "^3.5.1",
2626
"css-loader": "^1.0.1",
2727
"extract-text-webpack-plugin": "^4.0.0-beta.0",
28-
"jshint": "^2.11.1",
28+
"jshint": "^2.12.0",
2929
"jshint-loader": "^0.8.4",
3030
"mini-css-extract-plugin": "^0.4.5",
3131
"style-loader": "^0.23.1",
3232
"uglifyjs-webpack-plugin": "^1.3.0",
33-
"webpack": "^4.40.2",
33+
"webpack": "^4.44.1",
3434
"webpack-cli": "^3.3.12",
3535
"webpack-dev-server": "^3.11.0",
3636
"webpack-fix-style-only-entries": "0.0.4",

src/jquery.md.bootstrap.datetimepicker.js

Lines changed: 43 additions & 6 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
*
@@ -535,9 +535,9 @@
535535
function getSelectedDateTimeFormatted(setting) {
536536
if (setting.selectedDate == undefined) return '';
537537
if (setting.rangeSelector && setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined)
538-
return getDateTimeString(getDateTimeJson1(setting.rangeSelectorStartDate), setting.dateFormat, setting.isGregorian, true) + ' - ' +
539-
getDateTimeString(getDateTimeJson1(setting.rangeSelectorEndDate), setting.dateFormat, setting.isGregorian, true);
540-
return getDateTimeString(getDateTimeJson1(setting.selectedDate), setting.dateFormat, setting.isGregorian, true);
538+
return getDateTimeString(getDateTimeJson1(setting.rangeSelectorStartDate), setting.dateFormat, setting.isGregorian, setting.englishNumber) + ' - ' +
539+
getDateTimeString(getDateTimeJson1(setting.rangeSelectorEndDate), setting.dateFormat, setting.isGregorian, setting.englishNumber);
540+
return getDateTimeString(getDateTimeJson1(setting.selectedDate), setting.dateFormat, setting.isGregorian, setting.englishNumber);
541541
}
542542

543543
function setSelectedData(setting) {
@@ -573,6 +573,36 @@
573573
}
574574
}
575575

576+
function setSelectedRangeData(setting) {
577+
var $targetDate = $(setting.targetTextSelector),
578+
startDateTimeObject = setting.selectedRangeDate[0],
579+
endDateTimeObject = setting.selectedRangeDate[1];
580+
581+
if (!startDateTimeObject)
582+
throw new Error(`Start Date of '${setting.targetTextSelector}' is not valid for range selector`);
583+
if (!endDateTimeObject)
584+
throw new Error(`End Date of '${setting.targetTextSelector}' is not valid for range selector`);
585+
586+
setting.selectedDate = startDateTimeObject;
587+
setting.rangeSelectorStartDate = startDateTimeObject;
588+
setting.rangeSelectorEndDate = endDateTimeObject;
589+
590+
if ($targetDate.length > 0) {
591+
switch ($targetDate[0].tagName.toLowerCase()) {
592+
case 'input':
593+
$targetDate.val(getSelectedDateTimeTextFormatted(setting));
594+
triggerChangeCalling = true;
595+
$targetDate.trigger('change');
596+
break;
597+
default:
598+
$targetDate.text(getSelectedDateTimeTextFormatted(setting));
599+
triggerChangeCalling = true;
600+
$targetDate.trigger('change');
601+
break;
602+
}
603+
}
604+
}
605+
576606
function isNumber(n) {
577607
return !isNaN(parseFloat(n)) && isFinite(n);
578608
}
@@ -1727,6 +1757,7 @@
17271757

17281758
if (setting.rangeSelector) { // اگر رنج سلکتور فعال بود
17291759
if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) {
1760+
setting.selectedRangeDate = [];
17301761
setting.rangeSelectorStartDate = undefined;
17311762
setting.rangeSelectorEndDate = undefined;
17321763
$this.parents('table:last').find('td.selected-range-days-start-end,td.selected-range-days')
@@ -1745,6 +1776,7 @@
17451776
}
17461777
setSetting1($this, setting);
17471778
if (setting.rangeSelectorStartDate != undefined && setting.rangeSelectorEndDate != undefined) {
1779+
setting.selectedRangeDate = [getClonedDate(setting.rangeSelectorStartDate), getClonedDate(setting.rangeSelectorEndDate)];
17481780
if (!setting.inLine) {
17491781
hidePopover($(mdDatePickerElementSelector));
17501782
} else updateCalendarHtml1($this, setting);
@@ -1924,7 +1956,7 @@
19241956
$('html').on('click', function (e) {
19251957
if (triggerStart) return;
19261958
var $target = $(e.target),
1927-
$popoverDescriber = getPopoverDescriber($target);
1959+
$popoverDescriber = getPopoverDescriber($target);
19281960
if ($popoverDescriber.length >= 1 || isWithinMdModal($target) || isCalendarOpen($target)) return;
19291961
hidePopover($(mdDatePickerElementSelector));
19301962
});
@@ -2002,7 +2034,10 @@
20022034
var uniqeId = new Date().getTime();
20032035
$this.data(mdPluginName, setting);
20042036
$this.attr('data-uniqueid', uniqeId);
2005-
if (setting.selectedDate != undefined) {
2037+
if (setting.rangeSelector && setting.selectedRangeDate != undefined) {
2038+
setSelectedRangeData(setting);
2039+
triggerChangeCalling = false;
2040+
} else if (setting.selectedDate != undefined) {
20062041
setSelectedData(setting);
20072042
triggerChangeCalling = false;
20082043
}
@@ -2136,6 +2171,7 @@
21362171
setting = getSetting2($this);
21372172
if (setting.rangeSelector) {
21382173
setting.selectedDate = startDateTimeObject;
2174+
setting.selectedRangeDate = [startDateTimeObject, endDateTimeObject];
21392175
setting.rangeSelectorStartDate = startDateTimeObject;
21402176
setting.rangeSelectorEndDate = endDateTimeObject;
21412177
setSetting1($this, setting);
@@ -2163,6 +2199,7 @@
21632199
var $this = $(this),
21642200
setting = getSetting2($this);
21652201
setting.selectedDate = undefined;
2202+
setting.selectedRangeDate = [];
21662203
setting.rangeSelectorStartDate = undefined;
21672204
setting.rangeSelectorEndDate = undefined;
21682205
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)