Open Kendo Datepicker programmatically in Vue

[Dhanushka]

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

[Veselin Tsvetanov]

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

[Dhanushka]

Thanks veselin

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

Please advice 

 

[Veselin Tsvetanov]

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

[Lindale]

I will discuss various jQuery UI is a curated set of user interface interactions.

[Lindale]

Get an overview of the features the Kendo UI DatePicker wrapper for Vue delivers facetime for pc download app

[Veselin Tsvetanov]

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