Telerik Forums
Kendo UI for Vue Forum
12 questions
Sort by
1 answer
52 views

Hello,

I can't make it work to have a custom placeholder when value of kendo-date-picker is empty. It always show the expected format even with the placeholder parameter set.

Example: https://cnslg5.stackblitz.io

One would expect to have the defined placeholder to be shown and not the date-input format-placeholder. How to avoid that ?

Plamen
Telerik team
 answered on 07 Aug 2020
4 answers
205 views

I have a native DatePicker that I am using in an application with many components that use the Kendo wrapper validation widget. I am trying to get the behavior and appearance of the DatePicker to match that of the existing components. Validation should occur when a field loses focus and an invalid field should have a red outline and red error message below it. I tried to use the native DatePicker validation functionality, but I was unable to make validation consistent with all of the other components.

I am able to use the Kendo wrapper validation widget to perform validation when a field loses focus and display an error message, but I have been unable to get a red outline on an DatePicker in the invalid state. How can I accomplish this? 

See https://stackblitz.com/edit/esiptm for an example.

Alex
Top achievements
Rank 1
Veteran
Iron
Iron
 answered on 09 Oct 2020
1 answer
72 views

We have a Kendo vue UI Grid column with Vue bootstrap Datepicker as a custom column.

When we click the calender icon it is partially showing inside the cell. I want it to be show as an popup outside the cell.

Below is the code snippet from the custom cell component

<template>

 <td class="cell-editable">
    <b-input-group>
      <b-form-input
        :value="aufValue | date"
        type="text"
        placeholder="tt.mm.jjjj"
        :disabled="!canEdit"
      ></b-form-input>
      <b-input-group-append>
        <b-form-datepicker
          size="sm"
          button-only
          :value-as-date="true"
          v-model="aufValue"
          locale="de-AT"
          :disabled="!canEdit"
        ></b-form-datepicker>
      </b-input-group-append>
    </b-input-group>
  </td>

<template>

right now it show like the attached screenshot:

Please suggest a solution for achieving the same.

Thank You

Veselin Tsvetanov
Telerik team
 answered on 10 Jun 2020
3 answers
64 views

Hi,

 

That's it, i need to get the selected date as a date object, is there any way besides manually parsing the string?

 

 

Thanks...

Wilma
Top achievements
Rank 1
 answered on 13 Jun 2019
6 answers
107 views

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
Telerik team
 answered on 20 Aug 2019
1 answer
420 views

I try to use v-bind:steps="{ hour: 1, minute: 15 }" but turns out it doesn't have any effect.

I would like to make sure if it is not supported or I have misconfigured.

 

Thanks!

Petar
Telerik team
 answered on 03 Jun 2021
1 answer
633 views

I have a VueJS app that uses the kendo controls.

Is there a way to use the datepicker or another kendo control to select multiple dates? For example by holding the Ctrl+clicking on each date?

Is there an example?

 

Petar
Telerik team
 answered on 08 Apr 2022
5 answers
36 views

Hello,
We use kendo for Vue and tried implementing a DateInput element in our Vue app.


When we try to use this element on a smartphone, we hoped it will use the OS date input, just like it works with any <input> element of type “date”. But we found it is rendered as type “text”.


This means the UX is not as good as we hoped it will be.
Is there a way to render it as <input> of type “date” so it will behave accordingly?

https://www.telerik.com/kendo-vue-ui/components/dateinputs-wrapper/dateinput/

 

Thanks,

Ron.

Petar
Telerik team
 answered on 12 Nov 2020
1 answer
217 views

Hello Folks, 

After updating vue to lattest version, I have this error after each 'npm run build' command:

 

Maybe, you have some project example with vue 3 and these libs (@progress/kendo-base-components-vue-wrapper,  @progress/kendo-base-components-vue-wrapper etc).

Here is my packege.json:

{
  "name": "",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "3.0.11",
    "vue-template-compiler": "^2.6.12",
    "@progress/kendo-base-components-vue-wrapper": "^2021.1.330",
    "@progress/kendo-charts-vue-wrapper": "^2021.1.330",
    "@progress/kendo-inputs-vue-wrapper": "^2021.1.330",
    "@progress/kendo-licensing": "^1.1.4",
    "@progress/kendo-popups-vue-wrapper": "^2021.1.330",
    "@progress/kendo-theme-bootstrap": "^4.35.1",
    "@progress/kendo-ui": "^2021.1.119",
    "@progress/kendo-vue-dateinputs": "^2.1.5",
    "@progress/kendo-vue-dropdowns": "^2.1.5",
    "@progress/kendo-vue-inputs": "^2.1.5",
    "@progress/kendo-vue-intl": "^2.1.5",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "cldr-core": "36.0.0",
    "cldr-dates-full": "36.0.0",
    "cldr-numbers-full": "36.0.0",
    "core-js": "^3.6.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.11",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue": "3.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

 

 

Thanks.

Andrew
Top achievements
Rank 1
Iron
 answered on 05 May 2021
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
Spreadsheet wrapper
DatePicker
Editor wrapper
Input
DataSource wrappers (package)
DateInput
MultiSelect
NumericTextBox
Scheduler wrapper
Styling / Themes
DateTimePicker
Gantt wrapper
Pager
Checkbox
Editor
Upload
DropDownList wrapper
Localization
Window
Tooltip
Calendar
Chart wrappers (package)
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Chart
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TreeView wrapper
Error
FloatingLabel
Form
TextArea
Scheduler
Splitter
PanelBar
TreeView
Notification
Menu
Toolbar
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
ComboBox wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
MultiSelect wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider
Slider wrapper
Switch wrapper
TimePicker
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
TabStrip
Card
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Drawer
Loader
ProgressBar
Stepper
DateRangePicker
Switch
Gauge
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
TreeList
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
ListView
Signature
ChunkProgressBar
FontIcon
SVGIcon
+? more
Top users last month
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Raju
Top achievements
Rank 1
Iron
özer
Top achievements
Rank 2
Veteran
Iron
Blazor
Top achievements
Rank 1
Iron
FranckSix
Top achievements
Rank 2
Veteran
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Ivan
Top achievements
Rank 3
Iron
Iron
Iron
Raju
Top achievements
Rank 1
Iron
özer
Top achievements
Rank 2
Veteran
Iron
Blazor
Top achievements
Rank 1
Iron
FranckSix
Top achievements
Rank 2
Veteran
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?