c# – 使用webapi和引导日期选择器绑定angularjs中的日期

前端之家收集整理的这篇文章主要介绍了c# – 使用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"
}

我需要日期正确地出现在bound angular / bootstrap / date picker中.

我需要在将日期绑定到输入框时将日期转换为格式yyyy-mm-dd(没有时间).
只是指向一些文档的指针,解释了将API中的日期序列化为角度的正确方法.我确信effectiveDate实际上应该是Date对象而不是字符串.

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

对于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;
});
@H_301_19@

解决方法

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

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

<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,fundSource: "Test"
  };

  $scope.dateOptions = {
    'starting-day': 1
  };
});

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

@H_301_19@ @H_301_19@ 原文链接:https://www.f2er.com/csharp/244769.html

猜你在找的C#相关文章