Change DATE_TIME_FORMAT const in JHipster + Angular2+ project - datetime

Question

I am currently working on a Angular2+/Typescript/Bootstrap project generated with JHipster in which I have an entity "CalendarEvent" that has a startTime field of Java type Instant.
Today this field looks like this :
My problem is that I cannot know if that time is am or pm.
For instance, when I tried :
const startMoment = moment(this.startTime, DATE_TIME_FORMAT);
startMoment.set({hour: 18});
this.startTime= moment(startMoment).format(DATE_TIME_FORMAT);
in order to force the startTime hour to 18h (6pm), the form field showed 06:49. I therefore have no way to know if a time is in the morning or in the afternoon.
Now JHipster generated the entity creation/update form, in which the html code of this field is :
<label class="form-control-label" jhiTranslate="myApp.calendarEvent.startTime" for="field_startTime">Start Time</label>
<div class="d-flex">
<input id="field_startTime" type="datetime-local" class="form-control" name="startTime" max="endTime" [(ngModel)]="startTime" required/>
</div>
and the Typescript code (from which I removed few unrelated code):
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { HttpResponse, HttpErrorResponse } from '#angular/common/http';
import { Observable } from 'rxjs';
import * as moment from 'moment';
import { DATE_TIME_FORMAT } from 'app/shared/constants/input.constants';
import { JhiAlertService } from 'ng-jhipster';
import { ICalendarEvent } from 'app/shared/model/calendar-event.model';
import { CalendarEventService } from './calendar-event.service';
#Component({
selector: 'jhi-calendar-event-update',
templateUrl: './calendar-event-update.component.html'
})
export class CalendarEventUpdateComponent implements OnInit {
private _calendarEvent: ICalendarEvent;
isSaving: boolean;
startTime: string;
constructor(
private jhiAlertService: JhiAlertService,
private calendarEventService: CalendarEventService,
private activatedRoute: ActivatedRoute
) {}
ngOnInit() {
this.isSaving = false;
this.activatedRoute.data.subscribe(({ calendarEvent }) => {
this.calendarEvent = calendarEvent;
});
}
previousState() {
window.history.back();
}
save() {
this.isSaving = true;
this.calendarEvent.startTime = moment(this.startTime, DATE_TIME_FORMAT);
if (this.calendarEvent.id !== undefined) {
this.subscribeToSaveResponse(this.calendarEventService.update(this.calendarEvent));
} else {
this.subscribeToSaveResponse(this.calendarEventService.create(this.calendarEvent));
}
}
private subscribeToSaveResponse(result: Observable<HttpResponse<ICalendarEvent>>) {
result.subscribe((res: HttpResponse<ICalendarEvent>) => this.onSaveSuccess(), (res: HttpErrorResponse) => this.onSaveError());
}
private onSaveSuccess() {
this.isSaving = false;
this.previousState();
}
private onSaveError() {
this.isSaving = false;
}
private onError(errorMessage: string) {
this.jhiAlertService.error(errorMessage, null, null);
}
getSelected(selectedVals: Array<any>, option: any) {
if (selectedVals) {
for (let i = 0; i < selectedVals.length; i++) {
if (option.id === selectedVals[i].id) {
return selectedVals[i];
}
}
}
return option;
}
get calendarEvent() {
return this._calendarEvent;
}
set calendarEvent(calendarEvent: ICalendarEvent) {
this._calendarEvent = calendarEvent;
this.startTime = moment(calendarEvent.startTime).format(DATE_TIME_FORMAT);
}
}
Now you can see that the component has a startTime string attribute instanciated like this :
this.startTime = moment(calendarEvent.startTime).format(DATE_TIME_FORMAT);
(with calendarEvent.startTime of type Instant). Now in a config file, I saw :
export const DATE_TIME_FORMAT = 'YYYY-MM-DDThh:mm';
I thought that by changing the value of DATE_TIME_FORMAT to something like LLLL (found on Moment.js documentation) I would easily get a clearer format, but unfortunately, not only it does not change the form format, but it also appears uninitialized by default :
I also join my package.json and .yo-rc.json that are often asked to people requesting support (if any help) :
package.json
{
"name": "platform-overview-2",
"version": "0.0.0",
"description": "Description for platformOverview2",
"private": true,
"license": "UNLICENSED",
"cacheDirectories": [
"node_modules"
],
"dependencies": {
"#angular/common": "6.0.0",
"#angular/compiler": "6.0.0",
"#angular/core": "6.0.0",
"#angular/forms": "6.0.0",
"#angular/platform-browser": "6.0.0",
"#angular/platform-browser-dynamic": "6.0.0",
"#angular/router": "6.0.0",
"#fortawesome/angular-fontawesome": "0.1.0-9",
"#fortawesome/fontawesome-svg-core": "1.2.0-11",
"#fortawesome/free-solid-svg-icons": "5.1.0-8",
"#ng-bootstrap/ng-bootstrap": "2.0.0",
"bootstrap": "4.0.0",
"core-js": "2.5.3",
"jquery": "3.3.1",
"moment": "2.21.0",
"ng-jhipster": "0.5.4",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "0.5.1",
"ngx-webstorage": "2.0.1",
"reflect-metadata": "0.1.12",
"rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"swagger-ui": "2.2.10",
"tslib": "1.9.0",
"zone.js": "0.8.26"
},
"devDependencies": {
"#angular/cli": "^6.1.1",
"#angular/compiler-cli": "6.0.0",
"#ngtools/webpack": "6.0.0",
"#types/jest": "22.2.3",
"#types/node": "9.4.7",
"angular-router-loader": "0.8.2",
"angular2-template-loader": "0.6.2",
"browser-sync": "2.24.4",
"browser-sync-webpack-plugin": "2.2.2",
"cache-loader": "1.2.2",
"codelyzer": "4.2.1",
"copy-webpack-plugin": "4.5.1",
"css-loader": "0.28.10",
"exports-loader": "0.7.0",
"extract-text-webpack-plugin": "4.0.0-beta.0",
"file-loader": "1.1.11",
"fork-ts-checker-webpack-plugin": "0.4.1",
"friendly-errors-webpack-plugin": "1.7.0",
"generator-jhipster": "5.1.0",
"html-loader": "0.5.5",
"html-webpack-plugin": "3.2.0",
"husky": "0.14.3",
"jest": "22.4.3",
"jest-junit": "5.1.0",
"jest-preset-angular": "5.2.2",
"jest-sonar-reporter": "2.0.0",
"lint-staged": "7.0.0",
"merge-jsons-webpack-plugin": "1.0.14",
"moment-locales-webpack-plugin": "1.0.5",
"prettier": "1.11.1",
"proxy-middleware": "0.15.0",
"raw-loader": "0.5.1",
"rimraf": "2.6.1",
"simple-progress-webpack-plugin": "1.1.2",
"style-loader": "0.20.3",
"tapable": "1.0.0",
"thread-loader": "1.1.5",
"to-string-loader": "1.1.5",
"ts-loader": "4.0.1",
"tslint": "5.9.1",
"tslint-config-prettier": "1.9.0",
"tslint-loader": "3.6.0",
"typescript": "2.7.2",
"uglifyjs-webpack-plugin": "1.2.5",
"webpack": "4.8.0",
"webpack-cli": "2.1.3",
"webpack-dev-server": "3.1.4",
"webpack-merge": "4.1.2",
"webpack-notifier": "1.6.0",
"webpack-visualizer-plugin": "0.1.11",
"workbox-webpack-plugin": "3.2.0",
"write-file-webpack-plugin": "4.2.0",
"xml2js": "0.4.19"
},
"engines": {
"node": ">=8.9.0",
"yarn": ">=1.3.2"
},
"lint-staged": {
"src/**/*.{ts,css,scss}": [
"prettier --write",
"git add"
]
},
"scripts": {
"precommit": "lint-staged",
"prettier:format": "yarn prettier --write 'src/**/*.{ts,css,scss}'",
"lint": "tslint --project tsconfig.json -e 'node_modules/**'",
"lint:fix": "yarn run lint --fix",
"ngc": "ngc -p tsconfig-aot.json",
"cleanup": "rimraf target/{aot,www}",
"clean-www": "rimraf target//www/app/{src,target/}",
"start": "yarn run webpack:dev",
"serve": "yarn run start",
"build": "yarn run webpack:prod",
"test": "yarn run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
"test:watch": "yarn test --watch --clearCache",
"webpack:dev": "yarn run webpack-dev-server --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --env.stats=minimal",
"webpack:dev-verbose": "yarn run webpack-dev-server --config webpack/webpack.dev.js --inline --hot --port=9060 --watch-content-base --profile --progress --env.stats=normal",
"webpack:build:main": "yarn run webpack --config webpack/webpack.dev.js --env.stats=normal",
"webpack:build": "yarn run cleanup && yarn run webpack:build:main",
"webpack:prod:main": "yarn run webpack --config webpack/webpack.prod.js --profile",
"webpack:prod": "yarn run cleanup && yarn run webpack:prod:main && yarn run clean-www",
"webpack:test": "yarn run test",
"webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
},
"jestSonar": {
"reportPath": "target/test-results/jest",
"reportFile": "TESTS-results-sonar.xml"
}
}
.yo-rc.json
{
"generator-jhipster": {
"promptValues": {
"packageName": "com.worldline.app",
"nativeLanguage": "en"
},
"jhipsterVersion": "5.1.0",
"applicationType": "monolith",
"baseName": "platformOverview2",
"packageName": "com.worldline.app",
"packageFolder": "com/worldline/app",
"serverPort": "8080",
"authenticationType": "jwt",
"cacheProvider": "ehcache",
"enableHibernateCache": true,
"websocket": false,
"databaseType": "sql",
"devDatabaseType": "h2Disk",
"prodDatabaseType": "mysql",
"searchEngine": false,
"messageBroker": false,
"serviceDiscoveryType": false,
"buildTool": "maven",
"enableSocialSignIn": false,
"enableSwaggerCodegen": false,
"jwtSecretKey": "455e1315207269bf7ba9685bdba93b4ff0224ba0",
"clientFramework": "angularX",
"useSass": false,
"clientPackageManager": "yarn",
"testFrameworks": [],
"jhiPrefix": "jhi",
"enableTranslation": true,
"nativeLanguage": "en",
"languages": [
"en",
"fr",
"de",
"es",
"ro",
"zh-cn",
"pl"
]
}
}
Please let me know if you need more information.
Thanks in advance for any help you can provide :) !