1. Home
  2. Forum
  3. Vue
  4. Open calendar of select

Open calendar of select

Is there a simple way that I can make the calendar open when someone selects the DatePicker input. I would think there'd be a Boolean prop along the lines of, "openOnSelect" but I can't find anything of the sorts. What is the most streamline way to achieve this?


Thanks

7 Replies
AB Ashokkumar Balasubramanian Syncfusion Team July 9, 2019 09:04 AM UTC

Hi Harrison, 
 
Greetings from Syncfusion support. 
 
You can use the focus event to open the DatePicker popup on focusing the input element. Please find the below code block. 
 
<ejs-datepicker ref='datePicker' id='datepicker' placeholder='Select a date' :focus='onFocus'></ejs-datepicker> 
 
 
export default { 
     name: 'app', 
     data() { 
        return { 
             msg: 'Syncfusion EJ2 DatePicker Component' 
        } 
     }, 
     methods: { 
        onFocus: function (args) { 
            this.$refs.datePicker.ej2Instances.show(); 
        } 
      } 
} 
 
 
 
To know more details about show method, please refer the below documentation. 
 
 
Could you please check the provided information and let us know, if you need any further assistance? 
 
Regards, 
Ashokkumar B. 


HH Harrison Haigler July 9, 2019 03:33 PM UTC

My issue is that I am dynamically populating a list of times so I cannot use refs and callback methods.

AB Ashokkumar Balasubramanian Syncfusion Team July 10, 2019 10:03 AM UTC

 
Sorry for the inconvenience. 
 
We have checked your latest query at our end, but we cannot identify your exact problem. We suspect that, you have tried to render more than one picker components(dynamically) and open the popup element on particular input focus action. For this case, you can specify anyone of the HTML attributes in dynamic component and validate the attributes in focus event to open the popup element. Please check the below code block. 
 
    <div class="datePicker"> 
        <component id="date" :is="dynamicComponent"></component> 
    </div> 
     
Vue.component("some-other-component", { 
        template: ` <ejs-datepicker placeholder='Select a date' :focus='onFocus'></ejs-datepicker>`, 
        data: function () { 
            return { 
            }; 
        }, 
        methods: { 
            onFocus: function (args) { 
                if (args.model.inputElement.id == "date") 
                    args.model.inputElement.ej2_instances[0].show(); 
            } 
        } 
    }); 
 
    export default Vue.extend({ 
        name: "app", 
        data: function () { 
            return { 
                dynamicComponent: `some-other-component` 
            }; 
        } 
    }); 
 
Modified Sample: 
 
 
If we misunderstood your requirement, kindly revert us with a code snippets or sample or modify the above attached sample to reproduce the reported issue. This will make us to give you a prompt solution at the earliest.   
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Ashokkumar B. 


HH Harrison Haigler July 12, 2019 05:54 PM UTC

This is an example of what i am trying to do.

```
<div v-for="date in listOfDate">
  <ejs-datepicker
    :showClearButton="false"
    :floatLabelType="'Auto'"
    :allowEdit="false"
    :placeholder="'Date'"
    :value="date"
  ></ejs-datepicker>              
</div>
```

It would be great if I could just add a prop like "openOnSelect" that would open the calendar when the datepicker is selected. I hope this helps clarify

AB Ashokkumar Balasubramanian Syncfusion Team July 16, 2019 03:56 PM UTC

Hi Harrison Haigler, 
 
Thanks for your suggestion and we will add the requested requirement as a feature at our end and this support will be included in any one of our upcoming Volume releases. We will consider the feature in our road map based on the customer requests and priority. 
 
You can track the feature request from the below feedback link. 
 
 
Also, we suggest you use the below work around solution as mentioned below until get the support from our end. We have prepared the sample and attached below. 
 
<template> 
 
<div id="app"> 
 
<div v-for="date in listOfDate"> 
 
<ejs-datepicker ref="datePicker" 
 
:showClearButton="false" 
 
:floatLabelType="'Auto'" 
 
:allowEdit="false" 
 
:placeholder="'Date'" 
 
:value="date" 
 
:focus='onFocus' 
 
></ejs-datepicker> 
 
</div> 
 
</div> 
 
</template> 
<script> 
 
import Vue from 'vue'; 
 
import { DatePickerPlugin } from '@syncfusion/ej2-vue-calendars'; 
 
 
 
Vue.use(DatePickerPlugin); 
 
export default { 
 
data () { 
 
return { 
 
listOfDate: [new Date(), new Date("3/3/2019"), new Date("4/4/2019")] 
 
} 
 
}, 
 
methods: { 
 
onFocus: function (args) { 
 
args.model.show(); 
 
} 
 
} 
 
} 
 
Sample:  
 
 
Please let us know, if you have any concern on this. 
 
Regards, 
Ashokkumar B. 


HH Harrison Haigler July 22, 2019 02:21 PM UTC

Thanks for the help! 

AB Ashokkumar Balasubramanian Syncfusion Team July 24, 2019 09:28 AM UTC

Hi Harrison Haigler, 
 
Most Welcome. 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Ashokkumar B. 


Loader.
Up arrow icon