Extending input focus to icon so will be clickable

Question

I have a date picker component (v-date-picker) and I am unable to get the icon, which is a Font Awesome Icon separate from the date-picker to open the calendar on focus (i.e. on click), I tried the solutions described here: How to increase the clickable area of a <a> tag button? With no luck, this should be straightforward but simply not working.

<template>
    <div class="v-date-picker">
      <v-date-picker
        mode="single"
        :value="date"
        @input="emit"
        :placeholder="placeholder"
        popoverVisibility="focus"
        v-bind="$attrs"
        :max-date="maxDate"
        :min-date="minDate"
      >
      </v-date-picker>

      <font-awesome-icon v-bind="$attrs" :icon="['far','calendar']" />
    </div>
</template>
//skip all my code here....
<style lang="scss">
.v-date-picker {
    position:relative;
  input {
    height: 36px;
    display: block;
    border: 1px solid #f3f3f3;
    padding: 8px 12px;
    font-size: 14px;
    background: #f3f3f3;
    box-shadow: 0 0 0 #EAEAEA;
    width: 100%;
    transition: all .3s ease-in-out;
    border-radius: 4px;

    &:hover {
      border-color: #ddd;
      box-shadow: none;
    }

    &:focus {
      border-color: #ea7d1c;
      box-shadow: none;
    }
    }
}

  input::-webkit-input-placeholder { color: #ccc;}
  input::-webkit-input-placeholder { color: #ccc;}
  input::-moz-placeholder { color: #ccc;}
    input:-ms-input-placeholder { color: #ccc;}

.fa-calendar {
  position: absolute;
  right: 10px;
  top: 10px;
    font-size: 16px;
    color: #666;
}
.date-picker .vdp-datepicker__calendar .cell.selected,
.date-picker .vdp-datepicker__calendar .cell.selected.highlighted,
.date-picker .vdp-datepicker__calendar .cell.selected:hover {
    background: #ea7d1c;
        color: white;
}
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
.date-picker .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
    border-color: #ea7d1c;
}
</style>

how do you bind the icon with the date picker? as far as i can see there is no binding for one to open the other — Nikos M., Feb 17 '19 at 14:38
@NikosM. It is not bound to the date picker, the idea is to extend the date picker over the icon so that when clicking on the icon you would actually be clicking on the date picker. I don't have direct access to the date picker code given that it's a prepackaged component. — Michael, Feb 17 '19 at 14:47
i think better solutution is to bind icon with a callable that triggers datepicker to open, datepuicker should provide an API to open/close programmaticaly. This is better IMO — Nikos M., Feb 17 '19 at 14:48
Problem is I don't have access to the trigger function, because this is a pre made component see here: https://github.com/nathanreyes/v-calendar — Michael, Feb 17 '19 at 14:54

score 1 · Answer 1 · answered Feb 17 '19 at 15:16

Forward the click event to the datepicker (which my button here is standing in for):

new Vue({
  el: '#app',
  methods: {
    forward(event) {
      const b = this.$refs.dp;

      b.dispatchEvent(new MouseEvent(event.type, event));
    },
    action() {
      alert('Date picker!');
    }
  }
});

button {
  margin-top: 4rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
</script>
<div id="app">
  <div @click="forward">Click me</div>
  <button ref="dp" @click="action">Not me</button>
</div>

Extending input focus to icon so will be clickable

1 Answers1