Angular ui-sref, can't format date input

Question

Trying to append a GET URL with a date, but it needs to be in the format "yyyyMMdd00".

Despite trying all the solutions here:

and

I can only ever produce dates in the medium style format: dateFrom%3DFri+Feb+24+2017+00%3A00%3A00+GMT%252B0000+%28GMT+Standard+Time%29

Or nothing appears.

HTML (the h3 produces what I want to add to my 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

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

Factory:

 .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; });

And finally the routing:

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

Which version of ui-router are you using?

Sangharsh
– Sangharsh

2017-02-09 19:24:31 +00:00
Commented Feb 9, 2017 at 19:24 — Sangharsh
– Sangharsh, Commented Feb 9, 2017 at 19:24
I'm using version 0.2.13

Kyle
– Kyle

2017-02-09 19:29:55 +00:00
Commented Feb 9, 2017 at 19:29 — Kyle
– Kyle, Commented Feb 9, 2017 at 19:29

Sangharsh · Accepted Answer · 2017-02-09 19:43:22Z

Use $urlMatcherFactoryProvider.type

Using type, you'll have access to decoded object in your controller etc.

Update state declaration a bit:

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

Include this in route file:

$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; } });

Also, use moment.js for serializing and deserializing date, if you have it already included in your project.

I'm new to all this - I can't seem to get it to work. Either its "urlmatcher not recognised" or the state doesn't change on click. I havent used moment - i'll take at a look at it. thank you! FYI - I'm using ionic, does that matter?
Inject $urlMatcherFactoryProvider in your router config method
I did that. Its still not doing anything. There's no error in console for me to report unfortunately.

Collectives™ on Stack Overflow

Angular ui-sref, can't format date input

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related