Javascript 角度和编辑日期对象

我有一个AngularJS应用程序，我想在其中编辑一个日期对象，该对象由ASP Web API通过BreezeJS公开。当我尝试在HTML表单中编辑此字段时，它不太起作用。它似乎编辑了对象的一部分，或者根本没有绑定到日期输入类型

我想知道用BreezeJS在HTML表单中编辑日期字段的最佳方法是什么。我找不到任何关于如何正确解决这个问题的资源

我自己的猜测是：

使用一个额外的字段扩展Breeze实体，该字段基于具有getter/setter的原始日期

在WebAPI中不使用日期字段，但感觉不太对

代码

在我的Angular controller中，我通过存储库模式从Breeze获取对象：

datacontext.session.getById(id)
    .then(function (data) {
         return vm.session = data;
});

之后，vm.session将充满Breeze对象，如下所示：

[{
    "$id":"1",
    "$type":"TestApp.Model.Session, TestApp.Model",
    "Id":3,
    "Name":"Second session",
    "StartDate":"2014-10-12T00:00:00.000",
}]

<input type="date" ng-model="vm.session.startDate" placeholder="Start Date">

现在，在我的HTML表单中，我绑定如下：

[{
    "$id":"1",
    "$type":"TestApp.Model.Session, TestApp.Model",
    "Id":3,
    "Name":"Second session",
    "StartDate":"2014-10-12T00:00:00.000",
}]

<input type="date" ng-model="vm.session.startDate" placeholder="Start Date">

---

所以这相当简单。。。我将尝试尽快创建一个JSFiddle或Plunker，Breeze将日期属性维护为JavaScript

date

对象，如果您说它们在元数据中的话

Breeze没有自己的日期类型

HTML5

日期选择器还没有得到广泛的支持（请参阅），因此我假设您依赖它来帮助您

该指令旨在绑定到字符串，而不是日期对象。这可能解释了车轮脱落的原因

我极力主张Ng指令应该比这个指令更聪明。它应该尽可能地绑定到

Date

对象和日期字符串。我可能会把它作为bug归档

正如您所发现的，如果类型为“text”，HTML输入标记“just works”。显然，日期显示和数据输入不是您想要的

我认为理想的解决方案是有一个指令，可以在日期对象和字符串值之间无缝转换。可能可以通过修饰现有的Ng指令本身来实现。要调查的事情；我们总是需要你的帮助；这是开源的：-）

同时，您可以在自定义

会话

类型构造函数上创建已定义的属性

请参阅中的“自定义构造函数”。这样的属性会将

startDate

属性（

startDateAsString

？）包装起来，解析输入的文本并在输出时格式化为字符串

以下是用于生成日期包装器属性的通用函数：

// Example: addDateWrapperProperty(SessionCtor, 'startDate', 'startDateAsString');

function addDateWrapperProperty(ctor, propName, wrapperPropName) {

    Object.defineProperty(ctor.prototype, wrapperPropName, {
        get: function () { return this[propName].toString(); },
        set: function (value) { this[propName] = value; },
        enumerable: true,
        configurable: true
    });
}

使用它定义

startDateAsString

wrapper属性，然后在编辑时绑定到此属性（绑定到real属性以进行只读显示）

因为您不希望Breeze将其序列化，所以在使用Breeze元数据注册该ctor后，将其添加到ctor中，如下所示

我不确定这是否会给你带来你想要的行为。我需要看看你的JSFIDLE或plunkr才能确定。但我认为它会成功的。让我们知道

我当然不是说这是最终的答案。我不确定答案是什么。。。尽管我在考虑我说过的指令

希望这能让你暂时摆脱困境。很抱歉，这是一个皮塔。谁知道Ng不懂日期对象

例子 以下是从实际微风测试中提取的示例：

/////  Test it //////
var OrderCtor = function () { }; // do-nothing custom constructor

// register the ctor FIRST, then add the property
manager.metadataStore.registerEntityTypeCtor('Order', OrderCtor);

addDateWrapperProperty(OrderCtor, 'orderDate', 'orderDateAsString');

// create new order with a test date
var testDate = new Date(2014,0,1,13,30); // 1/1/2014 1:30 pm

var order = em.createEntity('Order', {
    companyName: "test cust",
    orderDate: testDate
});

// confirm can read the date through the wrapper property
expect(order.orderDate.value).to.equal(testDate.value,
    "'order.orderDate' should return " + testDate);
expect(order.orderDateAsString).to.equal(testDate.toString(),
    "'order.orderDateAsString' should return " + testDate.toString());


var testDate2 = new Date();

// update orderDate by way of the wrapper property
order.orderDateAsString = testDate2.toString();

// confirm the update worked
expect(order.orderDate.value).to.equal(testDate2.value,
    "after update, 'order.orderDate' should return " + testDate2);
expect(order.orderDateAsString).to.equal(testDate2.toString(),
    "after update, 'order.orderDateAsString' should return " + testDate2.toString());

// confirm it is not a breeze-tracked property
var propInfo = order.entityType.getProperty('orderDateAsString');
expect(propInfo).to.equal(null, "'Order.orderDateAsString' is not known to metadata ");

---

你的密码在哪里？如果您熟悉Angular.js，那么这应该非常简单-Breeze.js不做任何绑定数据的工作，只做跟踪之类的工作，因此它应该可以工作……我在问题中添加了我的代码。正如你所说的，这应该非常简单。然而，当数据绑定到日期字段并与Angular组合时，Breeze似乎做了一些奇怪的事情。我通常不会对角度和日期本身产生问题。但我目前正在试用BreezeJS，所以我现在遇到了这个问题。当您在控制台中键入

typeof vm.session.startDate

时会发生什么？它是日期还是字符串？上面写着“对象”，但当我看原型时，它看起来像一个日期对象。也许Breeze会将其转换为自己的日期类型，这也许可以解释为什么它会显示“object”？