带有 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/

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

我想用 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有很多问题。

首先，您尝试根据 View 模型外部的不可观察属性来计算时间差和时间。将它们移到内部并使用计算的可观察量计算它们。

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();

    });
});

接下来，您的精彩瞬间在进入 View 之前会被格式化 - 这是一个禁忌。创建一个有效的时刻并使用绑定(bind)处理程序对其进行格式化，例如这个 -

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

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

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() 方法，我不明白您如何尝试用它比较两个日期，而且它似乎不起作用。

编辑

这是一个正在进行中的 fiddle 。 http://jsfiddle.net/8N9qC/4/您仍然需要做一些工作来按照您想要的方式计算时间差，因此请查看 self.startTime().diff(self.endtime()); 之类的内容