Skip to content

Commit 7a85791

Browse files
Mds92Mds92
committed
preparation
1 parent 6fcaf99 commit 7a85791

5 files changed

Lines changed: 93 additions & 34 deletions

File tree

‎demo/demo.html‎

Lines changed: 50 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,14 @@ <h2>Options</h2>
2929
<div class="col-7 pt-2">
3030
<div class="form-check form-check-inline">
3131
<input class="form-check-input" type="radio" name="disabledRadioOptions"
32-
id="disabledRadioOptionsId1" value="1" v-model="disabled" v-on:change="optionChange('disabled', true)">
32+
id="disabledRadioOptionsId1" value="1" v-model="disabled"
33+
v-on:change="optionChange('disabled', true)">
3334
<label class="form-check-label" for="disabledRadioOptionsId1">true</label>
3435
</div>
3536
<div class="form-check form-check-inline">
3637
<input class="form-check-input" type="radio" name="disabledRadioOptions"
37-
id="disabledRadioOptionsId2" value="0" v-model="disabled" v-on:change="optionChange('disabled', false)">
38+
id="disabledRadioOptionsId2" value="0" v-model="disabled"
39+
v-on:change="optionChange('disabled', false)">
3840
<label class="form-check-label" for="disabledRadioOptionsId2">false</label>
3941
</div>
4042
</div>
@@ -46,12 +48,14 @@ <h2>Options</h2>
4648
<div class="col-7 pt-2">
4749
<div class="form-check form-check-inline">
4850
<input class="form-check-input" type="radio" name="isGregorianRadioOptions"
49-
id="isGregorianRadioOptionsId1" value="1" v-model="isGregorian">
51+
id="isGregorianRadioOptionsId1" value="1" v-model="isGregorian"
52+
v-on:change="optionChange('isGregorian', true)">
5053
<label class="form-check-label" for="isGregorianRadioOptionsId1">true</label>
5154
</div>
5255
<div class="form-check form-check-inline">
5356
<input class="form-check-input" type="radio" name="isGregorianRadioOptions"
54-
id="isGregorianRadioOptionsId2" value="0" v-model="isGregorian" checked>
57+
id="isGregorianRadioOptionsId2" value="0" v-model="isGregorian"
58+
v-on:change="optionChange('isGregorian', false)">
5559
<label class="form-check-label" for="isGregorianRadioOptionsId2">false</label>
5660
</div>
5761
</div>
@@ -63,12 +67,12 @@ <h2>Options</h2>
6367
<div class="col-7 pt-2">
6468
<div class="form-check form-check-inline">
6569
<input class="form-check-input" type="radio" name="inLineRadioOptions" id="inLineRadioOptionsId1"
66-
value="1" v-model="inLine">
70+
value="1" v-model="inLine" v-on:change="optionChange('inLine', true)">
6771
<label class="form-check-label" for="inLineRadioOptionsId1">true</label>
6872
</div>
6973
<div class="form-check form-check-inline">
7074
<input class="form-check-input" type="radio" name="inLineRadioOptions" id="inLineRadioOptionsId2"
71-
value="0" v-model="inLine">
75+
value="0" v-model="inLine" v-on:change="optionChange('inLine', false)">
7276
<label class="form-check-label" for="inLineRadioOptionsId2">false</label>
7377
</div>
7478
</div>
@@ -80,12 +84,14 @@ <h2>Options</h2>
8084
<div class="col-7 pt-2">
8185
<div class="form-check form-check-inline">
8286
<input class="form-check-input" type="radio" name="modalModeRadioOptions"
83-
id="modalModeRadioOptionsId1" value="1" v-model="modalMode">
87+
id="modalModeRadioOptionsId1" value="1" v-model="modalMode"
88+
v-on:change="optionChange('modalMode', true)">
8489
<label class="form-check-label" for="modalModeRadioOptionsId1">true</label>
8590
</div>
8691
<div class="form-check form-check-inline">
8792
<input class="form-check-input" type="radio" name="modalModeRadioOptions"
88-
id="modalModeRadioOptionsId2" value="0" v-model="modalMode" checked>
93+
id="modalModeRadioOptionsId2" value="0" v-model="modalMode"
94+
v-on:change="optionChange('modalMode', false)">
8995
<label class="form-check-label" for="modalModeRadioOptionsId2">false</label>
9096
</div>
9197
</div>
@@ -97,12 +103,14 @@ <h2>Options</h2>
97103
<div class="col-7 pt-2">
98104
<div class="form-check form-check-inline">
99105
<input class="form-check-input" type="radio" name="enableTimePickerInlineRadioOptions"
100-
id="enableTimePickerInlineRadioOptionsId1" value="1" v-model="enableTimePicker">
106+
id="enableTimePickerInlineRadioOptionsId1" value="1" v-model="enableTimePicker"
107+
v-on:change="optionChange('enableTimePicker', true)">
101108
<label class="form-check-label" for="enableTimePickerInlineRadioOptionsId1">true</label>
102109
</div>
103110
<div class="form-check form-check-inline">
104111
<input class="form-check-input" type="radio" name="enableTimePickerInlineRadioOptions"
105-
id="enableTimePickerInlineRadioOptionsId2" value="0" v-model="enableTimePicker">
112+
id="enableTimePickerInlineRadioOptionsId2" value="0" v-model="enableTimePicker"
113+
v-on:change="optionChange('enableTimePicker', false)">
106114
<label class="form-check-label" for="enableTimePickerInlineRadioOptionsId2">false</label>
107115
</div>
108116
</div>
@@ -114,12 +122,14 @@ <h2>Options</h2>
114122
<div class="col-7 pt-2">
115123
<div class="form-check form-check-inline">
116124
<input class="form-check-input" type="radio" name="toDateFromDateRadioOptions"
117-
id="toDateRadioOptionsId1" value="1" v-model="toDateFromDate">
125+
id="toDateRadioOptionsId1" value="1" v-model="toDateFromDate"
126+
v-on:change="optionChange('toDateFromDate', true)">
118127
<label class="form-check-label" for="toDateRadioOptionsId1">true</label>
119128
</div>
120129
<div class="form-check form-check-inline">
121130
<input class="form-check-input" type="radio" name="toDateFromDateRadioOptions"
122-
id="toDateRadioOptionsId2" value="0" v-model="toDateFromDate">
131+
id="toDateRadioOptionsId2" value="0" v-model="toDateFromDate"
132+
v-on:change="optionChange('toDateFromDate', false)">
123133
<label class="form-check-label" for="toDateRadioOptionsId2">false</label>
124134
</div>
125135
</div>
@@ -130,7 +140,7 @@ <h2>Options</h2>
130140
<label class="col-5 col-form-label">groupId</label>
131141
<div class="col-7 pt-2">
132142
<input class="form-control form-control-sm" type="text" value="group1"
133-
:readonly="toDateFromDate == '0'">
143+
:readonly="toDateFromDate == '0'" v-on:change="optionChange('groupId', $event.target.value)">
134144
</div>
135145
</div>
136146
<hr>
@@ -140,12 +150,14 @@ <h2>Options</h2>
140150
<div class="col-7 pt-2">
141151
<div class="form-check form-check-inline">
142152
<input class="form-check-input" type="radio" name="rangeSelectorRadioOptions"
143-
id="rangeSelectorRadioOptionsId1" value="1" v-model="rangeSelector">
153+
id="rangeSelectorRadioOptionsId1" value="1" v-model="rangeSelector"
154+
v-on:change="optionChange('rangeSelector', true)">
144155
<label class="form-check-label" for="rangeSelectorRadioOptionsId1">true</label>
145156
</div>
146157
<div class="form-check form-check-inline">
147158
<input class="form-check-input" type="radio" name="rangeSelectorRadioOptions"
148-
id="rangeSelectorRadioOptionsId2" value="0" v-model="rangeSelector">
159+
id="rangeSelectorRadioOptionsId2" value="0" v-model="rangeSelector"
160+
v-on:change="optionChange('rangeSelector', false)">
149161
<label class="form-check-label" for="rangeSelectorRadioOptionsId2">false</label>
150162
</div>
151163
</div>
@@ -157,11 +169,15 @@ <h2>Options</h2>
157169
<div class="col-2"></div>
158170
<div class="col-2 pt-2">
159171
<input class="form-control form-control-sm" type="number" min="0" max="3" value="0"
160-
:readonly="rangeSelector == '0'" v-model="rangeSelectorMonthsToShowStart" style="width: 50px;">
172+
:readonly="rangeSelector == '0'" v-model="rangeSelectorMonthsToShowStart"
173+
v-on:change="optionChange('rangeSelectorMonthsToShow', [$event.target.value, rangeSelectorMonthsToShowEnd])"
174+
style="width: 50px;">
161175
</div>
162176
<div class="col-2 pt-2">
163177
<input class="form-control form-control-sm" type="number" min="0" max="3" value="0"
164-
:readonly="rangeSelector == '0'" v-model="rangeSelectorMonthsToShowEnd" style="width: 50px;">
178+
:readonly="rangeSelector == '0'" v-model="rangeSelectorMonthsToShowEnd"
179+
v-on:change="optionChange('rangeSelectorMonthsToShow', [rangeSelectorMonthsToShowStart, $event.target.value])"
180+
style="width: 50px;">
165181
</div>
166182
</div>
167183
<hr>
@@ -170,7 +186,8 @@ <h2>Options</h2>
170186
<label class="col-5 col-form-label">textFormat</label>
171187
<div class="col-7 pt-2">
172188
<div class="input-group input-group-sm">
173-
<input class="form-control form-control-sm" type="text" v-model="textFormat">
189+
<input class="form-control form-control-sm" type="text" v-model="textFormat"
190+
v-on:change="optionChange('textFormat', $event.target.value)">
174191
<span class="input-group-text cursor-pointer" data-bs-toggle="modal"
175192
data-bs-target="#textDateFormatModal">Detail</span>
176193
</div>
@@ -182,7 +199,8 @@ <h2>Options</h2>
182199
<label class="col-5 col-form-label">dateFormat</label>
183200
<div class="col-7 pt-2">
184201
<div class="input-group input-group-sm">
185-
<input class="form-control form-control-sm" type="text" v-model="dateFormat">
202+
<input class="form-control form-control-sm" type="text" v-model="dateFormat"
203+
v-on:change="optionChange('dateFormat', $event.target.value)">
186204
<span class="input-group-text cursor-pointer" data-bs-toggle="modal"
187205
data-bs-target="#textDateFormatModal">Detail</span>
188206
</div>
@@ -193,15 +211,17 @@ <h2>Options</h2>
193211
<div class="row">
194212
<label class="col-5 col-form-label">yearOffset</label>
195213
<div class="col-7 pt-2">
196-
<input class="form-control form-control-sm" type="number" value="15" min="0" v-model="yearOffset">
214+
<input class="form-control form-control-sm" type="number" value="15" min="0" v-model="yearOffset"
215+
v-on:change="optionChange('yearOffset', $event.target.value)">
197216
</div>
198217
</div>
199218
<hr>
200219
<!-- placement -->
201220
<div class="row">
202221
<label class="col-5 col-form-label">placement</label>
203222
<div class="col-7 pt-2">
204-
<select class="form-select form-select-sm" v-model="placement">
223+
<select class="form-select form-select-sm" v-model="placement"
224+
v-on:change="optionChange('placement', $event.target.value)">
205225
<option value="auto">auto</option>
206226
<option value="top">top</option>
207227
<option value="bottom" selected>bottom</option>
@@ -279,25 +299,25 @@ <h2>Options</h2>
279299
<div class="container-fluid">
280300
<div class="row">
281301
<!-- Normal -->
282-
<div class="col-12" data-name="normal-dtp-container">
283-
<h3 data-name="from-to-date-title" hidden>From Date</h3>
302+
<div class="col-12" :hidden="inLine == '1' && modalMode == '0'">
303+
<h3 :hidden="toDateFromDate == '0'">From Date</h3>
284304
<div class="input-group mb-3">
285305
<span class="input-group-text cursor-pointer" id="dtp1">📅</span>
286306
<input type="text" class="form-control" placeholder="Date Picker Text" data-name="dtp1-text">
287307
<input type="text" class="form-control" placeholder="Date Picker Date" data-name="dtp1-date">
288308
</div>
289-
<h3 data-name="from-to-date-title" hidden>To Date</h3>
290-
<div class="input-group mb-3" data-name="dtp2-container" hidden>
309+
<h3 :hidden="toDateFromDate == '0'">To Date</h3>
310+
<div class="input-group mb-3" :hidden="toDateFromDate == '0'">
291311
<span class="input-group-text cursor-pointer" id="dtp2">📅</span>
292312
<input type="text" class="form-control" placeholder="Date Picker Text" data-name="dtp2-text">
293313
<input type="text" class="form-control" placeholder="Date Picker Date" data-name="dtp2-date">
294314
</div>
295315
</div>
296316
<!-- In Line -->
297-
<div class="col-12" data-name="in-line-dtp-container" hidden>
317+
<div class="col-12" :hidden="inLine == '0' || modalMode == '1'">
298318
<div class="row justify-content-md-center">
299-
<div class="col-5" data-name="in-line-dtp1-column">
300-
<h3 data-name="from-to-date-title" hidden>From Date</h3>
319+
<div class="col-5">
320+
<h3 :hidden="toDateFromDate == '0'" hidden>From Date</h3>
301321
<div class="border mb-3" data-name="in-line-dtp1"></div>
302322
<div class="row g-0">
303323
<div class="col-6">
@@ -308,8 +328,8 @@ <h3 data-name="from-to-date-title" hidden>From Date</h3>
308328
</div>
309329
</div>
310330
</div>
311-
<div class="col-5" hidden data-name="in-line-dtp2-container">
312-
<h3 data-name="from-to-date-title" hidden>To Date</h3>
331+
<div class="col-5" :hidden="toDateFromDate == '0'">
332+
<h3>To Date</h3>
313333
<div class="border mb-3" data-name="in-line-dtp2"></div>
314334
<div class="row g-0">
315335
<div class="col-6">

‎demo/demo.js‎

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,43 @@ var vueApp = new Vue({
2222
},
2323
methods: {
2424
optionChange: function (optionName, value) {
25+
console.log(`${optionName} => ${value}`);
2526
switch (optionName) {
26-
case 'disabled':
27-
dtp1.updateOption(optionName, value);
28-
inLineDtp1.updateOption(optionName, value);
27+
case 'inLine':
28+
this.modalMode = '0';
29+
return;
30+
case 'modalMode':
31+
this.inLine = '0';
2932
break;
33+
case 'rangeSelector':
34+
this.toDateFromDate = '0';
35+
break;
36+
case 'toDateFromDate':
37+
this.rangeSelector = '0';
38+
dtp1.updateOptions({
39+
fromDate: value,
40+
toDate: false,
41+
groupId: this.groupId
42+
});
43+
dtp2.updateOptions({
44+
fromDate: false,
45+
toDate: value,
46+
groupId: this.groupId
47+
});
48+
inLineDtp1.updateOptions({
49+
fromDate: value,
50+
toDate: false,
51+
groupId: this.groupId
52+
});
53+
inLineDtp2.updateOptions({
54+
fromDate: false,
55+
toDate: value,
56+
groupId: this.groupId
57+
});
58+
return;
3059
}
60+
dtp1.updateOption(optionName, value);
61+
inLineDtp1.updateOption(optionName, value);
3162
},
3263
dateChange: function (optionName) {
3364
switch (optionName) {

‎dist/mds.bs.datetimepicker.js‎

Lines changed: 5 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.

‎src/mds.bs.datetimepicker.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1008,6 +1008,8 @@ data-bs-toggle="dropdown" aria-expanded="false">
10081008
modalDialogElement.classList.add('modal-xl');
10091009
else
10101010
modalDialogElement.classList.remove('modal-xl');
1011+
} else {
1012+
modalDialogElement.classList.remove('modal-xl');
10111013
}
10121014
}
10131015
private getYearsBoxBodyHtml(setting: MdsPersianDateTimePickerSetting, yearToStart: number): MdsPersianDateTimePickerYearToSelect {
@@ -1538,6 +1540,7 @@ data-bs-toggle="dropdown" aria-expanded="false">
15381540
dtpInLine.classList.remove('overflow-hidden');
15391541
} else {
15401542
const popoverOrModalElement = setting.modalMode ? this.getModal() : this.getPopover(element);
1543+
if (popoverOrModalElement == null) return;
15411544
if (this.tempTitleString) {
15421545
if (setting.modalMode)
15431546
popoverOrModalElement.querySelector('[data-mds-dtp-title] .modal-title').innerHTML = this.tempTitleString;

0 commit comments

Comments
 (0)