在JHipster + Angular2 +项目中更改DATE_TIME_FORMAT常量
我目前正在使用JHipster生成的Angular2 + / Typescript / Bootstrap项目中，其中有一个实体“ CalendarEvent”，其Java类型为Instant的startTime字段。 今天，这个字段看起来像这样：
我的问题是我不知道那个时间是上午还是下午。 例如，当我尝试：
const startMoment = moment(this.startTime, DATE_TIME_FORMAT);
startMoment.set({hour: 18});
this.startTime= moment(startMoment).format(DATE_TIME_FORMAT);
为了将startTime小时强制设置为18h（下午6点），表单字段显示为06:49。因此，我无法知道时间是上午还是下午。
现在，JHipster生成了实体创建/更新表单，该字段的html代码为：
<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>
和Typescript代码（我从中删除了一些无关的代码）：
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);
}
}
现在您可以看到该组件具有一个实例化的startTime字符串属性：
this.startTime = moment(calendarEvent.startTime).format(DATE_TIME_FORMAT);
（使用类型为“即时”的calendarEvent.startTime）。现在在配置文件中，我看到了：
export const DATE_TIME_FORMAT = 'YYYY-MM-DDThh:mm';
我认为，通过将DATE_TIME_FORMAT的值更改为LLLL（在Moment.js documentation上找到），我会很容易地获得更清晰的格式，但是不幸的是，不仅它没有改变表单格式，但默认情况下也未初始化：
我也加入了我的package.json和.yo-rc.json，经常会向要求支持的人（如果有帮助）询问他们：
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"
]
}
}
如果您需要更多信息，请告诉我。 预先感谢您可以提供的任何帮助:)！
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？