feat(dateinput): Convert span to button

Author: mst101

src/components/DateInput.vue

@@ -2,13 +2,12 @@
   <div :class="{ 'input-group': bootstrapStyling }">
     <slot name="beforeDateInput" />
     <!-- Calendar Button -->
-    <span
+    <button
       v-if="calendarButton"
       class="vdp-datepicker__calendar-button"
-      :class="{
-        'input-group-prepend': bootstrapStyling,
-        'calendar-btn-disabled': disabled,
-      }"
+      :class="{ 'btn input-group-prepend': bootstrapStyling }"
+      :disabled="disabled"
+      type="button"
       @click="toggle"
     >
       <span :class="{ 'input-group-text': bootstrapStyling }">
@@ -19,7 +18,7 @@
           </i>
         </slot>
       </span>
-    </span>
+    </button>
     <!-- Input -->
     <input
       :id="id"
@@ -46,11 +45,13 @@
       @keyup="parseTypedDate"
     />
     <!-- Clear Button -->
-    <span
+    <button
       v-if="clearButton && selectedDate"
       class="vdp-datepicker__clear-button"
-      :class="{ 'input-group-append': bootstrapStyling }"
-      @click="clearDate()"
+      :class="{ 'btn input-group-append': bootstrapStyling }"
+      :disabled="disabled"
+      type="button"
+      @click="clearDate"
     >
       <span :class="{ 'input-group-text': bootstrapStyling }">
         <slot name="clearBtn">
@@ -59,7 +60,7 @@
           </i>
         </slot>
       </span>
-    </span>
+    </button>
     <slot name="afterDateInput" />
   </div>
 </template>

src/styles/style.scss

@@ -6,10 +6,6 @@
   position: relative;
   text-align: left;
   box-sizing: border-box;
-
-  .calendar-btn-disabled {
-    cursor: not-allowed;
-  }
 }
 
 .vdp-datepicker__calendar {
@@ -36,6 +32,15 @@
     position: static;
   }
 
+  button {
+    background: inherit;
+    text-align: center;
+
+    &:disabled {
+      color: #ddd;
+    }
+  }
+
   header {
     display: flex;
     justify-content: space-between;
@@ -261,11 +266,11 @@
 
 .vdp-datepicker__clear-button,
 .vdp-datepicker__calendar-button {
-  cursor: pointer;
+  border: none;
   font-style: normal;
 
-  &.disabled {
-    color: #999;
-    cursor: default;
+  &.input-group-prepend,
+  &.input-group-append {
+    padding: 0;
   }
 }

test/unit/specs/DateInput/typedDates.spec.js

@@ -185,7 +185,7 @@ describe('Datepicker mount', () => {
     })
 
     const input = wrapper.find('input')
-    const calendarButton = wrapper.find('span.vdp-datepicker__calendar-button')
+    const calendarButton = wrapper.find('.vdp-datepicker__calendar-button')
 
     await input.trigger('focus')
     expect(wrapper.vm.isOpen).toBeTruthy()