两个依赖字段引导 datepicker 日历教练和 KnockoutJs

Question

问候， 我有使用带有引导日期选择器的淘汰赛的要求。您需要有日期范围。

要求： 我有两个日期选择器。 - 第一个日期选择器获取该字段的值。 - 第二个日期选择器获取字段的值。 - 您需要获取两个日期之间的天数差异。

流程

1. 当页面加载时，日期选择器的字段从开始到当前日期。

2. 第二个日期选择器（到字段）开始为空。

3. 每次我们选择一个日期（从字段），第二个字段（到字段）的值都会重置。

4. 选择日期（从字段）时，可用日期（到字段）是（从字段）向前之间的日期。

5. 从第 3 步开始流程。

计算日期

• 每次在各自的字段中有日期时，计算天数的差异。

小提琴：example fiddle

function viewModelCustom() {
  var self = this;

  var today = new Date();
  var todayFormat = moment(today).format('DD/MM/YYYY');

  self.StartDate = ko.observable(todayFormat);
  self.EndDate = ko.observable(todayFormat);

  self.diffDays = ko.computed(function() {
    var result;
    var start = moment(self.StartDate(), 'DD/MM/YYYY');
    var end = moment(self.EndDate(), 'DD/MM/YYYY');

    result = Math.abs(start.diff(end, "days")) + 1;

    return result;
  });


  ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
      //initialize datepicker with some optional options
      var options = allBindingsAccessor().datepickerOptions || {

        format: 'dd/mm/yyyy'
      };
      $(element).datepicker(options);

      //when a user changes the date, update the view model
      ko.utils.registerEventHandler(element, "changeDate", function(event) {
        var value = valueAccessor();
        if (ko.isObservable(value)) {
          value(event.date);
        }
      });
    },
    update: function(element, valueAccessor) {
      var widget = $(element).data("datepicker");
      //when the view model is updated, update the widget
      if (widget) {
        widget.date = ko.utils.unwrapObservable(valueAccessor());
        widget.setValue();
      }
    }
  };

}


ko.applyBindings(new viewModelCustom());

Answer 1

您正在使用错误的输入格式计算 moment.js 日期。

https://jsfiddle.net/z5h9d0oq/1/

self.diffDays = ko.computed(function() {
    var result;
    var start = moment(self.StartDate(), 'ddd MMM DD YYYY');
    var end = moment(self.EndDate(), 'ddd MMM DD YYYY');

    result = end.diff(start, "days");

    return result;
});

要通过表单检查输入格式，请使用

console.info(self.StartDate()); 

输入实际上是

 Tue Jun 07 2016 00:00:00 GMT+0100 (GMT Summer Time)