We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Open calendar of select

Thread ID:

Created:

Updated:

Platform:

Replies:

145781 Jul 8,2019 03:04 PM UTC Jul 24,2019 09:28 AM UTC Vue 7
loading
Tags: DatePicker
Harrison Haigler
Asked On July 8, 2019 03:04 PM UTC

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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


Harrison Haigler
Replied On 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.

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


Harrison Haigler
Replied On 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

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


Harrison Haigler
Replied On July 22, 2019 02:21 PM UTC

Thanks for the help! 

Ashokkumar Balasubramanian [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon