Skip to content

Commit 26d088e

Browse files
Mohammad DayyanMohammad Dayyan
Mohammad Dayyan
authored and
Mohammad Dayyan
committed
preparation
1 parent d71c193 commit 26d088e

5 files changed

Lines changed: 254 additions & 63 deletions

File tree

‎demo/demo.html‎

Lines changed: 73 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@
99
<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
1010
<link rel="stylesheet" href="../src/mds.bs.datetimepicker.style.css" />
1111
<script src="../dist/mds.bs.datetimepicker.js" type="text/javascript"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
1213
<link rel="stylesheet" href="demo.css" />
1314
</head>
1415

1516
<body class="bg-light">
1617
<div class="container-fluid">
1718
<h1 class="h2">MD BootstrapPersianDateTimePicker Demo</h1>
1819
<div class="row">
19-
<div class="col-md-4">
20+
<div class="col-md-4" id="vueAppOptions">
2021
<div class="container-fluid bg-white">
2122
<div class="row">
2223
<div class="col-12">
@@ -80,13 +81,14 @@ <h2>Options</h2>
8081
<label class="col-5 col-form-label">modalMode</label>
8182
<div class="col-7 pt-2">
8283
<div class="form-check form-check-inline">
83-
<input class="form-check-input" type="radio" name="modalModeRadioOptions" id="modalModeRadioOptionsId1"
84-
value="true" onchange="optionOnChange('modalMode', this.value)">
84+
<input class="form-check-input" type="radio" name="modalModeRadioOptions"
85+
id="modalModeRadioOptionsId1" value="true" onchange="optionOnChange('modalMode', this.value)">
8586
<label class="form-check-label" for="modalModeRadioOptionsId1">true</label>
8687
</div>
8788
<div class="form-check form-check-inline">
88-
<input class="form-check-input" type="radio" name="modalModeRadioOptions" id="modalModeRadioOptionsId2"
89-
value="false" onchange="optionOnChange('modalMode', this.value)" checked>
89+
<input class="form-check-input" type="radio" name="modalModeRadioOptions"
90+
id="modalModeRadioOptionsId2" value="false" onchange="optionOnChange('modalMode', this.value)"
91+
checked>
9092
<label class="form-check-label" for="modalModeRadioOptionsId2">false</label>
9193
</div>
9294
</div>
@@ -116,13 +118,13 @@ <h2>Options</h2>
116118
<label class="col-5 col-form-label">toDate, fromDate</label>
117119
<div class="col-7 pt-2">
118120
<div class="form-check form-check-inline">
119-
<input class="form-check-input" type="radio" name="toDateFromDateRadioOptions" id="toDateRadioOptionsId1"
120-
value="true" onchange="optionOnChange('toDate', this.value)">
121+
<input class="form-check-input" type="radio" name="toDateFromDateRadioOptions"
122+
id="toDateRadioOptionsId1" value="true" onchange="optionOnChange('toDate', this.value)">
121123
<label class="form-check-label" for="toDateRadioOptionsId1">true</label>
122124
</div>
123125
<div class="form-check form-check-inline">
124-
<input class="form-check-input" type="radio" name="toDateFromDateRadioOptions" id="toDateRadioOptionsId2"
125-
value="false" onchange="optionOnChange('toDate', this.value)" checked>
126+
<input class="form-check-input" type="radio" name="toDateFromDateRadioOptions"
127+
id="toDateRadioOptionsId2" value="false" onchange="optionOnChange('toDate', this.value)" checked>
126128
<label class="form-check-label" for="toDateRadioOptionsId2">false</label>
127129
</div>
128130
</div>
@@ -218,12 +220,72 @@ <h2>Options</h2>
218220
</div>
219221
</div>
220222
<hr>
223+
<!-- holidays -->
224+
<div class="row">
225+
<label class="col-5 col-form-label">holidays</label>
226+
<div class="col-7 pt-2">
227+
<div v-for="(date, index) in holidays" :key="index">
228+
<input class="form-control form-control-sm" type="text" v-model="holidays[index]"
229+
v-on:change="dateChange('holidays', $event)" />
230+
</div>
231+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('holidays')"> + </button>
232+
&nbsp;
233+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('holidays')"> - </button>
234+
</div>
235+
</div>
236+
<hr>
237+
<!-- specialDates -->
238+
<div class="row">
239+
<label class="col-5 col-form-label">specialDates</label>
240+
<div class="col-7 pt-2">
241+
<div v-for="(date, index) in specialDates" :key="index">
242+
<input class="form-control form-control-sm" type="text" v-model="specialDates[index]"
243+
v-on:change="dateChange('specialDates', $event)" />
244+
</div>
245+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('specialDates')"> + </button>
246+
&nbsp;
247+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('specialDates')"> -
248+
</button>
249+
</div>
250+
</div>
251+
<hr>
252+
<!-- disabledDates -->
253+
<div class="row">
254+
<label class="col-5 col-form-label">disabledDates</label>
255+
<div class="col-7 pt-2">
256+
<div v-for="(date, index) in disabledDates" :key="index">
257+
<input class="form-control form-control-sm" type="text" v-model="disabledDates[index]"
258+
v-on:change="dateChange('disabledDates', $event)" />
259+
</div>
260+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('disabledDates')"> +
261+
</button>
262+
&nbsp;
263+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('disabledDates')"> -
264+
</button>
265+
</div>
266+
</div>
267+
<hr>
268+
<!-- disabledDays -->
269+
<div class="row">
270+
<label class="col-5 col-form-label">disabledDays</label>
271+
<div class="col-7 pt-2">
272+
<div v-for="(date, index) in disabledDays" :key="index">
273+
<input class="form-control form-control-sm" type="text" v-model="disabledDays[index]"
274+
v-on:change="dateChange('disabledDays', $event)" />
275+
</div>
276+
<button class="btn btn-sm btn-primary" type="button" v-on:click="addItem('disabledDays')"> + </button>
277+
&nbsp;
278+
<button class="btn btn-sm btn-danger" type="button" v-on:click="removeItem('disabledDays')"> -
279+
</button>
280+
</div>
281+
</div>
282+
<hr>
221283
</div>
222284
</div>
223285
</div>
224286
</div>
225-
<div class="col-md-8 mt-5">
226-
<div class="container-fluid mt-5">
287+
<div class="col-md-8" style="margin-top: 150px;">
288+
<div class="container-fluid">
227289
<div class="row">
228290
<!-- Normal -->
229291
<div class="col-12" data-name="normal-dtp-container">

‎demo/demo.js‎

Lines changed: 76 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ function optionOnChange(optionName, value) {
6161
inLineDtpContainer.hidden = false;
6262
inLine = true;
6363
modalModeRadioOptions.forEach(e => e.checked = e.value == 'false');
64-
break;
64+
break;
6565
case false:
6666
normalDtpContainer.hidden = false;
6767
inLineDtpContainer.hidden = true;
@@ -247,4 +247,78 @@ function rangeSelectorMonthsToShowOnChange() {
247247
inLineDtp1Element.style.width = ''
248248
dtp1.updateOption('rangeSelectorMonthsToShow', [start, end]);
249249
inLineDtp1.updateOption('rangeSelectorMonthsToShow', [start, end]);
250-
}
250+
}
251+
252+
var vueApp = new Vue({
253+
el: '#vueAppOptions',
254+
data: {
255+
holidays: [],
256+
specialDates: [],
257+
disabledDates: [],
258+
disabledDays: [],
259+
},
260+
methods: {
261+
dateChange: function (optionName) {
262+
switch (optionName) {
263+
case 'holidays':
264+
dtp1.updateOption('holidays', [...this.holidays]);
265+
dtp2.updateOption('holidays', [...this.holidays]);
266+
inLineDtp1.updateOption('holidays', [...this.holidays]);
267+
inLineDtp2.updateOption('holidays', [...this.holidays]);
268+
break;
269+
case 'specialDates':
270+
dtp1.updateOption('specialDates', [...this.specialDates]);
271+
dtp2.updateOption('specialDates', [...this.specialDates]);
272+
inLineDtp1.updateOption('specialDates', [...this.specialDates]);
273+
inLineDtp2.updateOption('specialDates', [...this.specialDates]);
274+
break;
275+
case 'disabledDates':
276+
dtp1.updateOption('disabledDates', [...this.disabledDates]);
277+
dtp2.updateOption('disabledDates', [...this.disabledDates]);
278+
inLineDtp1.updateOption('disabledDates', [...this.disabledDates]);
279+
inLineDtp2.updateOption('disabledDates', [...this.disabledDates]);
280+
break;
281+
case 'disabledDays':
282+
dtp1.updateOption('disabledDays', [...this.disabledDays]);
283+
dtp2.updateOption('disabledDays', [...this.disabledDays]);
284+
inLineDtp1.updateOption('disabledDays', [...this.disabledDays]);
285+
inLineDtp2.updateOption('disabledDays', [...this.disabledDays]);
286+
break;
287+
}
288+
},
289+
addItem: function (type) {
290+
switch (type) {
291+
case 'holidays':
292+
this.holidays.push(dtp1.convertDateToString(new Date(), true, 'yyyy/MM/dd'));
293+
break;
294+
case 'specialDates':
295+
this.specialDates.push(dtp1.convertDateToString(new Date(), true, 'yyyy/MM/dd'));
296+
break;
297+
case 'disabledDates':
298+
this.disabledDates.push(dtp1.convertDateToString(new Date(), true, 'yyyy/MM/dd'));
299+
break;
300+
case 'disabledDays':
301+
this.disabledDays.push(1);
302+
break;
303+
}
304+
this.dateChange(type);
305+
},
306+
removeItem: function (type) {
307+
switch (type) {
308+
case 'holidays':
309+
this.holidays.pop();
310+
break;
311+
case 'specialDates':
312+
this.specialDates.pop();
313+
break;
314+
case 'disabledDates':
315+
this.disabledDates.pop();
316+
break;
317+
case 'disabledDays':
318+
this.disabledDays.pop();
319+
break;
320+
}
321+
this.dateChange(type);
322+
}
323+
}
324+
})

‎dist/mds.bs.datetimepicker.js‎

Lines changed: 53 additions & 26 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.

0 commit comments

Comments
 (0)