DateTimePicker not showing up

[kundarsowjanya]

And here is the code I'm using currently .

import { DateTimePicker,FormItem,Form,Label} from '@ui5/webcomponents-react'

<FormItem
                  label={
                    <Label data-testid="datepicker">
                     Date
                    </Label>
                  }
                >
                  <DateTimePicker

                    formatPattern="MM/dd/yyyy, hh:mm:ss aa"
                    value={minDateFormatted_importProcessStart}
                    onChange={onChangeDate}
                  />
 </FormItem>

but I can see only lable but dateTimePicker is not visible.

with version "@reduxjs/toolkit": "1.5.1", "@ui5/webcomponents": "1.2.3", "@ui5/webcomponents-fiori": "1.2.3", "@ui5/webcomponents-icons": "1.2.3", "@ui5/webcomponents-icons-tnt": "1.2.3", "@ui5/webcomponents-react": "0.22.4", "@ui5/webcomponents-react-base": "0.22.4",

[nnaydenow]

Hi @Lukas742,

Could you please take a look at this because it is working as expecting in: https://codesandbox.io/s/ui5-webcomponents-forked-t3y8yr?file=/src/index.js ?

Regards, Nayden

[nnaydenow]

Hi @kundarsowjanya,

Could you please check the this example: https://codesandbox.io/s/cranky-morning-k2rmom?file=/src/App.js ?

It works as expected.

Regards, Nayden

[kundarsowjanya]

Hi, @nnaydenow

Do I need to use any particular react version or any particular version of package.

this is my package.json

{ "name": "project", "version": "1.5.0", "private": true, "dependencies": { "@reduxjs/toolkit": "1.5.1", "@ui5/webcomponents": "1.4.0", "@ui5/webcomponents-fiori": "1.4.0", "@ui5/webcomponents-icons": "1.4.0", "@ui5/webcomponents-icons-tnt": "1.4.0", "@ui5/webcomponents-react": "0.25.5", "@ui5/webcomponents-react-base": "0.25.5", "axios": "0.26.0", "dateformat": "4.5.1", "dotenv": "8.2.0", "i18next": "20.2.2", "i18next-browser-languagedetector": "3.0.3", "i18next-xhr-backend": "3.1.2", "istanbul-lib-coverage": "2.0.5", "jest": "^24.9.0", "jsdom": "^19.0.0", "lodash": "4.17.21", "moment": "2.29.2", "oidc-client": "1.10.1", "passport": "0.4.1", "properties-parser": "0.3.1", "query-string": "6.8.3", "rc-time-picker": "3.7.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-i18next": "11.8.15", "react-id-generator": "3.0.1", "react-jss": "10.3.0", "react-redux": "7.2.0", "react-router-dom": "5.2.0", "react-scripts": "5.0.1", "react-virtualized": "^9.22.3", "redux": "4.0.5", "redux-oidc": "3.1.7", "typescript": "3.8.3" }, "scripts": { "start": "react-scripts -r dotenv/config start dotenv_config_path=.env", "start:cypress": "react-scripts -r dotenv/config -r @cypress/instrument-cra start dotenv_config_path=.env.test", "build": "react-scripts build", "test": "jest --config=./jest.config.js", "test:update": "jest --updateSnapshot", "eject": "react-scripts eject", "cypress:open": "cypress open", "cypress:build": "react-scripts -r dotenv/config -r @cypress/instrument-cra build dotenv_config_path=.env.test", "cypress:build:serve": "npx serve -s build -l 3000", "cypress:build:run": "cypress run --config baseUrl=http://localhost:3000", "start:cypress:local": "react-scripts -r dotenv/config -r @cypress/instrument-cra start dotenv_config_path=.env.test.local", "cypress:run": "cypress run", "cypress:run:chrome": "cypress run --headless --browser chrome", "cypress:run:chrome:local": "cypress run --config-file cypress-local.json --browser chrome", "reports:mkdir": "npx mkdirp .nyc_output target/reports", "reports:copy": "npm run reports:mkdir && cp cypress-coverage/coverage-final.json target/reports/from-cypress.json && cp target/coverage/jest/coverage-final.json target/reports/from-jest.json", "reports:combine": "nyc merge target/reports && mv coverage.json .nyc_output/out.json", "reports:combined": "nyc report --reporter lcov --report-dir target/coverage/merged", "reports": "npm run reports:copy && npm run reports:combine && npm run reports:combined" }, "eslintConfig": { "extends": "react-app" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "@cypress/code-coverage": "1.14.0", "@cypress/instrument-cra": "1.3.0", "@testing-library/jest-dom": "4.2.4", "@testing-library/react": "9.4.0", "@testing-library/user-event": "7.2.1", "@types/enzyme": "3.10.4", "@types/enzyme-adapter-react-16": "1.0.5", "@types/jest": "25.1.1", "@types/lodash": "4.14.156", "@types/node": "12.7.5", "@types/react": "16.9.51", "@types/react-dom": "16.9.8", "@types/react-redux": "7.1.9", "@types/react-router-dom": "5.1.6", "@types/redux-mock-store": "1.0.2", "babel-plugin-istanbul": "5.2.0", "babel-plugin-transform-class-properties": "6.24.1", "babel-preset-react-app": "9.1.2", "cypress": "6.8.0", "cypress-shadow-dom": "1.4.1", "document-register-element": "1.14.3", "enzyme": "3.11.0", "enzyme-adapter-react-16": "1.15.2", "eslint": "6.8.0", "eslint-config-airbnb": "18.0.1", "eslint-config-prettier": "6.10.0", "eslint-plugin-cypress": "2.10.3", "eslint-plugin-import": "2.22.1", "eslint-plugin-jsx-a11y": "6.2.3", "eslint-plugin-prettier": "3.1.2", "eslint-plugin-react": "7.23.2", "eslint-plugin-react-hooks": "1.7.0", "husky": "4.2.5", "jest-environment-jsdom-sixteen": "1.0.0", "jest-junit": "10.0.0", "jest-junit-reporter": "1.1.0", "jest-sonar-reporter": "2.0.0", "lint-staged": "10.5.3", "nyc": "14.1.1", "prettier": "2.0.5", "redux-mock-store": "1.5.4" }, "husky": { "hooks": { "pre-commit": "npx lint-staged" } }, "lint-staged": { "*.{js,jsx,ts,tsx,json,css,scss,md}": [ "prettier --write", "git add" ] }, "nyc": { "report-dir": "cypress-coverage", "exclude": "src/serviceWorker.ts", "extension": [ ".ts", ".tsx" ] }, "jest-junit": { "outputName": "junit-unit.xml" } }

[kundarsowjanya]

@nnaydenow in my local when inspect I'm getting like this , image Where as when I inspect link which you provide html tag!

is that the issue? Could please suggest me .

[nnaydenow]

Hi @kundarsowjanya,

I'm getting the same DOM when I inspect the isolated snippix.

Since ui5-date-time-picker requires some settings based on OS locale in some cases you have to import additional assets as described in this guide: https://github.com/SAP/ui5-webcomponents/blob/main/docs/1-getting-started/05-using-assets.md

Regards, Nayden