Angular ui-sref，无法格式化日期输入

Question

尝试在 GET URL 中附加日期，但格式必须为“yyyyMMdd00”。

尽管在这里尝试了所有解决方案：

AngularJS - convert dates in controller

和

Binding value to input in Angular JS

我只能生成中等格式的日期：dateFrom%3DFri+Feb+24+2017+00%3A00%3A00+GMT%252B0000+%28GMT+Standard+Time%29

或者什么都没有出现。

HTML（h3 生成我想要添加到我的 url 的内容）：

     <ion-content class="item-input">
<label class="item-input">
    <span class="input-label">Date From</span>
    <input type="date" ng-model="dateFrom">
</label>
<h3>{{dateFrom | date: "yyyyMMdd00"}}</h3>

<a ui-sref="date({dateFrom:dateFrom})">Go</a>
</ion-content>

控制器

     .controller("DateCtrl", function ($scope, $stateParams, dateService) {
$scope.events = dateService.getEvents($stateParams.dateFrom).then(function (events) {
    $scope.events = events;

});

工厂：

      .factory('dateService', function ($http) {
    var events = [];

    return {
        getEvents: function (date) {
            var params = {
                dateFrom: date
            }

            return $http.get('URL', { params: params }).then(function (response) {
                events = response.data.events;
                return response.data.events;
            });

最后是路由：

   .state('date', {
    url: "/date/:dateFrom",
    templateUrl: "templates/Date.html",
    controller: "DateCtrl"
})

Answer 1

使用$urlMatcherFactoryProvider.type

使用类型，您将可以访问控制器等中的解码对象。

稍微更新一下状态声明：

   .state('date', {
    url: "/date/{dateFrom:dateType}", // Use type "dateType" here
    templateUrl: "templates/Date.html",
    controller: "DateCtrl"
})

在路由文件中包含这个：

$urlMatcherFactoryProvider.type('dateType', {
  encode: function(date) {
    // Convert date object to URL format
    var format = 'yyyyMMdd00';
    return $filter('date')(date, format);
  },
  decode: function(dateStr) {
    // Convert URL date to date object
    var year = parseInt(dateStr.slice(0, 4));
    var month = parseInt(dateStr.slice(4, 6));
    var day = parseInt(dateStr.slice(6, 8));
    var date = new Date(year, month, day)
    return date;
  },
  is: function(item) {
    return true;
  }
});

此外，如果您的项目中已包含日期，请使用moment.js 进行日期序列化和反序列化。