This is a migrated thread and some comments may be shown as answers.

Open Kendo Datepicker programmatically in Vue

6 Answers 39 Views
This is a migrated thread and some comments may be shown as answers.
Dhanushka
Top achievements
Rank 1
Dhanushka asked on 02 Aug 2019, 05:30 AM

Hi, 

is there a way to open the date picker programmatically by  passing a property? If not are there any alternative ways to do this? I need to open the date picker on label click in vue using  type script.

Thanks

6 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 05 Aug 2019, 10:28 AM
Hello Dhanushka,

Yes, you can open the DatePicker pop-up programmatically using the open() method of the Kendo widget. Also, in the click handler of the <label> element, you could change the value of the data field that holds the selected date:
methods: {
  labelClick: function(e) {
    var picker = this.$refs.datePicker.kendoWidget();
 
    this.currentDate = new Date(2018, 8, 10);
 
    picker.open();
  }
}

Here you could find a StackBlitz sample implementing the above.

Regards,
Veselin Tsvetanov
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Dhanushka
Top achievements
Rank 1
answered on 06 Aug 2019, 05:51 AM

Thanks veselin

I am using type script inside the vue project and Im getting this error when I do the same.

Please advice 

 

0
Veselin Tsvetanov
Telerik team
answered on 07 Aug 2019, 12:45 PM
Hi Dhanushka,

You will need to explicitly specify the type of the DatePicker component and the DatePicker Kendo widget in order to be able to benefit from their typing definitions. That is why you will need to alter the call in the following way:
var picker = (this.$refs.datePicker as DatePicker).kendoWidget() as kendo.ui.DatePicker;

Further information of the Kendo Vue and TypeScript integration could be found in the following documentation article.

Regards,
Veselin Tsvetanov
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Lindale
Top achievements
Rank 1
answered on 16 Aug 2019, 09:33 AM
I will discuss various jQuery UI is a curated set of user interface interactions.
0
Lindale
Top achievements
Rank 1
answered on 16 Aug 2019, 09:35 AM
Get an overview of the features the Kendo UI DatePicker wrapper for Vue delivers facetime for pc download app
0
Veselin Tsvetanov
Telerik team
answered on 20 Aug 2019, 06:46 AM
Hello Lindale,

Could you please, explain what do you mean by the above two posts? Do you face any issues while using the Kendo Vue wrappers or the DatePicker wrapper in particular?

Regards,
Veselin Tsvetanov
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Dhanushka
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Dhanushka
Top achievements
Rank 1
Lindale
Top achievements
Rank 1
Share this question
or