datepicker native component not rendered correctly

[Kenji]

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]

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]

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]

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