选定的日期未显示在 angular.js 的日期选择器中答案

【问题标题】：Selected date is not showing in datepicker in angular.js选定的日期未显示在 angular.js 的日期选择器中
【发布时间】：2015-08-14 11:02:57
【问题描述】：

我正在使用 Angular js 开发一个 MVC 5 项目。我正在使用日期选择器控件。

在我的网页中，在app.js 中使用directive。

myApp.directive('datepicker', function () {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, element, attrs, ProfileCtrl) {
        element.datepicker({
            //dateFormat: 'DD, d  MM, yy',
            dateFormat: 'dd-MM-yyyy',
            autoclose: true,
            onSelect: function (date) {
                ProfileCtrl.$setViewValue(date);
                //ProfileCtrl.$render();
                scope.$apply();
            }
        });
    }
};
});

一切正常，但是当我选择日期时出现问题。它在日期选择器中显示选定的日期。例如选择的日期是 2015 年 6 月 1 日

我将此值保存在数据库中。我再次填充日期选择器，但日期选择器中未选择所选日期。

我的系统日期格式是dd-MM-yyyy。

编辑：

请看下面我的html代码。

    <div ng-app="myApp" ng-controller="ProfileCtrl">
     .........
     <div class="form-group">
        <label for="dob" class="col-md-2 control-label">DOB</label>

        <div class="col-md-10">
            <input type="text" datepicker name="dob" class="form-control" ng-model="models.DOB" />

        </div>

    </div>

Angular 控制器代码

$http.get("Profile/GetProfile").success(function (data) {

    $scope.models = {
        Name: data.Name,
        UserEmail: data.UserEmail,
        Password: data.Password,
        ConfirmPassword: data.ConfirmPassword,
        DOB: data.DOB,
        Address: data.Address,
        City: data.City,
        Country: data.Country,
        Pincode: data.Pincode,
        Phone: data.Phone

    }

});

C# 控制器

    public ActionResult GetProfile()
    {

        string _CustomerId = CookieHelper.GetCookieValue(CookieHelper.EndUser.UserId);
        long CustomerId = 0;

        if (!Int64.TryParse(_CustomerId, out CustomerId))
            return Json(null, JsonRequestBehavior.AllowGet);

        Customer customer = CustomerHelper.GetCustomer(CustomerId);

        if (customer == null)
            return Json(null, JsonRequestBehavior.AllowGet);

        var data = new
        {
            Id = customer.Id,
            Name = customer.Name,
            UserEmail = customer.Email,
            Password = customer.Password,
            ConfirmPassword = customer.Password,
            DOB = (customer.DOB != new DateTime?()) ? ((DateTime)customer.DOB).ToString("MM/dd/yyyy", System.Globalization.CultureInfo.CurrentCulture) : string.Empty,
            Address = customer.Address,
            City = customer.City,
            Country = customer.Country,
            Pincode = customer.Pincode,
            Phone = customer.Phone
        };

        return Json(data, JsonRequestBehavior.AllowGet);
    }

如果 DOB 字段包含日期值，则日期选择器不会以蓝色显示该日期，并且页面加载和日期更改事件中的日期格式不同。

【问题讨论】：

在这种情况下保存到数据库重要吗？如果是这样，您可以发布代码吗？此外，您再次说“填充”日期选择器。您为什么不使用以前会记住其模型的相同日期选择器？你能发布你的控制器代码吗？
将数据保存到数据库后，此视图是否会重新加载？
感谢您的宝贵回复。 @azium 保存部分没有问题。它工作正常。并且保存方法后没有页面刷新发生。但是，如果 DOB 字段中的日期值，则日期选择器不会以蓝色显示该日期。并且页面加载和日期选择后的日期格式不同。
感谢您的宝贵回复。 @Rebornix 保存数据后没有重新加载。

标签： c# jquery asp.net-mvc angularjs datepicker

【解决方案1】：

使用 momentjs 来操作日期格式以适应 datepicker 字段。在这里查看http://momentjs.com/。您的服务器端和客户端日期格式可能不同。

【讨论】：