datepicker native component not rendered correctly

0 Answers 123 Views
DateInput DatePicker
Kenji
Top achievements
Rank 1
Iron
Iron
Kenji asked on 06 Jan 2023, 02:39 AM
Hi i want to ask about datepicker in this Demo. first of all i already implement datepicker and successfully show the UI but not same like in demo. my guess is that css of datepicker is not loaded and datepicker UI looks big when i open it
i attach file of datepicker UI right now in my grid table. is there something wrong with my setup?
<datepicker
                                              :style="{ width: '145px' }"
                                              :default-value="new Date()"
                                              :format="'MMM DD, YYYY'"
                                              v-model="interviewDate"
                                            >
                                            </datepicker>
import { DatePicker, TimePicker } from '@progress/kendo-vue-dateinputs';
components: {
    'datepicker': DatePicker
  },

appreciate your help. thanks
you can ask if my english is confusing 
Petar
Telerik team
commented on 06 Jan 2023, 11:50 AM

Hi, Kenji.

I can confirm that the reported behavior seems like a CSS issue. The DatePicker and all Kendo UI for Vue components require a Kendo Theme to be loaded into the project the components are used. 

With the above in mind, if all other Kendo UI for Vue components is working correctly in your application, I would assume that here we are talking about a custom CSS rule that makes the DatePicker looks as on the shared screenshot. 

Here is a list of things you can check and share details about if you don't manage to resolve the issue:

  • Option 1: Check the version of the Kendo Theme used in your project to the latest one. Update the version to the latest one(currently it is 5.12.0), clear the cache of your browser(or test in an incognito tab) and reload your project. 
  • Option 2: Check the version of the Kendo DatePicker that you use. Update it to the latest version and test it like in the first point above.
  • Option 3: Just for the test, remove all your custom CSS(except the Kendo Theme) from your project and see if the DatePicker is displayed correctly. If it is displayed correctly, then you can check your CSS implementation for a definition that is breaking the layout of the DatePicker component.

Please check the above suggestions and let me know if they help you resolve the reported issue.

Kenji
Top achievements
Rank 1
Iron
Iron
commented on 09 Jan 2023, 01:57 AM | edited

Hi Petar.

i'm importing bootstrap theme and using native component

i already tried to do as you list in option but still no luck with datepciker UI

this is a list of imported kendo component and version that i use in parent component

"@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.1",
    "@progress/kendo-dropdowntree-vue-wrapper": "^2022.3.913",
    "@progress/kendo-grid-vue-wrapper": "^2022.3.913",
    "@progress/kendo-licensing": "^1.2.2",
    "@progress/kendo-theme-bootstrap": "^5.12.0",
    "@progress/kendo-ui": "^2022.3.913",
    "@progress/kendo-vue-animation": "^3.7.3",
    "@progress/kendo-vue-common": "^3.7.3",
    "@progress/kendo-vue-data-tools": "^3.7.1",
    "@progress/kendo-vue-dateinputs": "^3.7.1",
    "@progress/kendo-vue-dialogs": "^3.7.1",
    "@progress/kendo-vue-dropdowns": "^3.7.1",
    "@progress/kendo-vue-grid": "^3.7.1",
    "@progress/kendo-vue-indicators": "^3.6.4",
    "@progress/kendo-vue-inputs": "^3.7.1",
    "@progress/kendo-vue-intl": "^3.7.1",
    "@progress/kendo-vue-upload": "^3.7.3",


import '@progress/kendo-theme-bootstrap/dist/all.css'
import { Grid, GridToolbar, GridColumnMenuCheckboxFilter } from '@progress/kendo-vue-grid';
import { Button } from '@progress/kendo-vue-buttons';
import { MultiSelect } from '@progress/kendo-vue-dropdowns';
import { Upload } from '@progress/kendo-vue-upload';
import { orderBy, filterBy, process } from '@progress/kendo-data-query';
import { Slide } from '@progress/kendo-vue-animation';
import { DatePicker, TimePicker } from '@progress/kendo-vue-dateinputs';
import { IntlProvider, load, loadMessages, LocalizationProvider } from '@progress/kendo-vue-intl';
Kenji
Top achievements
Rank 1
Iron
Iron
commented on 09 Jan 2023, 04:58 AM

Hi Petar.

datepicker implementation is working right now and you can close this question
there is a global css that broke datepicker css and finally found a solution from there

thanks a lot for your help

No answers yet. Maybe you can help?

Tags
DateInput DatePicker
Asked by
Kenji
Top achievements
Rank 1
Iron
Iron
Share this question
or