Skip to content

Commit e35c950

Browse files
ManukMinasyanManukMinasyan
committed
New Api Event get selected days count, bug fixes, documentation clearly
1 parent f01957d commit e35c950

File tree

3 files changed

+48
-28
lines changed

3 files changed

+48
-28
lines changed

‎README.md

Lines changed: 16 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ export default {
7171
// v-on:choseDay="clickDay"
7272
// v-on:changeMonth="changeDate"
7373
// v-on:isToday="clickToday"
74+
// v-on:selectedDaysCount="getSelectedDaysCount" // Works only with a date range.
7475

7576
// :sundayStart="true"
7677

@@ -84,9 +85,10 @@ export default {
8485
// :change-month-function="true"
8586
// :change-year-function="true"
8687

87-
// :markDate=arr // arr=['2018/10/20','2018/10/28', '2018/10/16']
88-
// :agoDayHide='1514937600' //Do not click before a date. Timestamp 10 digits
89-
// :futureDayHide='1525104000' //Do not click after a date Timestamp 10 digits
88+
// :mark-date="['2018/10/20','2018/10/28', '2018/10/16']"
89+
// :mark-date-more="arr"
90+
// :agoDayHide="1514937600" //Do not click before a date. Timestamp 10 digits
91+
// :futureDayHide="1525104000" //Do not click after a date Timestamp 10 digits
9092

9193
// :apply-stylesheet="true"
9294
></FunctionalCalendar>
@@ -116,6 +118,10 @@ arr=[{date:'2018/4/1',className:"mark1"}, {date:'2018/4/13',className:"mark2"}];
116118
calendarsCount: 3,
117119
changeMonthFunction: false,
118120
changeYearFunction: false,
121+
markDate: ['2018/10/20','2018/10/28', '2018/10/16'],
122+
markDateMore: [{date:'2018/11/20',className:"mark1"}, {date:'2018/11/21',className:"mark2"}],
123+
agoDayHide: 0,
124+
futureDayHide: 2554387200,
119125
dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
120126
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
121127
isModal: false,
@@ -136,28 +142,19 @@ arr=[{date:'2018/4/1',className:"mark1"}, {date:'2018/4/13',className:"mark2"}];
136142
// v-on:choseDay="clickDay"
137143
// v-on:changeMonth="changeDate"
138144
// v-on:isToday="clickToday"
139-
140-
141-
// :markDate=arr // arr=['2018/10/20','2018/10/28', '2018/10/16']
142-
// :agoDayHide='1514937600' //Do not click before a date. Timestamp 10 digits
143-
// :futureDayHide='1525104000' //Do not click after a date Timestamp 10 digits
145+
// v-on:selectedDaysCount="getSelectedDaysCount" // Works only with a date range.
144146
></FunctionalCalendar>
145147
````
146148

147149

148150
### API
149151

150-
| Attributes | Description | Default | Whether it must pass |
151-
| :------------- | :----------------------------------------------------------- | :----: | :------: |
152-
| choseDay | Check the method called on a certain day to return the selected date YY-MM-DD | No | No |
153-
| changeMonth | Switch the method called by the month, return the date to switch to a certain month YY-MM-DD | No | No |
154-
| isToday | When switching the month, if you cut to the current month, call this method and return to the current month today. | No | No |
155-
| markDate | If you need to be marked for a few days of the month, pass the date array of the month. Such as [2,6,8], the second month, the 6th, the 6th, the 8th is marked (the same mark) | Empty array | No |
156-
| markDateMore | Need different tags as above, the last line of sample code for Usage | Empty Array | No |
157-
| agoDayHide | Do not click before a date. The timestamp length is 10 digits. | 0 | No |
158-
| futureDayHide | Do not click after a date. The timestamp length is 10 digits. | 2554387200 | No |
159-
160-
152+
| Attributes | Description | Whether it must pass |
153+
| :------------- | :----------------------------------------------------------- | :----:
154+
| choseDay | Check the method called on a certain day to return the selected date YY-MM-DD | No |
155+
| changeMonth | Switch the method called by the month, return the date to switch to a certain month YY-MM-DD | No
156+
| isToday | When switching the month, if you cut to the current month, call this method and return to the current month today. | No
157+
| selectedDaysCount | Get number of days between date range dates |
161158
##### Add the ref attribute to the Calendar tab, exposing three methods to switch the month directly
162159
````javascript
163160
For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>

‎src/Demo.vue

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77

88
<functional-calendar ref='calendar'
99
v-on:choseDay="clickDay"
10+
v-on:selectedDaysCount="count"
1011
v-model="calendar"
1112
:configs="configs"
1213
></functional-calendar>
@@ -19,9 +20,9 @@
1920
:is-date-range="true"
2021
:markDate="arr"
2122
:is-multiple="true"
22-
:calendars-count="3"
23+
:calendars-count="1"
2324
:is-modal="true"
24-
25+
:mark-date-more="configs.markDateMore"
2526
:change-month-function="true"
2627
:change-year-function="true"
2728
></functional-calendar>
@@ -65,13 +66,13 @@
6566
sundayStart: true,
6667
6768
isDatePicker: true,
68-
isDateRange: false,
69+
isDateRange: true,
6970
7071
isMultiple: false,
7172
calendarsCount: 3,
7273
7374
isModal: false,
74-
75+
markDateMore: [{date:'2018/11/20',className:'mark1'}],
7576
changeMonthFunction: false,
7677
changeYearFunction: true,
7778
@@ -86,7 +87,10 @@
8687
},
8788
methods: {
8889
clickDay(date) {
89-
console.log(date);
90+
// console.log(date);
91+
},
92+
count(count){
93+
console.log(count);
9094
},
9195
prevMonth() {
9296
this.$refs.calendar.PreMonth();

‎src/componentns/FunctionalCalendar.vue

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,9 +142,13 @@
142142
isModal: false,
143143
changeMonthFunction: false,
144144
changeYearFunction: false,
145+
markDate: [],
146+
markDateMore: [],
147+
agoDayHide: 0,
148+
futureDayHide: 2554387200,
145149
applyStylesheet: true,
146150
dayNames: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
147-
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
151+
monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
148152
}
149153
};
150154
},
@@ -407,6 +411,16 @@
407411
this.startDate = item.date;
408412
}
409413
414+
//Get number of days between date range dates
415+
if(this.startDate !== false && this.endDate !== false) {
416+
let oneDay = 24*60*60*1000;
417+
let firstDate = new Date(this.startDate);
418+
let secondDate = new Date(this.endDate);
419+
let diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime())/(oneDay)));
420+
421+
this.$emit('selectedDaysCount', diffDays);
422+
}
423+
410424
this.$emit('input', {
411425
startDate: this.startDate,
412426
endDate: this.endDate
@@ -453,8 +467,8 @@
453467
}
454468
},
455469
forMatArgs: function () {
456-
let markDate = this.markDate;
457-
let markDateMore = this.markDateMore;
470+
let markDate = this.fConfigs.markDate;
471+
let markDateMore = this.fConfigs.markDateMore;
458472
markDate = markDate.map((k) => {
459473
return timeUtil.dateFormat(k);
460474
});
@@ -505,7 +519,7 @@
505519
k.markClassName = markClassName;
506520
k.isMark = markDate.indexOf(nowTime) > -1;
507521
//Unable to select a day
508-
k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
522+
k.dayHide = t < this.fConfigs.agoDayHide || t > this.fConfigs.futureDayHide;
509523
if (k.isToday) {
510524
this.$emit('isToday', nowTime);
511525
}
@@ -587,6 +601,11 @@
587601
this.fConfigs.dayNames = this.dayNames.length ? this.dayNames : this.fConfigs.dayNames;
588602
this.fConfigs.monthNames = this.monthNames.length ? this.monthNames : this.fConfigs.monthNames;
589603
604+
this.fConfigs.markDate = this.markDate;
605+
this.fConfigs.markDateMore = this.markDateMore;
606+
this.fConfigs.agoDayHide = this.agoDayHide;
607+
this.fConfigs.futureDayHide = this.futureDayHide;
608+
590609
this.fConfigs.isModal = this.isModal;
591610
592611
this.fConfigs.applyStylesheet = this.applyStylesheet;

0 commit comments

Comments
 (0)