How to open vuejs datepicker on field focus?

Question

The vuejs datepicker opens only when I click on its input field. I want it to pop up when I focus on its field by pressing tab from the previous field.

I looked for solutions on stackoverflow but could not find anything similar.

Here is my code:

const app = new Vue({
  el: '#app',
  components: {
  	vuejsDatepicker
  }
})

<div id="app">
  <input type="text" placeholder="Textbox" autofocus>
  <br><br>
  <vuejs-datepicker placeholder="Datepicker"></vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>

Whenever I press tab after writing something on the textbox, the focus goes to the datepicker field but the picker only pops up when I click on it using mouse. Whereas I want it to open everytime on focus. Can someone help please?

Trigger click on focus?

Slim
– Slim

2019-04-18 06:27:55 +00:00
Commented Apr 18, 2019 at 6:27 — Slim
– Slim, Commented Apr 18, 2019 at 6:27
How to open the datepicker on focus and hide on blur #560

Vucko
– Vucko

2019-04-18 06:28:31 +00:00
Commented Apr 18, 2019 at 6:28 — Vucko
– Vucko, Commented Apr 18, 2019 at 6:28

Slim · Accepted Answer · 2019-04-18 07:06:37Z

2

I had a look at the source.. The focus event is not bound so you may open an issue about that. But you can achieve the effect the following way:

<datepicker ref="dp1" @focusin.native="onfocusin"></datepicker>

And the method:

methods: {
    onfocusin(){
        setTimeout((ev)=>{
            this.$refs.dp1.isOpen || this.$refs.dp1.showCalendar(ev);
        }, 50)
    }
}

Another option is to modify the plugin a via mixin where you can modify the showCalendar method that currently toggles the visibility of the calendar to only allow it to open the calendar:

let myDatepicker = {
    mixins: [datepicker],

    methods: {
        showCalendar(){
            if(this.isOpen) return;

            return datepicker.showCalendar.apply(this, arguments)
        }
    }
}

edited Apr 18, 2019 at 7:06

answered Apr 18, 2019 at 6:37

Slim

1,9641 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pranav Kaistha Over a year ago

Thank you for the response. This works well for focus but does not work properly on click. When I click on the datepicker field, the calendar pop up shows for 1 second and then hides.

Slim Over a year ago

You can move the logic into a method and make proper checks before trying to open the calendar.

lookbadgers · Accepted Answer · 2021-04-09 09:03:39Z

I experienced some issues with the suggested mixin, I have modified it and provided a complete working example below.

If the user clicks or tabs to the field they will not see a flicker and the calendar will only open once.

<template>
    <toggleDatepicker
        ref="datepicker"
        @focusin.native="showCalendar"
        />    
</template>
<script>
    import Datepicker from 'vuejs-datepicker';
    let toggleDatepicker = {
        mixins: [Datepicker],
        methods: {
            showCalendar(){
                if(this.isOpen) return;
                return Datepicker.methods.showCalendar.apply(this);
            }
        }
    };

    export default {
        components: {toggleDatepicker},
        methods: {
            showCalendar() {
                this.$refs.datepicker.$children[0].$emit('showCalendar')
            },
        },

    }
</script>

This is based on:

vuejs-datepicker: ^1.6.2

Collectives™ on Stack Overflow

How to open vuejs datepicker on field focus?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related