All geek questions in one place

Bind date in angularjs using webapi and select load date

For a WebApi2 service that returns json values ​​as follows:

{ id: 1109, effectiveDate: "2014-10-05T00:00:00", // the date is a string (newtonsoft.json) text: "Duis et rhoncus nibh. Cras rhoncus cursus diam", fundSource: "Test" }

I need a date to be displayed in brackets angular / bootstrap / .

I need to convert the date to yyyy-mm-dd format (no time) when binding to an input box. Just a pointer to some documentation explaining how to correctly sort dates from API to angular. I am sure that effectiveDate should be Date , not string .

 <input class="form-control" type="text" name="effectiveDate" ng-model="consultation.effectiveDate" data-date-picker="yyyy-mm-dd" placeholder="Date" />

For completeness of service, returning json values ​​looks like this:

 app.factory('Service', ['$http', '$location', '$interpolate', function ($http, $location, $interpolate) { return { get: function (account) { var url = 'api/consultations/{account}'; return $http .get(Api.format(url, { account: account })) .then(function (response) { return response.data; }); } }; }]);

The controller method calls this as follows:

 service.get($scope.urlData.account).then(function(consultations) { $scope.consultations = consultations; });
+6
source share
3 answers

If you want to use bootstrap components in angular, then you need to create a directive or you can reuse some existing ones, for example http://angular-ui.imtqy.com/bootstrap/#/datepicker

Example using bootstrap date picker with angular:

  <body ng-app="app" > <div class="form-horizontal" ng-controller="ctrl"> <input type="text" datepicker-popup="MM/dd/yyyy" ng-model="consultation.effectiveDate" datepicker-options="dateOptions" date-disabled="" ng-required="true" /> </div> </body>

JS:

 app.controller('ctrl', function ($scope, $timeout) { $scope.consultation = { id: 1109, effectiveDate: "2014-10-05T00:00:00", // the date is a string (newtonsoft.json) text: "Duis et rhoncus nibh. Cras rhoncus cursus diam", fundSource: "Test" }; $scope.dateOptions = { 'starting-day': 1 }; });

http://plnkr.co/edit/veOWWlBrKdL5CaMJf61h?p=preview

+1
source

I ran into the same problem and ended up deciding to write Angular http interceptor . It parses the server response and converts all Datetime strings in ISO / UTC format to actual JavaScript date objects. This allows you to directly communicate with the dumper and solves the verification problems.

Here's the Angular client code consisting of a factory (interceptor) and config to provide an http interceptor:

 angular.module("app") .factory('dateInterceptor', function () { var regexIsoUtc = /^(\d{4}|\+\d{6})(?:-(\d{2}))(?:-(\d{2}))(?:T(\d{2})):(\d{2}):(\d{2})Z$/; function matchDate(dateString) { if (dateString.length === 20) { return dateString.match(regexIsoUtc); } return false; }; function convertDateStringsToDates(object) { // ensure that we're processing an object if (typeof object !== "object") { return object; } for (var key in object) { if (!object.hasOwnProperty(key)) { continue; } var value = object[key]; // check for string properties with a date format if (typeof value === "string" && matchDate(value)) { var date = new Date(value); // create the date from the date string object[key] = date; // we're mutating the response directly } else if (typeof value === "object") { convertDateStringsToDates(value); // recurse into object } } return null; } var interceptor = { 'response': function (response) { if (response.data) { convertDateStringsToDates(response.data); } return response; } }; return interceptor; }) .config(["$httpProvider", function ($httpProvider) { $httpProvider.interceptors.push('dateInterceptor'); // intercept responses and convert date strings into real dates }]);

On the server side, I configured Newtonsoft.Json to serialize dates using the ISO format from the UTC timezone , which is the test I'm testing in the interceptor:

 public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API configuration and services var formatters = GlobalConfiguration.Configuration.Formatters; var jsonFormatter = formatters.JsonFormatter; var settings = jsonFormatter.SerializerSettings; // serialize dates into ISO format with UTC timezone settings.DateFormatHandling = DateFormatHandling.IsoDateFormat; settings.DateTimeZoneHandling = DateTimeZoneHandling.Utc; settings.ContractResolver = new CamelCasePropertyNamesContractResolver(); } }

The interceptor, fortunately, is code-based Automated JSON parsing using AngularJS and AngularJS HTTP Date Interceptor Factory .

+3
source

Use angular filter Date filter in angularjs

 {{ effectiveDate | date:'yyyy-MM-dd' }}
+2
source

Source: https://habr.com/ru/post/976398/

More articles:


All Articles