Skip to content

Commit 9043a07

Browse files
LouisMazelLouisMazel
authored
🚀 {feature} Add disabled dates array (#24)
🚀 v1.2.0 : {feature} Add disabled dates array
1 parent 8ed8e17 commit 9043a07

23 files changed

+86
-67
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
6060
| color*** | String (hex) | no | dodgerblue |
6161
| minute-interval | Int | no | 1 |
6262
| formatted | string | no | 'llll' (momentjs format) |
63-
| format | string | no | 'YYYY-MM-DDTHH:mm' |
63+
| format | string | no | - |
6464
| time-format | string | no | 'H:mm a' |
6565
| locale | string | no | en |
6666
| disable-time | Boolean | no | false |
@@ -74,6 +74,7 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
7474
| no-weekends-days | Boolean | no | false |
7575
| auto-close | Boolean | no | false |
7676
| without-input | Boolean | no | false |
77+
| disabled-dates***** | Boolean | no | [] |
7778

7879
*hint : Is a text that replaces the label/placeholder
7980

@@ -83,6 +84,8 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
8384

8485
****min-date & max-date : Must be 'YYYY-MM-DD' format
8586

87+
*****Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: `['2018-04-03', '2018-04-07', '2018-04-09'])
88+
8689

8790
## Contribution
8891

‎demo/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.b5dd9eebb4a82c2e37351b1c0e6486a9.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.88b4d2f1b6949b36de49.js></script><script type=text/javascript src=./static/js/app.e56a2602d6d3b9ee948e.js></script></body></html>
1+
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><title>vue-ctk-date-time-picker</title><link rel=stylesheet href=./assets/main.css><link href=./static/css/app.160515f52ccc1fa47230d0f0081c2217.css rel=stylesheet></head><body><div id=app></div><script src=/build/build.js></script><script type=text/javascript src=./static/js/manifest.3ad1d5771e9b13dbdad2.js></script><script type=text/javascript src=./static/js/vendor.88b4d2f1b6949b36de49.js></script><script type=text/javascript src=./static/js/app.91181ebab409053b436e.js></script></body></html>

‎demo/static/css/app.b5dd9eebb4a82c2e37351b1c0e6486a9.css renamed to ‎demo/static/css/app.160515f52ccc1fa47230d0f0081c2217.css

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

‎demo/static/css/app.b5dd9eebb4a82c2e37351b1c0e6486a9.css.map renamed to ‎demo/static/css/app.160515f52ccc1fa47230d0f0081c2217.css.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.

‎demo/static/js/app.91181ebab409053b436e.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.

‎demo/static/js/app.91181ebab409053b436e.js.map

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

‎demo/static/js/app.e56a2602d6d3b9ee948e.js

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎demo/static/js/app.e56a2602d6d3b9ee948e.js.map

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎demo/static/js/manifest.3ad1d5771e9b13dbdad2.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/umd/vue-ctk-date-time-picker.min.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.

‎dist/umd/vue-ctk-date-time-picker.min.css.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/umd/vue-ctk-date-time-picker.min.js

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/umd/vue-ctk-date-time-picker.min.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/vue-ctk-date-time-picker.min.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.

‎dist/vue-ctk-date-time-picker.min.css.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/vue-ctk-date-time-picker.min.js

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/vue-ctk-date-time-picker.min.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-lock.json

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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-ctk-date-time-picker",
3-
"version": "1.1.40",
3+
"version": "1.2.0",
44
"description": "A vue component for select date & time (by Chronotruck)",
55
"author": "Louis Mazel <[email protected]>",
66
"main": "dist/vue-ctk-date-time-picker.min.js",

‎src/App.vue

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div id="app">
33
<div
44
id="vueCtkDateTimePicker"
5+
class="ctk-date-time-picker"
56
style="width: 90%; margin: 0 auto;">
67
<header>
78
<img
@@ -56,9 +57,9 @@
5657
tabindex="-1"
5758
style="height: 110px;">
5859
<ctk-date-time-picker
60+
v-model="value2"
5961
format="YYYY-MM-DD"
6062
formatted="ddd D MMM YYYY"
61-
v-model="value2"
6263
label="Choose date"
6364
disable-time
6465
/>
@@ -131,10 +132,11 @@
131132
</div>
132133
<div class="components-container flex">
133134
<div class="component-container flex-1">
134-
<h3>Inline DateTimePicker</h3>
135+
<h3>Inline DateTimePicker && disabled dates</h3>
135136
<p>v-model = {{ value || 'null' }}</p>
136137
<ctk-date-time-picker
137138
v-model="value"
139+
:disabled-dates="['2018-04-03', '2018-04-07', '2018-04-09', '2018-04-11', '2018-04-13', '2018-04-15', '2018-04-17', '2018-04-19']"
138140
label="Choose date time"
139141
no-weekends-days
140142
without-input
@@ -146,6 +148,7 @@
146148
style="height: 100px;">
147149
<ctk-date-time-picker
148150
v-model="value"
151+
:disabled-dates="['2018-04-03', '2018-04-07', '2018-04-09', '2018-04-11', '2018-04-13', '2018-04-15', '2018-04-17', '2018-04-19']"
149152
label="Choose date time"
150153
no-weekends-days
151154
without-input

‎src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@
8383
:color="color"
8484
:min-date="minDate"
8585
:max-date="maxDate"
86+
:disabled-dates="disabledDates"
8687
:value="value"
8788
@change-date="selectDate"
8889
@change-month="changeMonth"
@@ -155,7 +156,8 @@
155156
noWeekendsDays: { type: Boolean, default: Boolean },
156157
autoClose: { type: Boolean, default: Boolean },
157158
enableButtonValidate: { type: Boolean, default: Boolean },
158-
value: { type: String, default: String }
159+
value: { type: String, default: String },
160+
disabledDates: { type: Array, default: Array }
159161
},
160162
data () {
161163
return {
@@ -262,7 +264,6 @@
262264
</script>
263265

264266
<style lang="scss" scoped>
265-
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
266267
@import "../assets/animation.scss";
267268
.datetimepicker {
268269
position: absolute;

‎src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
<button
5858
v-for="day in monthDays"
5959
:key="day.format('D')"
60-
:class="{selected: isSelected(day) && value, disabled: (isDisabled(day) || isWeekEndDay(day)), enable: !(isDisabled(day) || isWeekEndDay(day))}"
60+
:class="{selected: isSelected(day) && value && !isDisabled(day), disabled: (isDisabled(day) || isWeekEndDay(day)), enable: !(isDisabled(day) || isWeekEndDay(day))}"
6161
type="button"
6262
tabindex="-1"
6363
class="datepicker-day flex align-center justify-content-center"
@@ -119,6 +119,10 @@
119119
value: {
120120
type: String,
121121
default: String
122+
},
123+
disabledDates: {
124+
type: Array,
125+
default: Array
122126
}
123127
},
124128
data () {
@@ -151,14 +155,20 @@
151155
return this.month.getFormatted()
152156
},
153157
isDisabled (day) {
154-
if (this.minDate && this.maxDate) {
155-
return !moment(day).isBetween(this.minDate, this.maxDate)
156-
} else if (this.minDate) {
157-
return moment(day).isBefore(this.minDate)
158-
} else if (this.maxDate) {
159-
return moment(day).isAfter(this.maxDate)
160-
}
161-
return false
158+
return (
159+
this.isDateDisabled(day) ||
160+
this.isBeforeMinDate(day) ||
161+
this.isAfterEndDate(day)
162+
)
163+
},
164+
isDateDisabled (day) {
165+
return this.disabledDates.indexOf(day.format('YYYY-MM-DD')) > -1
166+
},
167+
isBeforeMinDate (day) {
168+
return moment(day).isBefore(this.minDate)
169+
},
170+
isAfterEndDate (day) {
171+
return moment(day).isAfter(this.maxDate)
162172
},
163173
isSelected (day) {
164174
return moment(moment(this.dateTime).format('YYYY-MM-DD')).isSame(day.format('YYYY-MM-DD'))

‎src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -5,41 +5,38 @@
55
class="ctk-date-time-picker"
66
>
77
<div
8+
v-if="!withoutInput"
89
ref="parent"
910
:class="{'is-focused': isFocus || isVisible, 'has-value': dateFormatted, 'has-error': errorHint, 'is-disabled': disabled}"
1011
class="field"
1112
@click="showDatePicker"
1213
>
13-
<div v-if="!withoutInput">
14+
<input
15+
ref="CtkDateTimePicker"
16+
:id="id"
17+
:value="dateFormatted"
18+
:placeholder="label"
19+
:disabled="disabled"
20+
:style="getBorderStyle"
21+
type="text"
22+
class="field-input"
23+
readonly
24+
@focus="onFocus"
25+
>
1426

15-
<input
16-
ref="CtkDateTimePicker"
17-
:id="id"
18-
:value="dateFormatted"
19-
:placeholder="label"
20-
:disabled="disabled"
21-
:style="isFocus && !errorHint || isVisible ? borderStyle : ''"
22-
type="text"
23-
class="field-input"
24-
readonly
25-
@focus="onFocus"
26-
>
27-
28-
<label
29-
ref="label"
30-
:for="id"
31-
:class="hint ? (errorHint ? 'text-danger' : 'text-primary') : ''"
32-
:style="isFocus || isVisible ? colorStyle : ''"
33-
class="field-label"
34-
>
35-
{{ hint || label }}
36-
</label>
37-
38-
</div>
27+
<label
28+
ref="label"
29+
:for="id"
30+
:class="hint ? (errorHint ? 'text-danger' : 'text-primary') : null"
31+
:style="getColorStyle"
32+
class="field-label"
33+
>
34+
{{ hint || label }}
35+
</label>
3936
</div>
4037

4138
<div
42-
v-if="overlay && (isVisible && !withoutInput)"
39+
v-if="overlay && isVisible && !withoutInput"
4340
class="time-picker-overlay"
4441
@click.stop="unFocus"
4542
/>
@@ -63,6 +60,7 @@
6360
:no-weekends-days="noWeekendsDays"
6461
:enable-button-validate="enableButtonValidate"
6562
:auto-close="autoClose"
63+
:disabled-dates="disabledDates"
6664
@change-date="changeDate"
6765
@validate="validate"
6866
/>
@@ -105,7 +103,8 @@
105103
autoClose: {type: Boolean, default: false},
106104
disabled: {type: Boolean, default: false},
107105
overlay: {type: Boolean, default: true},
108-
enableButtonValidate: {type: Boolean, default: false}
106+
enableButtonValidate: {type: Boolean, default: false},
107+
disabledDates: { type: Array, default: Array }
109108
},
110109
data: function () {
111110
return {
@@ -117,15 +116,17 @@
117116
}
118117
},
119118
computed: {
120-
colorStyle: function () {
121-
return {
122-
color: this.color
123-
}
119+
getColorStyle: function () {
120+
const cond = this.isFocus || this.isVisible
121+
return cond
122+
? { color: this.color }
123+
: null
124124
},
125-
borderStyle: function () {
126-
return {
127-
borderColor: this.color
128-
}
125+
getBorderStyle: function () {
126+
const cond = (this.isFocus && !this.errorHint) || this.isVisible
127+
return cond
128+
? { borderColor: this.color }
129+
: null
129130
},
130131
dateTime () {
131132
const date = this.disableDate
@@ -190,6 +191,7 @@
190191
</script>
191192

192193
<style lang="scss">
194+
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
193195
@import "./assets/main.scss";
194196
.ctk-date-time-picker {
195197
width: 100%;

0 commit comments

Comments
 (0)