Skip to content

Commit f37dea5

Browse files
Mds92Mds92
committed
Demo preparation
1 parent 7a85791 commit f37dea5

6 files changed

Lines changed: 84 additions & 25 deletions

File tree

‎demo/demo.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ <h2>Options</h2>
139139
<div class="row">
140140
<label class="col-5 col-form-label">groupId</label>
141141
<div class="col-7 pt-2">
142-
<input class="form-control form-control-sm" type="text" value="group1"
142+
<input class="form-control form-control-sm" type="text" value="group1" v-model="groupId"
143143
:readonly="toDateFromDate == '0'" v-on:change="optionChange('groupId', $event.target.value)">
144144
</div>
145145
</div>
@@ -239,9 +239,9 @@ <h2>Options</h2>
239239
<input class="form-control form-control-sm" type="text" v-model="holidays[index]"
240240
v-on:change="dateChange('holidays', $event)" />
241241
</div>
242-
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('holidays')"> + </button>
242+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addDateItem('holidays')"> + </button>
243243
&nbsp;
244-
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('holidays')"> - </button>
244+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeDateItem('holidays')"> - </button>
245245
</div>
246246
</div>
247247
<hr>
@@ -253,9 +253,9 @@ <h2>Options</h2>
253253
<input class="form-control form-control-sm" type="text" v-model="specialDates[index]"
254254
v-on:change="dateChange('specialDates', $event)" />
255255
</div>
256-
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('specialDates')"> + </button>
256+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addDateItem('specialDates')"> + </button>
257257
&nbsp;
258-
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('specialDates')"> -
258+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeDateItem('specialDates')"> -
259259
</button>
260260
</div>
261261
</div>
@@ -268,10 +268,10 @@ <h2>Options</h2>
268268
<input class="form-control form-control-sm" type="text" v-model="disabledDates[index]"
269269
v-on:change="dateChange('disabledDates', $event)" />
270270
</div>
271-
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('disabledDates')"> +
271+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addDateItem('disabledDates')"> +
272272
</button>
273273
&nbsp;
274-
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('disabledDates')"> -
274+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeDateItem('disabledDates')"> -
275275
</button>
276276
</div>
277277
</div>
@@ -284,9 +284,9 @@ <h2>Options</h2>
284284
<input class="form-control form-control-sm" type="text" v-model="disabledDays[index]"
285285
v-on:change="dateChange('disabledDays', $event)" />
286286
</div>
287-
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('disabledDays')"> + </button>
287+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addDateItem('disabledDays')"> + </button>
288288
&nbsp;
289-
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('disabledDays')"> -
289+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeDateItem('disabledDays')"> -
290290
</button>
291291
</div>
292292
</div>
@@ -317,7 +317,7 @@ <h3 :hidden="toDateFromDate == '0'">To Date</h3>
317317
<div class="col-12" :hidden="inLine == '0' || modalMode == '1'">
318318
<div class="row justify-content-md-center">
319319
<div class="col-5">
320-
<h3 :hidden="toDateFromDate == '0'" hidden>From Date</h3>
320+
<h3 :hidden="toDateFromDate == '0'">From Date</h3>
321321
<div class="border mb-3" data-name="in-line-dtp1"></div>
322322
<div class="row g-0">
323323
<div class="col-6">

‎demo/demo.js‎

Lines changed: 68 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,39 +21,95 @@ var vueApp = new Vue({
2121
disabledDays: [],
2222
},
2323
methods: {
24+
fromDateToDateChange: function (value) {
25+
if (value) {
26+
dtp1.updateOptions({
27+
rangeSelector: false,
28+
});
29+
dtp2.updateOptions({
30+
rangeSelector: false,
31+
});
32+
inLineDtp1.updateOptions({
33+
rangeSelector: false,
34+
});
35+
inLineDtp2.updateOptions({
36+
rangeSelector: false,
37+
});
38+
}
39+
dtp1.updateOptions({
40+
fromDate: value,
41+
toDate: false,
42+
groupId: this.groupId
43+
});
44+
dtp2.updateOptions({
45+
fromDate: false,
46+
toDate: value,
47+
groupId: this.groupId
48+
});
49+
inLineDtp1.updateOptions({
50+
fromDate: value,
51+
toDate: false,
52+
groupId: this.groupId + '_'
53+
});
54+
inLineDtp2.updateOptions({
55+
fromDate: false,
56+
toDate: value,
57+
groupId: this.groupId + '_'
58+
});
59+
},
2460
optionChange: function (optionName, value) {
2561
console.log(`${optionName} => ${value}`);
2662
switch (optionName) {
2763
case 'inLine':
2864
this.modalMode = '0';
65+
dtp1.updateOptions({
66+
modalMode: false,
67+
});
68+
dtp2.updateOptions({
69+
modalMode: false,
70+
});
71+
inLineDtp1.updateOptions({
72+
modalMode: false,
73+
});
74+
inLineDtp2.updateOptions({
75+
modalMode: false,
76+
});
2977
return;
3078
case 'modalMode':
3179
this.inLine = '0';
80+
dtp1.updateOptions({
81+
inLine: false,
82+
});
83+
dtp2.updateOptions({
84+
inLine: false,
85+
});
86+
inLineDtp1.updateOptions({
87+
inLine: false,
88+
});
89+
inLineDtp2.updateOptions({
90+
inLine: false,
91+
});
3292
break;
3393
case 'rangeSelector':
3494
this.toDateFromDate = '0';
95+
this.fromDateToDateChange(false);
3596
break;
3697
case 'toDateFromDate':
3798
this.rangeSelector = '0';
99+
this.fromDateToDateChange(value);
100+
return;
101+
case 'groupId':
38102
dtp1.updateOptions({
39-
fromDate: value,
40-
toDate: false,
41103
groupId: this.groupId
42104
});
43105
dtp2.updateOptions({
44-
fromDate: false,
45-
toDate: value,
46106
groupId: this.groupId
47107
});
48108
inLineDtp1.updateOptions({
49-
fromDate: value,
50-
toDate: false,
51-
groupId: this.groupId
109+
groupId: this.groupId + '_'
52110
});
53111
inLineDtp2.updateOptions({
54-
fromDate: false,
55-
toDate: value,
56-
groupId: this.groupId
112+
groupId: this.groupId + '_'
57113
});
58114
return;
59115
}
@@ -103,7 +159,7 @@ var vueApp = new Vue({
103159
this.disabledDays.push(1);
104160
break;
105161
}
106-
this.dateChange(type);
162+
this.dateChange(optionName);
107163
},
108164
removeDateItem: function (optionName) {
109165
switch (optionName) {
@@ -120,7 +176,7 @@ var vueApp = new Vue({
120176
this.disabledDays.pop();
121177
break;
122178
}
123-
this.dateChange(type);
179+
this.dateChange(optionName);
124180
},
125181
}
126182
});

‎dist/mds.bs.datetimepicker.js‎

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

‎dist/mds.bs.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.

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@
3030
"mini-css-extract-plugin": "^1.6.2",
3131
"style-loader": "^2.0.0",
3232
"ts-loader": "^9.2.4",
33-
"typescript": "^4.4.2",
34-
"webpack": "^5.52.0",
33+
"typescript": "^4.4.3",
34+
"webpack": "^5.52.1",
3535
"webpack-cli": "^4.8.0",
3636
"webpack-dev-server": "^3.11.2",
3737
"webpack-merge": "^5.8.0",

‎src/mds.bs.datetimepicker.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1529,6 +1529,7 @@ data-bs-toggle="dropdown" aria-expanded="false">
15291529
private hideYearsBox = (element: Element, setting: MdsPersianDateTimePickerSetting): void => {
15301530
if (setting.inLine) {
15311531
const dtpInLine = element.closest('[data-mds-dtp-guid]');
1532+
if (dtpInLine == null) return;
15321533
if (this.tempTitleString)
15331534
dtpInLine.querySelector('[mds-dtp-inline-header]').innerHTML = this.tempTitleString;
15341535
const yearListBox = dtpInLine.querySelector('[data-mds-dtp-year-list-box]');

0 commit comments

Comments
 (0)