Generator-jhipster: Firefox: If you edit any entity it does not look like Chrome (it's much worse)

[Tonterias]

Firefox: If you edit any entity it does not look like Chrome: DatePicker does not really work. HTML looks and feels pretty weird.

Overview of the issue

It is not a big issue, but may be it is easy to fix. I do not know.

Motivation for or Use Case

Make it look as Chrome

Reproduce the error

No errors, just the weird look and feel. See image

Related issues

No

Suggest a Fix

No idea

JHipster Version(s)

V6.6.0

JHipster configuration

.yo-rc.json file

{
    "generator-jhipster": {
        "promptValues": {
            "packageName": "es.mibar.web",
            "nativeLanguage": "es"
        },
        "jhipsterVersion": "6.6.0",
        "applicationType": "monolith",
        "baseName": "mibar",
        "packageName": "es.mibar.web",
        "packageFolder": "es/mibar/web",
        "serverPort": "8080",
        "authenticationType": "session",
        "cacheProvider": "ehcache",
        "enableHibernateCache": true,
        "websocket": false,
        "databaseType": "sql",
        "devDatabaseType": "h2Disk",
        "prodDatabaseType": "postgresql",
        "searchEngine": false,
        "messageBroker": false,
        "serviceDiscoveryType": false,
        "buildTool": "gradle",
        "enableSwaggerCodegen": false,
        "rememberMeKey": "94e48c3cf2531fcabaf1f1cf2dda23614015c47e7e42f82dde2f70373993b967b64b9376b5be2809b959ccd6403d8321f234",
        "embeddableLaunchScript": false,
        "useSass": true,
        "clientPackageManager": "npm",
        "clientFramework": "angularX",
        "clientTheme": "none",
        "clientThemeVariant": "",
        "creationTimestamp": 1577988308462,
        "testFrameworks": [],
        "jhiPrefix": "jhi",
        "entitySuffix": "",
        "dtoSuffix": "DTO",
        "otherModules": [],
        "enableTranslation": true,
        "nativeLanguage": "es",
        "languages": [
            "es",
            "en"
        ],
        "blueprints": [],
        "herokuAppName": "mibar-es",
        "herokuDeployType": "jar"
    }
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity DailyMenu {
    creationDate Instant required,
    menuDate Instant required,
    name String minlength(2) maxlength(250),
    description String minlength(2) maxlength(25000),
    bread Boolean,
    waitersvc Boolean,
    price Double,
    unit Unit,
    currency String
}

Browsers and Operating System

Firefox 72.0.1 (64-bit)

• [x] Checking this box is mandatory (this is just to show you read everything)

[ruddell]

Can you please fill out the rest of the template so that someone can try to reproduce/fix?

A screenshot showing the differences would also be helpful.

[Tonterias]

Sorry, Jon. I hopw it is fine now.

[SudharakaP]

@Tonterias : Could you share the .yo-rc.json and the JDL files for the app you created. That will enable me to recreate exactly what you experienced. :smile:

[Tonterias]

Sorry, I've been out for a few days.

JHipster configuration

.yo-rc.json file

{
    "generator-jhipster": {
        "promptValues": {
            "packageName": "es.mibar.web",
            "nativeLanguage": "es"
        },
        "jhipsterVersion": "6.6.0",
        "applicationType": "monolith",
        "baseName": "mibar",
        "packageName": "es.mibar.web",
        "packageFolder": "es/mibar/web",
        "serverPort": "8080",
        "authenticationType": "session",
        "cacheProvider": "ehcache",
        "enableHibernateCache": true,
        "websocket": false,
        "databaseType": "sql",
        "devDatabaseType": "h2Disk",
        "prodDatabaseType": "postgresql",
        "searchEngine": false,
        "messageBroker": false,
        "serviceDiscoveryType": false,
        "buildTool": "gradle",
        "enableSwaggerCodegen": false,
        "rememberMeKey": "94e48c3cf2531fcabaf1f1cf2dda23614015c47e7e42f82dde2f70373993b967b64b9376b5be2809b959ccd6403d8321f234",
        "embeddableLaunchScript": false,
        "useSass": true,
        "clientPackageManager": "npm",
        "clientFramework": "angularX",
        "clientTheme": "none",
        "clientThemeVariant": "",
        "creationTimestamp": 1577988308462,
        "testFrameworks": [],
        "jhiPrefix": "jhi",
        "entitySuffix": "",
        "dtoSuffix": "DTO",
        "otherModules": [],
        "enableTranslation": true,
        "nativeLanguage": "es",
        "languages": [
            "es",
            "en"
        ],
        "blueprints": [],
        "herokuAppName": "mibar-es",
        "herokuDeployType": "jar"
    }
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

entity DailyMenu {
    creationDate Instant required,
    menuDate Instant required,
    name String minlength(2) maxlength(250),
    description String minlength(2) maxlength(25000),
    bread Boolean,
    waitersvc Boolean,
    price Double,
    unit Unit,
    currency String
}

Hope this helps!

[SudharakaP]

I've tested this, and it seems that date picker doesn't work on Firefox. This is due to Firefox not supporting datetime-local input type. We have an old issue where this is discussed; https://github.com/jhipster/generator-jhipster/issues/6711.

I am not an Angular or React expert, so maybe we need some discussion on what to do here; since I am not sure if we want to implement a custom date time picker or use one that is already available. Quick searches indicate the following two for Angular and React respectively.

https://github.com/dalelotts/angular-bootstrap-datetimepicker

and,

https://github.com/YouCanBookMe/react-datetime

Feel free to suggest any alternatives. :smile:

cc: @deepu105, @jhipster/developers

[deepu105]

The reason we didn't implement one was so developer can choose a picker to match their UX

I'm ok to include one if the picker is pure bootstrap and respects bootstrap themes, else we can make it plain text field

[wmarques]

For Angular we can use this one I think, it's from the lib we already use https://ng-bootstrap.github.io/#/components/datepicker/overview

[avdev4j]

We already discuss about that here #8846 too.

The https://flatpickr.js.org/ solution seemed to be a good one bbut I'm not sure it respects the bootstrap theme.

Whatever having a pure HTML 5 datepicker is a good idea because it works with every framework, on every browser. People can switch to they favorite one once it's generated.

If we implement a custom datefield, be sure it can be done on all framework we have and works on every popular browsers. Also we will have to maintain it, check that it keep working well during upgrades etc... There is pro and also con... ;)

[SudharakaP]

I investigated flatpickr a bit more and it doesn't seem to respect bootstrap unfortunately and therefore will look a bit odd with our other bootstrap components. The ng-bootstrap datepicker mentioned above is only a date-picker, and it doesn't have a time component.

Therefore I would leave this as is for now and let users select the picker they what. Also in time Firefox will catch up and fully support datetime-local I think (https://bugzilla.mozilla.org/show_bug.cgi?id=1306217). If anyone has any ideas on a pure bootstrap datetime picker feel free to let me know. :smile: