使用Jquery UI日期选择器进行淘汰赛，仅限MM/YY [英] Knockout with Jquery UI datepicker, MM/YY only

问题描述

可在此处找到淘汰赛日期选择器数据绑定程序: KnockoutJS未捕获到jQuery UI datepicker更改事件

A knockout datepicker data binder can be found here: jQuery UI datepicker change event not caught by KnockoutJS

为了隐藏日期(这是触发datepicker输出的唯一内容)，我将其用于无敲除解决方案:

In order to hide the dates (which is the only thing that triggers datepicker's output), I do this for the sans knockout solution:

$(".monthPicker").focus(function () {
    $(".ui-datepicker-calendar").hide();
});
$(".monthPicker").datepicker({
    dateFormat: 'MM yy,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    onClose: function(dateText, inst) {
        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
        $(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
    }
});

这有效.

但是我该如何使用淘汰赛的数据绑定器呢?

But how do I get this working with knockout's data binder?

推荐答案

解决方案是直接更新ViewModel，并通过活页夹上的更新将更改传播到日期选择器.

The solution was to update the ViewModel directly and let the changes propogate to the datepicker via the update on the binder.

    <input data-bind="datepicker: monthDate,
          datepickerOptions:
          {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) {
                var month = $('#ui-datepicker-div .ui-datepicker-month :selected').val();
                var year = $('#ui-datepicker-div .ui-datepicker-year :selected').val();
                $root.monthDate(new Date(year, month, 1));
            }
          }" />  

这篇关于使用Jquery UI日期选择器进行淘汰赛，仅限MM/YY的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！