blocks|key|629117|text|我认为对于jQuery+UI日期选择器，最好使用自定义绑定，该绑定将使用日期选择器提供的API对日期对象进行读/写。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629118|绑定可能类似于(来自我的答案here)：|offset|length|629119|ko.bindingHandlers.datepicker+=+{
++++init:+function(element,+valueAccessor,+allBindingsAccessor)+{
++++++++//initialize+datepicker+with+some+optional+options
++++++++var+options+=+allBindingsAccessor().datepickerOptions+%7C%7C+{},
++++++++++++$el+=+$(element);

++++++++$el.datepicker(options);

++++++++//handle+the+field+changing+by+registering+datepicker's+changeDate+event
++++++++ko.utils.registerEventHandler(element,+"changeDate",+function+()+{
++++++++++++var+observable+=+valueAccessor();
++++++++++++observable($el.datepicker("getDate"));
++++++++});

++++++++//handle+disposal+(if+KO+removes+by+the+template+binding)
++++++++ko.utils.domNodeDisposal.addDisposeCallback(element,+function()+{
++++++++++++$el.datepicker("destroy");
++++++++});

++++},
++++update:+function(element,+valueAccessor)+{
++++++++var+value+=+ko.utils.unwrapObservable(valueAccessor()),
++++++++++++$el+=+$(element);

++++++++//handle+date+data+coming+via+json+from+Microsoft
++++++++if+(String(value).indexOf('/Date(')+==+0)+{
++++++++++++value+=+new+Date(parseInt(value.replace(/\/Date$(.*?)$\//gi,+"$1")));
++++++++}

++++++++var+current+=+$el.datepicker("getDate");

++++++++if+(value+-+current+!==+0)+{
++++++++++++$el.datepicker("setDate",+value);
++++++++}
++++}
};|code-block|syntax|javascript|629120|您可以像这样使用它：|629121|<input+data-bind="datepicker:+myDate,+datepickerOptions:+{+minDate:+new+Date()+}"+/>|629122|此处为jsFiddle示例：http://jsfiddle.net/rniemeyer/NAgNV/|629123|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6399078/knockoutjs-databind-with-jquery-controls/6400701#6400701|1|http://jsfiddle.net/rniemeyer/NAgNV/^0|0|E|4|0|0|0|0|0|E|10|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|18|8|@]|9|@$D|19|E|1A|1|1B]]|A|$]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

<p>I think that for the jQuery UI datepicker it is preferable to use a custom binding that will read/write with Date objects using the APIs provided by the datepicker.</p>

<p>The binding might look like (from my answer <a href="https://stackoverflow.com/questions/6399078/knockoutjs-databind-with-jquery-controls/6400701#6400701">here</a>):</p>

<pre><code>ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "changeDate", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date$(.*?)$\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};
</code></pre>

<p>You would use it like:</p>

<pre><code>&lt;input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" /&gt;
</code></pre>

<p>Sample in jsFiddle here: <a href="http://jsfiddle.net/rniemeyer/NAgNV/" rel="noreferrer">http://jsfiddle.net/rniemeyer/NAgNV/</a></p>


blocks|key|844812|text|我认为这可以简单得多：<input+data-bind="value:+myDate,+datepicker:+myDate,+datepickerOptions:+{}"+/>|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|844813|因此，您不需要在init函数中手动处理更改。|844814|但在这种情况下，您的'myDate‘变量将只获得可视的值，而不是Date对象。|844815|entityMap^0|B|26|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|O|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|P|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|K|$]]

<p>I think it can be done much easier: <code>&lt;input data-bind="value: myDate, datepicker: myDate, datepickerOptions: {}" /&gt;</code></p>

<p>So you do not need manual change handling in init function.</p>

<p>But in this case, your 'myDate' variable will get only visible  value, not Date object.</p>


blocks|key|844851|text|谢谢你的这篇文章，我发现它非常有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|844852|如果您希望DatePicker的行为与JQuery+UI的默认行为完全相同，我建议您在change事件处理程序中添加一个模糊元素：|844853|即|844854|++++//handle+the+field+changing
++++ko.utils.registerEventHandler(element,+"change",+function+()+{
++++++++var+observable+=+valueAccessor();
++++++++observable($(element).datepicker("getDate"));

++++++++$(element).blur();

++++});|code-block|syntax|javascript|844855|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Thanks for this article I found it very useful. </p>

<p>If you want the DatePicker to behave exactly like the JQuery UI default behaviour I recommend adding a blur on the element in the change event handler:</p>

<p>i.e.</p>

<pre><code>    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));

        $(element).blur();

    });
</code></pre>


blocks|key|844898|text|这是RP+Niemeyer的答案的一个版本，可以在这里找到敲除验证脚本：http://github.com/ericmbarnard/Knockout-Validation|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|844899|ko.bindingHandlers.datepicker+=+{
++++init:+function+(element,+valueAccessor,+allBindingsAccessor)+{
++++++++//initialize+datepicker+with+some+optional+options
++++++++var+options+=+allBindingsAccessor().datepickerOptions+%7C%7C+{};
++++++++$(element).datepicker(options);

++++++++//handle+the+field+changing
++++++++ko.utils.registerEventHandler(element,+"change",+function+()+{
++++++++++++var+observable+=+valueAccessor();
++++++++++++observable($(element).val());
++++++++++++if+(observable.isValid())+{
++++++++++++++++observable($(element).datepicker("getDate"));

++++++++++++++++$(element).blur();
++++++++++++}
++++++++});

++++++++//handle+disposal+(if+KO+removes+by+the+template+binding)
++++++++ko.utils.domNodeDisposal.addDisposeCallback(element,+function+()+{
++++++++++++$(element).datepicker("destroy");
++++++++});

++++++++ko.bindingHandlers.validationCore.init(element,+valueAccessor,+allBindingsAccessor);

++++},
++++update:+function+(element,+valueAccessor)+{
++++++++var+value+=+ko.utils.unwrapObservable(valueAccessor());

++++++++//handle+date+data+coming+via+json+from+Microsoft
++++++++if+(String(value).indexOf('/Date(')+==+0)+{
++++++++++++value+=+new+Date(parseInt(value.replace(/\/Date$(.*?)$\//gi,+"$1")));
++++++++}

++++++++current+=+$(element).datepicker("getDate");

++++++++if+(value+-+current+!==+0)+{
++++++++++++$(element).datepicker("setDate",+value);
++++++++}
++++}
};|code-block|syntax|javascript|844900|更改事件处理程序首先将输入值而不是日期传递给验证脚本，然后仅将日期设置为可观察对象(如果它有效)。我还添加了这里讨论的自定义绑定所需的validationCore.init：|844901|http://github.com/ericmbarnard/Knockout-Validation/issues/69|844902|我还添加了rpenrose的建议，对更改进行模糊处理，以消除一些令人讨厌的datepicker场景。|844903|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/ericmbarnard/Knockout-Validation|1^0|10|1E|0|0|0|0|0|1O|1|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|L]]]]

<p>Here is a version of RP Niemeyer's answer that will work with the knockout validation scripts found here: <a href="http://github.com/ericmbarnard/Knockout-Validation" rel="noreferrer">http://github.com/ericmbarnard/Knockout-Validation</a></p>

<pre><code>ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).val());
            if (observable.isValid()) {
                observable($(element).datepicker("getDate"));

                $(element).blur();
            }
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

        ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date$(.*?)$\//gi, "$1")));
        }

        current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};
</code></pre>

<p>Changes are to the change event handler to pass the entered value and not the date to the validation scripts first, then only setting the date to the observable if it is valid.  I also added the validationCore.init that is needed for custom bindings discussed here:</p>

<p><a href="http://github.com/ericmbarnard/Knockout-Validation/issues/69" rel="noreferrer">http://github.com/ericmbarnard/Knockout-Validation/issues/69</a></p>

<p>I also added rpenrose's suggestion for a blur on change to eliminate some pesky datepicker scenarios getting in the way of things.</p>


blocks|key|844983|text|我使用了一种不同的方法。由于knockout.js似乎不会在change上触发事件，因此我强制datepicker在关闭后为其输入调用change()。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|844984|$(".date").datepicker({
++++onClose:+function()+{
++++++++$(this).change();+//+Forces+re-validation
++++}
});|code-block|syntax|javascript|844985|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I've used a different approach. Since knockout.js doesn't seem to fire the event on change, I've forced the datepicker to call change() for its input once closed.</p>

<pre><code>$(".date").datepicker({
    onClose: function() {
        $(this).change(); // Forces re-validation
    }
});
</code></pre>


blocks|key|629465|text|与RP+Niemeyer相同，但对WCF+DateTime、时区和使用DatePicker+onSelect+JQuery属性的支持更好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629466|++++++++ko.bindingHandlers.datepicker+=+{
++++++++init:+function+(element,+valueAccessor,+allBindingsAccessor)+{
++++++++++++//initialize+datepicker+with+some+optional+options
++++++++++++var+options+=+allBindingsAccessor().datepickerOptions+%7C%7C+{};

++++++++++++var+funcOnSelectdate+=+function+()+{
++++++++++++++++var+observable+=+valueAccessor();
++++++++++++++++var+d+=+$(element).datepicker("getDate");
++++++++++++++++var+timeInTicks+=+d.getTime()+%2B+(-1+*+(d.getTimezoneOffset()+*+60+*+1000));

++++++++++++++++observable("/Date("+%2B+timeInTicks+%2B+")/");
++++++++++++}
++++++++++++options.onSelect+=+funcOnSelectdate;

++++++++++++$(element).datepicker(options);

++++++++++++//handle+the+field+changing
++++++++++++ko.utils.registerEventHandler(element,+"change",+funcOnSelectdate);

++++++++++++//handle+disposal+(if+KO+removes+by+the+template+binding)
++++++++++++ko.utils.domNodeDisposal.addDisposeCallback(element,+function+()+{
++++++++++++++++$(element).datepicker("destroy");
++++++++++++});

++++++++},
++++++++update:+function+(element,+valueAccessor)+{
++++++++++++var+value+=+ko.utils.unwrapObservable(valueAccessor());

++++++++++++//handle+date+data+coming+via+json+from+Microsoft
++++++++++++if+(String(value).indexOf('/Date(')+==+0)+{
++++++++++++++++value+=+new+Date(parseInt(value.replace(/\/Date$(.*?)$\//gi,+"$1")));
++++++++++++}

++++++++++++current+=+$(element).datepicker("getDate");

++++++++++++if+(value+-+current+!==+0)+{
++++++++++++++++$(element).datepicker("setDate",+value);
++++++++++++}
++++++++}
++++};|code-block|syntax|javascript|629467|享受:)|629468|http://jsfiddle.net/yechezkelbr/nUdYH/|offset|length|629469|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>Same as RP Niemeyer, but better support of WCF DateTime, Timezones and Using the DatePicker onSelect JQuery property.</p>

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

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                var d = $(element).datepicker("getDate");
                var timeInTicks = d.getTime() + (-1 * (d.getTimezoneOffset() * 60 * 1000));

                observable("/Date(" + timeInTicks + ")/");
            }
            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());

            //handle date data coming via json from Microsoft
            if (String(value).indexOf('/Date(') == 0) {
                value = new Date(parseInt(value.replace(/\/Date$(.*?)$\//gi, "$1")));
            }

            current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                $(element).datepicker("setDate", value);
            }
        }
    };
</code></pre>

<p>Enjoy :)</p>

<p><a href="http://jsfiddle.net/yechezkelbr/nUdYH/" rel="nofollow">http://jsfiddle.net/yechezkelbr/nUdYH/</a></p>


blocks|key|629506|text|尽管所有这些答案都为我节省了大量的工作，但没有一个对我来说是完全有效的。选择日期后，绑定的值不会更新。我只能在使用键盘更改日期值，然后在输入框之外单击时才能更新。我修复了这个问题，用syb的代码扩充了RP+Niemeyer的代码，以获得：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629507|ko.bindingHandlers.datepicker+=+{
++++++++init:+function+(element,+valueAccessor,+allBindingsAccessor)+{
++++++++++++//initialize+datepicker+with+some+optional+options
++++++++++++var+options+=+allBindingsAccessor().datepickerOptions+%7C%7C+{};

++++++++++++var+funcOnSelectdate+=+function+()+{
++++++++++++++++var+observable+=+valueAccessor();
++++++++++++++++observable($(element).datepicker("getDate"));
++++++++++++}

++++++++++++options.onSelect+=+funcOnSelectdate;

++++++++++++$(element).datepicker(options);

++++++++++++//handle+the+field+changing
++++++++++++ko.utils.registerEventHandler(element,+"change",+funcOnSelectdate);

++++++++++++//handle+disposal+(if+KO+removes+by+the+template+binding)
++++++++++++ko.utils.domNodeDisposal.addDisposeCallback(element,+function+()+{
++++++++++++++++$(element).datepicker("destroy");
++++++++++++});

++++++++},
++++++++update:+function+(element,+valueAccessor)+{

++++++++++++var+value+=+ko.utils.unwrapObservable(valueAccessor());
++++++++++++if+(typeof(value)+===+"string")+{+//+JSON+string+from+server
++++++++++++++++value+=+value.split("T")[0];+//+Removes+time
++++++++++++}

++++++++++++var+current+=+$(element).datepicker("getDate");

++++++++++++if+(value+-+current+!==+0)+{
++++++++++++++++var+parsedDate+=+$.datepicker.parseDate('yy-mm-dd',+value);
++++++++++++++++$(element).datepicker("setDate",+parsedDate);
++++++++++++}
++++++++}
++++};|code-block|syntax|javascript|629508|我怀疑把observable($(element).datepicker("getDate"))；语句放在它自己的函数中，然后用options.onSelect注册就行了？|629509|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Although all of these answers saved me a lot of work, none of them fully worked for me.  After selecting a date, the binded value would not update.  I could only get it to update when changing the date value using the keyboard then clicking out of the input box.  I fixed this by augmenting RP Niemeyer's code with syb's code to get:</p>

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

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            }

            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (typeof(value) === "string") { // JSON string from server
                value = value.split("T")[0]; // Removes time
            }

            var current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                var parsedDate = $.datepicker.parseDate('yy-mm-dd', value);
                $(element).datepicker("setDate", parsedDate);
            }
        }
    };
</code></pre>

<p>I suspect putting the observable($(element).datepicker("getDate")); statement in its own function and registering that with options.onSelect did the trick?</p>


blocks|key|629539|text|根据Ryan的解决方案，myDate返回标准日期字符串，在我的例子中，这不是理想的日期字符串。我使用date.js来解析值，因此它将始终返回您想要的日期格式。看一下这个示例fiddle+Example。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|629540|update:+function(element,+valueAccessor)+{
++++var+value+=+ko.utils.unwrapObservable(valueAccessor()),
++++++++current+=+$(element).datepicker("getDate");
++++var+d+=+Date.parse(value);
++++if+(value+-+current+!==+0)+{
++++++++$(element).datepicker("setDate",+d.toString("MM/dd/yyyy"));+++
++++}
}|code-block|syntax|javascript|629541|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/Princa/2DSSm/^0|2E|E|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>Based on Ryan's solution, myDate returns the standard date string, which is not the ideal one in my case. I used date.js to parse the value so it will always return the date format you want. Take a look at this example <a href="http://jsfiddle.net/Princa/2DSSm/" rel="nofollow">fiddle Example</a>.</p>

<pre><code>update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");
    var d = Date.parse(value);
    if (value - current !== 0) {
        $(element).datepicker("setDate", d.toString("MM/dd/yyyy"));   
    }
}
</code></pre>


blocks|key|845167|text|我通过更改包含的脚本文件的顺序解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|845168|<script+src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")"></script>
<script+src="@Url.Content("~/Scripts/knockout-2.2.1.js")"></script>|code-block|syntax|javascript|845169|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I solved this problem by changing the order of my included script files:</p>

<pre><code>&lt;script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")"&gt;&lt;/script&gt;
&lt;script src="@Url.Content("~/Scripts/knockout-2.2.1.js")"&gt;&lt;/script&gt;
</code></pre>


blocks|key|629614|text|我需要反复从服务器更新我的数据遇到了这一点，但没有完成工作，因为我的需求分享如下(我的日期格式/Date(1224043200000)/)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|629615|//Object+Model
function+Document(data)+{
++++++++if+(String(data.RedemptionExpiration).indexOf('/Date(')+==+0)+{
++++++++++++var+newDate+=+new+Date(parseInt(data.BDate.replace(/\/Date$(.*?)$\//gi,+"$1")));
++++++++++++data.RedemptionExpiration+=+(newDate.getMonth()%2B1)+%2B
++++++++++++++++"/"+%2B+newDate.getDate()+%2B
++++++++++++++++"/"+%2B+newDate.getFullYear();
++++++++}
++++++++this.RedemptionExpiration+=+ko.observable(data.RedemptionExpiration);
}
//View+Model
function+DocumentViewModel(){
++++///additional+code+removed
++++self.afterRenderLogic+=+function+(elements)+{
++++++++$("#documentsContainer+.datepicker").each(function+()+{
++++++++++++$(this).datepicker();+++++++++++++++++++
++++++++});
++++};
}|code-block|syntax|javascript|629616|在为输出正确格式化模型之后，我添加了一个带有documentation+knockoutjs的模板|offset|length|629617|<div+id="documentsContainer">
++++<div+data-bind="template:+{+name:+'document-template',+foreach:+documents,+afterRender:+afterRenderLogic+},+visible:+documents().length+>+0"></div>
</div>

//Inline+template
<script+type="text/html"+id="document-template">
++<input+data-bind="value:+RedemptionExpiration"+class="datepicker"+/>
</script>|629618|entityMap|0|LINK|mutability|MUTABLE|url|http://knockoutjs.com/documentation/template-binding.html#note_4_using_afterrender_afteradd_and_beforeremove^0|0|0|10|A|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I needed to repeatedly update my data from the server came across this but didn't quite finish the job for my needs sharing below(my date format /Date(1224043200000)/):</p>

<pre><code>//Object Model
function Document(data) {
        if (String(data.RedemptionExpiration).indexOf('/Date(') == 0) {
            var newDate = new Date(parseInt(data.BDate.replace(/\/Date$(.*?)$\//gi, "$1")));
            data.RedemptionExpiration = (newDate.getMonth()+1) +
                "/" + newDate.getDate() +
                "/" + newDate.getFullYear();
        }
        this.RedemptionExpiration = ko.observable(data.RedemptionExpiration);
}
//View Model
function DocumentViewModel(){
    ///additional code removed
    self.afterRenderLogic = function (elements) {
        $("#documentsContainer .datepicker").each(function () {
            $(this).datepicker();                   
        });
    };
}
</code></pre>

<p>After the model is formatted correctly for the output I added a template with the documentation <a href="http://knockoutjs.com/documentation/template-binding.html#note_4_using_afterrender_afteradd_and_beforeremove" rel="nofollow" title="afterRender">knockoutjs</a>:</p>

<pre><code>&lt;div id="documentsContainer"&gt;
    &lt;div data-bind="template: { name: 'document-template', foreach: documents, afterRender: afterRenderLogic }, visible: documents().length &gt; 0"&gt;&lt;/div&gt;
&lt;/div&gt;

//Inline template
&lt;script type="text/html" id="document-template"&gt;
  &lt;input data-bind="value: RedemptionExpiration" class="datepicker" /&gt;
&lt;/script&gt;
</code></pre>


blocks|key|845256|text|很少有人要求使用动态日期选择器选项。在我的例子中，我需要一个动态的日期范围--所以第一个输入定义了第二个的最小值，第二个定义了第一个的最大值。我通过扩展RP+Niemeyer的处理程序解决了这个问题。因此，对于他的原文：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|845257|ko.bindingHandlers.datepicker+=+{
++++init:+function(element,+valueAccessor,+allBindingsAccessor)+{
++++++++//initialize+datepicker+with+some+optional+options
++++++++var+options+=+allBindingsAccessor().datepickerOptions+%7C%7C+{},
++++++++++++$el+=+$(element);

++++++++$el.datepicker(options);

++++++++//handle+the+field+changing+by+registering+datepicker's+changeDate+event
++++++++ko.utils.registerEventHandler(element,+"change",+function()+{
++++++++++++var+observable+=+valueAccessor();
++++++++++++observable($el.datepicker("getDate"));
++++++++});

++++++++//handle+disposal+(if+KO+removes+by+the+template+binding)
++++++++ko.utils.domNodeDisposal.addDisposeCallback(element,+function()+{
++++++++++++$el.datepicker("destroy");
++++++++});

++++},
++++update:+function(element,+valueAccessor)+{
++++++++var+value+=+ko.utils.unwrapObservable(valueAccessor()),
++++++++++++$el+=+$(element);

++++++++//handle+date+data+coming+via+json+from+Microsoft
++++++++if+(String(value).indexOf('/Date(')+==+0)+{
++++++++++++value+=+new+Date(parseInt(value.replace(/\/Date$(.*?)$\//gi,+"$1")));
++++++++}

++++++++var+current+=+$el.datepicker("getDate");

++++++++if+(value+-+current+!==+0)+{
++++++++++++$el.datepicker("setDate",+value);
++++++++}
++++}
};|code-block|syntax|javascript|845258|我又添加了两个处理程序，与我想要修改的选项相对应：|845259|ko.bindingHandlers.minDate+=+{
++++update:+function(element,+valueAccessor)+{
++++++++var+value+=+ko.utils.unwrapObservable(valueAccessor()),
++++++++++++current+=+$(element).datepicker("option",+"minDate",+value);
++++}
};

ko.bindingHandlers.maxDate+=+{
++++update:+function(element,+valueAccessor)+{
++++++++var+value+=+ko.utils.unwrapObservable(valueAccessor()),
++++++++++++current+=+$(element).datepicker("option",+"maxDate",+value);
++++}
};|845260|并在我的模板中这样使用它们：|845261|<input+data-bind="datepicker:+selectedLowerValue,+datepickerOptions:+{+minDate:+minValue()},+maxDate:+selectedUpperValue"+/>+++++++
<input+data-bind="datepicker:+selectedUpperValue,+datepickerOptions:+{+maxDate:+maxValue()},+minDate:+selectedLowerValue"+/>|845262|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Few people asked for dynamic datepicker options. In my case I needed a dynamic date range - so the first input defines the min value of the second and the second sets the max value for the first. I solved it by extending the RP Niemeyer's handler. So to his original:</p>

<pre><code>ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "change", function() {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date$(.*?)$\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};
</code></pre>

<p>I've added two more handlers corresponding to the options I wanted to modify:</p>

<pre><code>ko.bindingHandlers.minDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "minDate", value);
    }
};

ko.bindingHandlers.maxDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "maxDate", value);
    }
};
</code></pre>

<p>And used them like that in my template:</p>

<pre><code>&lt;input data-bind="datepicker: selectedLowerValue, datepickerOptions: { minDate: minValue()}, maxDate: selectedUpperValue" /&gt;       
&lt;input data-bind="datepicker: selectedUpperValue, datepickerOptions: { maxDate: maxValue()}, minDate: selectedLowerValue" /&gt;
</code></pre>


blocks|key|629748|text|使用前面答案中提供的自定义绑定并不总是可行的。调用$(element).datepicker(...)需要相当长的时间，例如，如果你有几十个甚至上百个元素来调用这个方法，你必须“懒惰”地去做，即按需调用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|629749|例如，视图模型可以被初始化，input被插入到DOM中，但是相应的日期选择器只有在用户单击它们时才会被初始化。|629750|所以，这是我的解决方案：|629751|添加允许将任意数据附加到节点的自定义绑定：|629752|KO.bindingHandlers.boundData+=+{
++init:+function(element,+__,+allBindings)+{
++++element.boundData+=+allBindings.get('boundData');
++}
};|code-block|syntax|javascript|629753|使用绑定来附加用于input的值的可观察对象：|629754|<input+type='text'+class='my-date-input'
+++++++data-bind='textInput:+myObservable,+boundData:+myObservable'+/>|629755|最后，在初始化datepicker时，使用它的onSelect选项：|629756|$('.my-date-input').datepicker({
++onSelect:+function(dateText)+{
++++this.myObservable(dateText);
++}
++//Other+options
});|629757|这样，每次用户使用datepicker更改日期时，相应的Knockout可观察值也会更新。|629758|entityMap^0|P|Q|0|E|5|0|0|0|0|9|5|0|0|N|8|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|18|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|19|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1A|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|S|3|T|5|N|7|1E|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|W|3|X|5|N|7|1I|8|@]|D|@]|E|$O|P]]|$1|Y|3|Z|5|6|7|1J|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|1K|8|@]|D|@]|E|$]]]|11|$]]

<p>Using custom bindings provided in previous answers is not always possible. Calling <code>$(element).datepicker(...)</code> takes some considerable time, and if you have, for example, a few dozens, or even hundreds of elements to call this method with, you have to do it "lazy", i.e. on demand.</p>

<p>For example, the view model may be initialized, the <code>input</code>s being inserted into the DOM, but the corresponding datepickers will only be initialized when a user clicks them.</p>

<p>So, here is my solution:</p>

<p>Add a custom binding that allows to attach arbitrary data to a node:</p>

<pre><code>KO.bindingHandlers.boundData = {
  init: function(element, __, allBindings) {
    element.boundData = allBindings.get('boundData');
  }
};
</code></pre>

<p>Use the binding to attcah the observable used for the <code>input</code>'s value:</p>

<pre><code>&lt;input type='text' class='my-date-input'
       data-bind='textInput: myObservable, boundData: myObservable' /&gt;
</code></pre>

<p>And finally, when initializing the datepicker, use it's <code>onSelect</code> option:</p>

<pre><code>$('.my-date-input').datepicker({
  onSelect: function(dateText) {
    this.myObservable(dateText);
  }
  //Other options
});
</code></pre>

<p>This way, every time a user changes the date with the datepicker, the corresponding Knockout observable is also updated.</p>


<p>I'm trying to use KnockoutJS with jQuery UI. I have an input element with a datepicker attached. I'm currently running <code>knockout.debug.1.2.1.js</code> and it seems that the change event is never being caught by Knockout. The element looks like this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;input type="text" class="date" data-bind="value: RedemptionExpiration"/&gt;
</code></pre>

<p>I've even tried changing the <code>valueUpdate</code> event type but to no avail. It seems like Chrome causes a <code>focus</code> event just before it changes the value, but IE doesn't.</p>

<p>Is there some Knockout method that "rebinds all the bindings"? I technically only need the value changed before I send it back to the server. So I could live with that kind of workaround.</p>

<p>I think the problem's the datepicker's fault, but I can't figure out how to fix this.</p>

<p>Any ideas?</p>


jQuery UI datepicker change event not caught by KnockoutJS

服务器

jQuery

JSON

我正在尝试使用带有jQuery UI的KnockoutJS。我有一个附加了datepicker的输入元素。我目前正在运行knockout.debug.1.2.1.js，似乎Knockout永远不会捕捉到更改事件。该元素如下所示：<input type="text" class="date" data-bind="val...

问KnockoutJS未捕获jQuery UI日期选择器更改事件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KnockoutJS未捕获jQuery UI日期选择器更改事件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问KnockoutJS未捕获jQuery UI日期选择器更改事件
EN