使用webapi和bootstrap日期选择器在angularjs中绑定日期 [英] binding a date in angularjs using webapi and the bootstrap date picker
问题描述
给出一个WebApi2服务，该服务返回如下json值:
Given a WebApi2 service that returns json values like this:
{
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 the date to appear in the bound angular / bootstrap / date picker correctly.
将日期绑定到输入框时，我需要将日期转换为yyyy-mm-dd格式(没有时间).
只是一些文档的指针，这些文档解释了将日期从API序列化为angular的正确方法.我确定effectiveDate实际上应该是Date对象，而不是string.
I need to transform the date into the format yyyy-mm-dd (without the time) when binding it to an input box.
Just a pointer to some documentation explaining what the correct way to serialize dates from the API to angular. I am sure that effectiveDate should actually be a Date object and not a string.
<input class="form-control"
type="text"
name="effectiveDate"
ng-model="consultation.effectiveDate"
data-date-picker="yyyy-mm-dd"
placeholder="Date" />
为完整起见，返回json值的服务如下所示:
For completness, the service returning the 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 it like this:
service.get($scope.urlData.account).then(function(consultations) {
$scope.consultations = consultations;
});
推荐答案
如果要在angular中使用引导程序组件，则必须创建一个指令，或者可以重用一些现有的类似
If you want to use bootstrap components in angular then you have to create a directive or you can reuse some existing like http://angular-ui.github.io/bootstrap/#/datepicker
示例如何使用带有角度的引导日期选择器:
Example how to use 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
这篇关于使用webapi和bootstrap日期选择器在angularjs中绑定日期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
