与 metro.js 日期选择器绑定的淘汰赛 mvvm

Question

我试图用 metro.js 日期选择器和淘汰赛来解决问题。到目前为止，我的日期选择器绑定代码如下所示：

ko.bindingHandlers.datepicker = {
  init: function(el, va, ba, model, ctx) {
    var prop = va();
    $(el).datepicker({
      onSelect: function(txt, date) {
        prop(date);
      }
    });
  },
  update: function(el, va, ba, model, ctx) {
    var prop = va();
    var date = ko.unwrap(prop);

    if(date) {
      applyDate(date);
    }

    function applyDate(dt) {
      var j = $(el);
      var dp = j.data('datepicker');
      var inp = j.find('input');
      var fmt = dp.options.format;
      var sDate = format(fmt, dt);
      // dp._calendar.calendar.dayClick(sDate, dt);
      // inp.value = sDate;
      dp._calendar.calendar('setDate', sDate);
      j.find('input').val(dp._calendar.calendar('getDate')).trigger('change', sDate);
    }

    function format(fmt, dt) {
      fmt = fmt.replace('yyyy', dt.getFullYear());
      fmt = fmt.replace('mm', pad(dt.getMonth() + 1));
      fmt = fmt.replace('dd', pad(dt.getDate()));
      return fmt;
    }

    function pad(n) {
      return parseInt(n) < 10 ? '0' + n: '' + n;
    };
  }
}

问题是，当我在 date 属性上发布模型更新时，它与日期选择器的绑定不会更新。我的意思是，它是第一次这样做，但是 post 它无法更新文本框；日历显示还可以。最终我需要更改 applyDate 函数中的逻辑...

JSBin: http://jsbin.com/rupaqolexa/1/edit?html,js,output

更新：另一个问题刚刚出现...它在 IE 10+ 中不起作用。日期在 UI...

中显示为 NaN

更新：复制步骤

在第二个文本框中输入日期：2013/05/13 并单击“更改”按钮。观察日期在日期选择器文本框中更新。这按预期工作。（IE 除外）。
在文本框中输入另一个日期并单击更改按钮。观察日期选择器文本框中的日期未更新。预计此处日期选择器文本框会更新为最新值。

Answer 1

在自定义绑定的 update 部分，您需要对绑定元素进行所有更改，包括日历小部件和相关的 input 元素。

我已经为此修改了代码，现在可以使用了。

function ViewModel(date) {
  var model = this;
  model.date = ko.observable(date);
  model.set = function() {
    var val = $('#somedate').val();
    var dt = new Date(val);
    model.date(dt);
  };
}

ko.bindingHandlers.datepicker = {
  init: function(el, va, ba, model, ctx) {
    var prop = va();
    $(el).datepicker({
      onSelect: function(txt, date) {
        prop(date);
      }
    });
  },
  update: function(el, va, ba, model, ctx) {
    var newDate = ko.unwrap(va());

    if(newDate) {
      var $el = $(el);
      var datePicker = $el.data('datepicker');
      var $input = $el.find('input');
      var formattedDate = format(datePicker.options.format, newDate);
      datePicker._calendar.calendar('setDate', formattedDate);
      $input.val(formattedDate);
      //$input.val(dp._calendar.calendar('getDate'))
      //  .trigger('change', sDate);
    }

    function format(fmt, dt) {
      fmt = fmt.replace('yyyy', dt.getFullYear());
      fmt = fmt.replace('mm', pad(dt.getMonth() + 1));
      fmt = fmt.replace('dd', pad(dt.getDate()));
      return fmt;
    }

    function pad(n) {
      return parseInt(n) < 10 ? '0' + n: '' + n;
    }
  }
};

var m = new ViewModel();

$(function(){
  ko.applyBindings(m);
});

<link href="//metroui.org.ua/css/metro.css" rel="stylesheet">
<link href="//metroui.org.ua/css/metro-icons.css" rel="stylesheet">
<link href="//metroui.org.ua/css/metro-responsive.css" rel="stylesheet">
<link href="http://metroui.org.ua/css/metro-schemes.css" rel="stylesheet">

<script src="http://metroui.org.ua/js/jquery-2.1.3.min.js"></script>
<script src="http://metroui.org.ua/js/metro.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>

<div>
  <div class="input-control text" data-bind="datepicker: date">
    <input type="text">
    <button class="button"><span class="mif-calendar"></span></button>
  </div>
</div>
<div>
  <label>Date</label>
  <div class="input-control text">
    <input type="text" id="somedate"/>
  </div>
  <input type="button" class="button" value="Change" data-bind="click: set"/>
</div>

<div>
  <code data-bind="text: date"></code>
</div>

但是还有一点小问题：datepiceker 的日历 setdate 广告新的选定日期，而不是替换选定的日期。请参阅 API 文档自行解决此问题。

与 metro.js 日期选择器绑定的淘汰赛 mvvm

knockout mvvm binding with metro.js datepicker

javascript

datepicker

knockout.js

metro.js

ko-custom-binding