剔除DatePicker绑定的项目不会禁用DatePicker

2019-11-22 03:35:51 阅读：263 来源： 互联网

标签：jquery-ui datepicker knockout-js javascript jquery

我有一个用于日期选择器的自定义敲除绑定.

ko.bindingHandlers.valueAsDatePicker = {...}

当绑定的输入字段状态(启用/禁用)绑定到可观察到的KO时,它不会启用/禁用datepicker图标.

的HTML

<input id="txtRequestedTo" type="text" placeholder="dd/mm/yyyy" 
data-bind="valueAsDatePicker: reqDateTo, disable: reqDateFrom().length < 1" />

自定义绑定

ko.bindingHandlers.valueAsDatePicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
        formatAndSetDateValue(element, valueAccessor, allBindingsAccessor);

        // Init UI datepicker
        var dateFormat = allBindingsAccessor.dateFormat 

        $(element).datepicker({
            dateFormat: dateFormat,
            changeMonth: true, 
            changeYear: true, 
            yearRange: '1900:' + new Date().getFullYear(), 
            maxDate: 0, 
            showOn: "button",
            buttonImage: "Content/images/sprite-base/sprite/icon-calender.png",
            buttonImageOnly: true,
            constrainInput: false, 
            buttonText: ""          
        });
    },
    update: function(element, valueAccessor, allBindingsAccessor) {
        // Use the value binding
        ko.bindingHandlers.value.update(element, valueAccessor, allBindingsAccessor);
        formatAndSetDateValue(element, valueAccessor, allBindingsAccessor);

        valueAccessor().valueHasMutated(); 
    }
};

我希望禁用日期选择器(如果禁用了该元素),反之亦然.

解决方法:

感谢一百万罗伯特,

这是有效的解决方案.

Using KnockOutJS V3.1

init: function (element, valueAccessor, allBindings) {
...

//Disable the datepicker if the item is disabled or enabled.
    if (allBindings.has('disable')) {
        if (allBindings.get('disable')()) {
            $(element).datepicker('disable');
        }
        else {
            $(element).datepicker('enable');
        }
        var subscription = allBindings.get('disable').subscribe(function (newValue) {
            if (newValue) {
                $(element).datepicker('disable');
            } else {
                $(element).datepicker('enable');
            }
        });

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            subscription.dispose();
        });
    }
}

你必须用

if (allBindings.has('disable')) {

除此以外

allBindings.get('disable')

将不确定,因为视图中并非所有日期选择器绑定字段都具有Disabled属性.

标签：jquery-ui,datepicker,knockout-js,javascript,jquery
来源： https://codeday.me/bug/20191122/2056748.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

剔除DatePicker绑定的项目不会禁用DatePicker