Question

此致我需要使用带有bootstrap datepicker的knockoutJs。你需要有日期范围。

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

流量

页面加载时，日期选择器的字段从开始到当前日期。
第二个datepicker（到字段）开始为空。
每次我们选择一个日期（来自字段），重置第二个字段（到字段）的值。
选择日期（来自字段）时，可用日期（到字段）是（从字段开始）之间的日期。
从第3步开始流程。

计算日期

每次在各自的字段中都有日期，请计算天数之差。

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)

两个依赖字段bootstrap datepicker calendar coach和KnockoutJs

1 个答案: