angular.js 中的日期选择器中未显示所选日期
Selected date is not showing in datepicker in angular.js
我正在使用 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();
}
});
}
};
});
一切正常,但是当我select约会时出现问题。它在日期选择器中显示 selected 日期。例如 selected 日期是 2015 年 6 月 1 日
我将这个值保存在数据库中。我再次填充日期选择器,但 selected 日期未在日期选择器中 selected。
我的系统日期格式是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 字段包含日期值,则日期选择器不会以蓝色显示该日期,并且页面加载和日期更改事件中的日期格式不同。
使用 momentjs 操作日期格式以适应日期选择器字段。在此处查看 http://momentjs.com/。您的服务器端和客户端日期格式可能不同。
我正在使用 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();
}
});
}
};
});
一切正常,但是当我select约会时出现问题。它在日期选择器中显示 selected 日期。例如 selected 日期是 2015 年 6 月 1 日
我将这个值保存在数据库中。我再次填充日期选择器,但 selected 日期未在日期选择器中 selected。
我的系统日期格式是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 字段包含日期值,则日期选择器不会以蓝色显示该日期,并且页面加载和日期更改事件中的日期格式不同。
使用 momentjs 操作日期格式以适应日期选择器字段。在此处查看 http://momentjs.com/。您的服务器端和客户端日期格式可能不同。