🚀 {feature} Add disabled dates array (#24)

🚀 v1.2.0 : {feature} Add disabled dates array
chronotruck · Oct 9, 2018 · 9043a07 · 9043a07
1 parent 8ed8e17
commit 9043a07
Show file tree

Hide file tree

Showing 23 changed files with 86 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -60,7 +60,7 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
 | color***     | String (hex) | no    | dodgerblue |
 | minute-interval | Int | no    | 1    |
 | formatted   | string | no    | 'llll' (momentjs format) |
-| format   | string | no      | 'YYYY-MM-DDTHH:mm' |
+| format   | string | no      | - |
 | time-format   | string | no  | 'H:mm a' |
 | locale   | string | no     | en |
 | disable-time   | Boolean | no     | false |
@@ -74,6 +74,7 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
 | no-weekends-days | Boolean | no | false |
 | auto-close | Boolean | no | false |
 | without-input | Boolean | no | false |
+| disabled-dates***** | Boolean | no | [] |
 
 *hint : Is a text that replaces the label/placeholder
 
@@ -83,6 +84,8 @@ Vue.component('vue-ctk-date-time-picker', VueCtkDateTimePicker);
 
 ****min-date & max-date : Must be 'YYYY-MM-DD' format
 
+*****Disabled-Dates is an Array of dates in 'YYYY-MM-DD' format (ex: `['2018-04-03', '2018-04-07', '2018-04-09'])
+
 
 ## Contribution
 

diff --git a/demo/index.html b/demo/index.html
@@ -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>
+<!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>
diff --git a/.../app.b5dd9eebb4a82c2e37351b1c0e6486a9.css → .../app.160515f52ccc1fa47230d0f0081c2217.css b/.../app.b5dd9eebb4a82c2e37351b1c0e6486a9.css → .../app.160515f52ccc1fa47230d0f0081c2217.css
diff --git a/....b5dd9eebb4a82c2e37351b1c0e6486a9.css.map → ....160515f52ccc1fa47230d0f0081c2217.css.map b/....b5dd9eebb4a82c2e37351b1c0e6486a9.css.map → ....160515f52ccc1fa47230d0f0081c2217.css.map
diff --git a/demo/static/js/app.91181ebab409053b436e.js b/demo/static/js/app.91181ebab409053b436e.js
diff --git a/demo/static/js/app.91181ebab409053b436e.js.map b/demo/static/js/app.91181ebab409053b436e.js.map
diff --git a/demo/static/js/app.e56a2602d6d3b9ee948e.js b/demo/static/js/app.e56a2602d6d3b9ee948e.js
diff --git a/demo/static/js/app.e56a2602d6d3b9ee948e.js.map b/demo/static/js/app.e56a2602d6d3b9ee948e.js.map
diff --git a/demo/static/js/manifest.3ad1d5771e9b13dbdad2.js.map b/demo/static/js/manifest.3ad1d5771e9b13dbdad2.js.map
diff --git a/dist/umd/vue-ctk-date-time-picker.min.css b/dist/umd/vue-ctk-date-time-picker.min.css
diff --git a/dist/umd/vue-ctk-date-time-picker.min.css.map b/dist/umd/vue-ctk-date-time-picker.min.css.map
diff --git a/dist/umd/vue-ctk-date-time-picker.min.js b/dist/umd/vue-ctk-date-time-picker.min.js
diff --git a/dist/umd/vue-ctk-date-time-picker.min.js.map b/dist/umd/vue-ctk-date-time-picker.min.js.map
diff --git a/dist/vue-ctk-date-time-picker.min.css b/dist/vue-ctk-date-time-picker.min.css
diff --git a/dist/vue-ctk-date-time-picker.min.css.map b/dist/vue-ctk-date-time-picker.min.css.map
diff --git a/dist/vue-ctk-date-time-picker.min.js b/dist/vue-ctk-date-time-picker.min.js
diff --git a/dist/vue-ctk-date-time-picker.min.js.map b/dist/vue-ctk-date-time-picker.min.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-ctk-date-time-picker",
-  "version": "1.1.40",
+  "version": "1.2.0",
   "description": "A vue component for select date & time (by Chronotruck)",
   "author": "Louis Mazel <[email protected]>",
   "main": "dist/vue-ctk-date-time-picker.min.js",

diff --git a/src/App.vue b/src/App.vue
@@ -2,6 +2,7 @@
   <div id="app">
     <div
       id="vueCtkDateTimePicker"
+      class="ctk-date-time-picker"
       style="width: 90%; margin: 0 auto;">
       <header>
         <img
@@ -56,9 +57,9 @@
             tabindex="-1"
             style="height: 110px;">
             <ctk-date-time-picker
+            v-model="value2"
             format="YYYY-MM-DD"
             formatted="ddd D MMM YYYY"
-            v-model="value2"
             label="Choose date"
             disable-time
             />
@@ -131,10 +132,11 @@
       </div>
       <div class="components-container flex">
         <div class="component-container flex-1">
-          <h3>Inline DateTimePicker</h3>
+          <h3>Inline DateTimePicker && disabled dates</h3>
           <p>v-model = {{ value || 'null' }}</p>
           <ctk-date-time-picker
             v-model="value"
+            :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']"
             label="Choose date time"
             no-weekends-days
             without-input
@@ -146,6 +148,7 @@
             style="height: 100px;">
             <ctk-date-time-picker
             v-model="value"
+            :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']"
             label="Choose date time"
             no-weekends-days
             without-input

diff --git a/src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue b/src/vue-ctk-date-time-picker/_subs/CtkDatePickerAgenda.vue
@@ -83,6 +83,7 @@
             :color="color"
             :min-date="minDate"
             :max-date="maxDate"
+            :disabled-dates="disabledDates"
             :value="value"
             @change-date="selectDate"
             @change-month="changeMonth"
@@ -155,7 +156,8 @@
       noWeekendsDays: { type: Boolean, default: Boolean },
       autoClose: { type: Boolean, default: Boolean },
       enableButtonValidate: { type: Boolean, default: Boolean },
-      value: { type: String, default: String }
+      value: { type: String, default: String },
+      disabledDates: { type: Array, default: Array }
     },
     data () {
       return {
@@ -262,7 +264,6 @@
 </script>
 
 <style lang="scss" scoped>
-  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
   @import "../assets/animation.scss";
   .datetimepicker {
     position: absolute;

diff --git a/src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue b/src/vue-ctk-date-time-picker/_subs/_subs/CtkDatePicker.vue
@@ -57,7 +57,7 @@
           <button
             v-for="day in monthDays"
             :key="day.format('D')"
-            :class="{selected: isSelected(day) && value, disabled: (isDisabled(day) || isWeekEndDay(day)), enable: !(isDisabled(day) || isWeekEndDay(day))}"
+            :class="{selected: isSelected(day) && value && !isDisabled(day), disabled: (isDisabled(day) || isWeekEndDay(day)), enable: !(isDisabled(day) || isWeekEndDay(day))}"
             type="button"
             tabindex="-1"
             class="datepicker-day flex align-center justify-content-center"
@@ -119,6 +119,10 @@
       value: {
         type: String,
         default: String
+      },
+      disabledDates: {
+        type: Array,
+        default: Array
       }
     },
     data () {
@@ -151,14 +155,20 @@
         return this.month.getFormatted()
       },
       isDisabled (day) {
-        if (this.minDate && this.maxDate) {
-          return !moment(day).isBetween(this.minDate, this.maxDate)
-        } else if (this.minDate) {
-          return moment(day).isBefore(this.minDate)
-        } else if (this.maxDate) {
-          return moment(day).isAfter(this.maxDate)
-        }
-        return false
+        return (
+          this.isDateDisabled(day) ||
+          this.isBeforeMinDate(day) ||
+          this.isAfterEndDate(day)
+        )
+      },
+      isDateDisabled (day) {
+        return this.disabledDates.indexOf(day.format('YYYY-MM-DD')) > -1
+      },
+      isBeforeMinDate (day) {
+        return moment(day).isBefore(this.minDate)
+      },
+      isAfterEndDate (day) {
+        return moment(day).isAfter(this.maxDate)
       },
       isSelected (day) {
         return moment(moment(this.dateTime).format('YYYY-MM-DD')).isSame(day.format('YYYY-MM-DD'))

diff --git a/src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue b/src/vue-ctk-date-time-picker/vue-ctk-date-time-picker.vue
@@ -5,41 +5,38 @@
     class="ctk-date-time-picker"
   >
     <div
+      v-if="!withoutInput"
       ref="parent"
       :class="{'is-focused': isFocus || isVisible, 'has-value': dateFormatted, 'has-error': errorHint, 'is-disabled': disabled}"
       class="field"
       @click="showDatePicker"
     >
-      <div v-if="!withoutInput">
+      <input
+        ref="CtkDateTimePicker"
+        :id="id"
+        :value="dateFormatted"
+        :placeholder="label"
+        :disabled="disabled"
+        :style="getBorderStyle"
+        type="text"
+        class="field-input"
+        readonly
+        @focus="onFocus"
+      >
 
-        <input
-          ref="CtkDateTimePicker"
-          :id="id"
-          :value="dateFormatted"
-          :placeholder="label"
-          :disabled="disabled"
-          :style="isFocus && !errorHint || isVisible ? borderStyle : ''"
-          type="text"
-          class="field-input"
-          readonly
-          @focus="onFocus"
-        >
-
-        <label
-          ref="label"
-          :for="id"
-          :class="hint ? (errorHint ? 'text-danger' : 'text-primary') : ''"
-          :style="isFocus || isVisible ? colorStyle : ''"
-          class="field-label"
-        >
-          {{ hint || label }}
-        </label>
-
-      </div>
+      <label
+        ref="label"
+        :for="id"
+        :class="hint ? (errorHint ? 'text-danger' : 'text-primary') : null"
+        :style="getColorStyle"
+        class="field-label"
+      >
+        {{ hint || label }}
+      </label>
     </div>
 
     <div
-      v-if="overlay && (isVisible && !withoutInput)"
+      v-if="overlay && isVisible && !withoutInput"
       class="time-picker-overlay"
       @click.stop="unFocus"
     />
@@ -63,6 +60,7 @@
       :no-weekends-days="noWeekendsDays"
       :enable-button-validate="enableButtonValidate"
       :auto-close="autoClose"
+      :disabled-dates="disabledDates"
       @change-date="changeDate"
       @validate="validate"
     />
@@ -105,7 +103,8 @@
       autoClose: {type: Boolean, default: false},
       disabled: {type: Boolean, default: false},
       overlay: {type: Boolean, default: true},
-      enableButtonValidate: {type: Boolean, default: false}
+      enableButtonValidate: {type: Boolean, default: false},
+      disabledDates: { type: Array, default: Array }
     },
     data: function () {
       return {
@@ -117,15 +116,17 @@
       }
     },
     computed: {
-      colorStyle: function () {
-        return {
-          color: this.color
-        }
+      getColorStyle: function () {
+        const cond = this.isFocus || this.isVisible
+        return cond
+          ? { color: this.color }
+          : null
       },
-      borderStyle: function () {
-        return {
-          borderColor: this.color
-        }
+      getBorderStyle: function () {
+        const cond = (this.isFocus && !this.errorHint) || this.isVisible
+        return cond
+          ? { borderColor: this.color }
+          : null
       },
       dateTime () {
         const date = this.disableDate
@@ -190,6 +191,7 @@
 </script>
 
 <style lang="scss">
+  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
   @import "./assets/main.scss";
   .ctk-date-time-picker {
     width: 100%;
Original file line number	Diff line number	Diff line change
		@@ -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>
		<!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>