[C#]angularjs 使用 webapi 和引导日期选取器中的绑定日期

标签: json AngularJS C#
发布时间: 2017/2/24 2:47:24
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

给出了 WebApi2 服务,返回 json 这样的值︰

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

我需要在绑定角 / 引导显示日期 /日期选取器正确。

我需要将日期转换成格式 yyyy-毫米-dd (没有时间) 时将其绑定到一个输入框。 只是一个指向一些解释什么正确的方式序列化从 API 到角日期的文档。我敢肯定, effectiveDate 实际上都应该为 Date 对象并不 string

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

为完整起见,该服务返回的 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;
});

解决方法 1:

如果您想要使用引导程序组件在角然后您必须创建一个指令或您可以重用一些存在象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,
    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

官方微信
官方QQ群
31647020