带有 moment.js 和 knockout.js 的 html5 时间选择器

Question

我试图让用户使用 momentjs 选择约会的时间和日期 使用新的 HTML5 时间输入和日期输入。

日期输入的标记

<input data-bind="value: startDate" type="date" ></input>
<output id=startDate data-bind="text: startDate"></output>
<br />
<input data-bind="value: endDate" type="date"></input>
<output id=endDate data-bind="text: endDate"></output>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JS

//var todayDate = (new Date()).toISOString().split('T')[0],
    viewModel = {
    //reset startDate and EndDate
    startDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
    endDate: ko.observable(moment(new moment()).format("YYYY-MM-DD")),
    //set back the endDtate to 2034-04-28
    //endDate: ko.observable("2034-04-28"),
    dateDiff : ko.computed(function () {

      return  moment.duration(this.endDate - this.startDate).humanize();

    })
};

viewModel.startDate.subscribe(function(newValue) {
    // Show the updated value in the console
    console.info(newValue.replace(/\D/g,''));
});
viewModel.endDate.subscribe(function(newValue) {
    // Show the updated value in the console
    console.info(newValue.replace(/\D/g,''));
});
ko.applyBindings(viewModel);

演示：http://jsfiddle.net/kougiland/pBFQA/2/

我希望当用户更改日期输入时，它会重新计算并返回差异，如果结束日期小于开始日期，它会发出警报并将结束日期设置回 startdate 值。

我想对 Html5 时间选择器做同样的事情

谢谢你

更新：HTML5 时间

标记

<input data-bind="value: startTime" type="Time" ></input>
<output id=startTime data-bind="text: startTime"></output>
<br />
<input data-bind="value: endTime" type="Time"></input>
<output id=endTime data-bind="text: endTime"></output>
<pre data-bind="text: ko.toJSON($data, null, 2)"></pre>

JS

    viewModel = {
    //reset startTime and EndTime
    startTime: ko.observable(moment().format('HH:mm:ss')),
    endTime: ko.observable(moment().format('HH:mm:ss')),
    timeDiff : ko.computed(function () {
      console.log(this.startTime);
      console.log(this.endTime);
      return  moment.duration(this.endTime - this.startTime).humanize();

    })
};

ko.applyBindings(viewModel);

演示：http://jsfiddle.net/kougiland/5Bjzh/1/

如何在输入更改时更新timeDiff？

Answer 1

你的jsFiddle有很多问题。

首先，您尝试根据视图模型之外的不可观察属性计算时间差和时间。将它们移入内部并使用计算的 observable 计算它们。

function viewModel() {    
    var self = this;
    self.startTime = ko.observable(moment('8:32'));
    self.endTime = ko.observable(moment('12:52'));
    self.timeDiff = ko.computed(function () {
        console.log(self.startTime());
        console.log(self.endTime());
        return 'Difference - ' + moment.duration(self.endTime() - self.startTime()).humanize();

    });
});

接下来，您的时刻会在进入视图之前进行格式化 - 这是一个禁忌。创建一个有效的时刻并使用绑定处理程序格式化它们，例如这个 -

ko.bindingHandlers.Time = {
    update: function (element, valueAccessor) {
        var value = valueAccessor();
        var date = moment(value());
        var strDate = date.format('h:mm a');
        $(element).text(strDate);
    }
};

最后，您需要将您的订阅和其他特定于视图模型的代码移动到您的视图模型中。当一切都说完了，它应该看起来像这样 -

function viewModel() {    
    var self = this;
    self.startTime = ko.observable(new moment());
    self.endTime = ko.observable(new moment());
    self.timeDiff = ko.computed(function () {
        return 'Difference - ' + moment.duration(self.endTime() - self.startTime()).humanize();

    });
    self.MyDate = ko.observable(new Date());
    self.log = ko.observable("");
    self.logDate = function () { 
        self.log(self.log() + self.MyDate());
    };
    self.MyDate.subscribe(function (date) {    
        self.logDate();    
    });
    self.logDate();
};

最后，我认为您需要仔细检查 moment.duration() 方法，我看不出您是如何尝试将两个日期与它进行比较的，而且它似乎不是那样工作的。

编辑

这是一个正在进行中的小提琴。 http://jsfiddle.net/8N9qC/4/ 你仍然需要做一些工作来按照你想要的方式计算时差，所以看看 self.startTime().diff(self.endtime());