DatePicker Container ID issue (#157)

chronotruck · Apr 19, 2019 · 4e69128 · 4e69128
1 parent 622f43e
commit 4e69128
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 1 deletion.
diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    id="DatePicker"
+    :id="`${id}-DatePicker`"
     :class="{'flex-1 inline': inline, 'p-0 range flex-1': range, 'is-dark': dark, 'has-shortcuts': range && !noShortcuts}"
     class="datepicker-container flex flex-fixed"
   >
@@ -165,6 +165,7 @@
     },
     mixins: [KeyboardAccessibility],
     props: {
+      id: { type: String, default: String },
       value: { type: [String, Object], default: String },
       color: { type: String, default: String },
       minDate: { type: String, default: String },

diff --git a/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue b/src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
@@ -31,6 +31,7 @@
           <!-- NEED 'YYYY-MM-DD' format -->
           <DatePicker
             v-if="!onlyTime"
+            :id="id"
             v-model="date"
             :dark="dark"
             :month="month"
@@ -108,6 +109,7 @@
     props: {
       value: { type: [String, Object], default: String },
       visible: { type: Boolean, required: true, default: false },
+      id: { type: String, default: String },
       position: { type: String, default: 'bottom' },
       inline: { type: Boolean, default: false },
       dark: { type: Boolean, default: false },

diff --git a/src/VueCtkDateTimePicker/index.vue b/src/VueCtkDateTimePicker/index.vue
@@ -31,6 +31,7 @@
     />
     <PickersContainer
       v-if="!disabled && isMounted"
+      :id="id"
       ref="agenda"
       v-model="dateTime"
       :visible="hasPickerOpen"