Question

我在jHipster中生成了一个基于Spring Boot + Angular 1的项目。我是Angular世界的新手。一切正常，但是当我使用提供的UI日期选择器（https://angular-ui.github.io/bootstrap）输入日期时，其格式为yyyy-MM-dd，即使我已将西班牙语定义为我唯一的语言包（我更喜欢它）是dd / MM / yyyy）。这是输入的代码片段：

调节版本-dialog.html

<div class="form-group">
    <label class="control-label"
        data-translate="selfprotectionApp.regulationVersion.versionDate"
        for="field_versionDate">Version Date</label>
    <div class="input-group">
        <input id="field_versionDate" type="text" class="form-control"
            name="versionDate" uib-datepicker-popup="{{dateformat}}"
            ng-model="vm.regulationVersion.versionDate"
            is-open="vm.datePickerOpenStatus.versionDate" /> <span
            class="input-group-btn">
            <button type="button" class="btn btn-default"
                ng-click="vm.openCalendar('versionDate')">
                <i class="glyphicon glyphicon-calendar"></i>
            </button>
        </span>
    </div>
</div>

这里有{{dateformat}}绑定，但我不知道jHipster从哪里选择它。唯一匹配位于date-util.service.js文件中，但此处更改格式似乎不会影响。

日期util.service.js

(function() {
    'use strict';

    angular
        .module('selfprotectionApp')
        .factory('DateUtils', DateUtils);

    DateUtils.$inject = ['$filter'];

    function DateUtils($filter) {

        var service = {
            convertDateTimeFromServer: convertDateTimeFromServer,
            convertLocalDateFromServer: convertLocalDateFromServer,
            convertLocalDateToServer: convertLocalDateToServer,
            dateformat: dateformat
        };

        return service;

        function convertDateTimeFromServer(date) {
            if (date) {
                return new Date(date);
            } else {
                return null;
            }
        }

        function convertLocalDateFromServer(date) {
            if (date) {
                var dateString = date.split('-');
                return new Date(dateString[0], dateString[1] - 1, dateString[2]);
            }
            return null;
        }

        function convertLocalDateToServer(date) {
            if (date) {
                return $filter('date')(date, 'yyyy-MM-dd');
            } else {
                return null;
            }
        }

        function dateformat() {
            return 'yyyy-MM-dd';
        }
    }

})();

当然，我可以用HTML中的某种日期格式替换{{dateformat}}表达式，但我想为整个项目执行此操作。

Answer 1

在角度JS中没有默认方式来设置来自提供者的dateformat，例如整个项目。

你能做什么;定义一个过滤器，使用您的格式：{{dateformat | date:'MM/dd/yyyy'}} 或者为该要求定义一个全局过滤器，以便更容易输入（来源https://stackoverflow.com/a/18402623/3687474）

.filter('myDate', function($filter) {    
    var angularDateFilter = $filter('date');
    return function(theDate) {
       return angularDateFilter(theDate, 'dd MMMM @ HH:mm:ss');
    }
});

并使用它：{{dateformat | myDate }}

最终解决方案是使用非常强大的库来管理您的日期，例如moment.js和angularjs diretives 这是我最喜欢的解决方案;因为它对于许多用途和日期操作更具可扩展性。然而;将库添加到项目中总是会产生性能成本;）

更改ui datepicker（jHipster）的日期格式

1 个答案: