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 ?

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.

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

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...

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

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!

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?

 

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.

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.