使用webapi和引导日期选择器在angularjs中绑定日期

给定一个返回json值的WebApi2服务，如下所示：

{ 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" } 

我需要日期正确地出现在绑定的angular / bootstrap / date选择器中 。

我需要在将日期绑定到输入框时将日期转换为格式yyyy-mm-dd（没有时间）。 只是一个指向某些文档的指针，解释了从API序列化日期到角度的正确方法。 我确信effectiveDate实际上应该是Date对象而不是string 。

对于completness，返回json值的服务如下所示：

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

控制器方法调用它如下：

 service.get($scope.urlData.account).then(function(consultations) { $scope.consultations = consultations; }); 

Answer 1

如果你想在angular中使用bootstrap组件，那么你必须创建一个指令，或者你可以重用一些现有的如http://angular-ui.github.io/bootstrap/#/datepicker

示例如何使用带角度的引导日期选择器：

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

Answer 2

我遇到了完全相同的问题，并最终通过编写一个Angular http interceptor来解决它。 它解析服务器的响应并将所有具有ISO / UTC格式的Datetime字符串转换为实际的JavaScript日期对象。 这允许直接绑定到datepicker并解决validation问题。

这是客户端角度代码，由工厂 （拦截器）和用于提供http拦截器的配置部分组成：

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

在服务器端，我将Newtonsoft.Json配置为使用带有UTC时区的ISO格式序列化日期，这是我在拦截器中测试的格式：

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

感谢拦截器基于使用AngularJS和AngularJS HTTP Date Interceptor Factory进行 自动JSON日期解析的代码。

Answer 3

在angularjs中使用角度filter模块日期filter

 {{ effectiveDate | date:'yyyy-MM-dd' }}