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

发布时间：2020-12-15 08:45:44 所属栏目：百科来源：网络整理

导读：给定一个返回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 ang

给定一个返回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;
});

解决方法

如果你想以角度使用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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!